SpringBoot 之应用 EasyUI
EasyUI 是一个简单的用户界面组件的集合。由于 EasyUI 已经封装好大部分 UI 基本功能,能帮用户减少大量的 js 和 css 代码。所以,EasyUI 非常适合用于开发简单的系统或原型系统。
本文示例使用技术点:
- Spring Boot:主要使用了 spring-boot-starter-web、spring-boot-starter-data-jpa
- EasyUI:按需加载,并没有引入所有的 EasyUI 特性
- 数据库:为了测试方便,使用 H2
简介
什么是 EasyUI?
- easyui 是基于 jQuery、Angular.、Vue 和 React 的用户界面组件的集合。
- easyui 提供了构建现代交互式 javascript 应用程序的基本功能。
- 使用 easyui,您不需要编写许多 javascript 代码,通常通过编写一些 HTML 标记来定义用户界面。
- 完整的 HTML5 网页框架。
- 使用 easyui 开发你的产品时可以大量节省你的时间和规模。
- easyui 使用非常简单但功能非常强大。
Spring Boot 整合 EasyUI
配置
application.properties 修改:
1 2
| spring.mvc.view.prefix = /views/ spring.mvc.view.suffix = .html
|
引入 easyui
EasyUI 下载地址:http://www.jeasyui.cn/download.html
在 src/main/resources/static
目录下引入 easyui。
然后在 html 中引用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/bootstrap/easyui.css" /> <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/color.css" /> <script type="text/javascript" src="../lib/easyui/jquery.min.js"></script> <script type="text/javascript" src="../lib/easyui/jquery.easyui.min.js" ></script> <script type="text/javascript" src="../lib/easyui/locale/easyui-lang-zh_CN.js" ></script> </head> <body> </body> </html>
|
引入 easyui 后,需要使用哪种组件,可以查看相关文档或 API,十分简单,此处不一一赘述。
实战
引入 maven 依赖
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-tomcat</artifactId> <scope>provided</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency>
<dependency> <groupId>com.h2database</groupId> <artifactId>h2</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> </dependency> <dependency> <groupId>commons-collections</groupId> <artifactId>commons-collections</artifactId> <version>3.2.2</version> </dependency> </dependencies>
|
使用 JPA
为了使用 JPA 技术访问数据,我们需要定义 Entity 和 Repository
定义一个 Entity:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| @Entity public class User {
@Id @GeneratedValue(strategy = GenerationType.AUTO) private Long id; private String firstName; private String lastName; private String phone; private String email;
protected User() {}
public User(String firstName, String lastName, String phone, String email) { this.firstName = firstName; this.lastName = lastName; this.phone = phone; this.email = email; }
}
|
定义一个 Repository:
1 2 3 4
| public interface UserRepository extends CrudRepository<User, Long> {
List<User> findByLastName(String lastName); }
|
使用 Web
首页 Controller,将 web 请求定向到指定页面(下面的例子定向到 index.html)
1 2 3 4 5 6 7 8 9
| @Controller public class IndexController {
@RequestMapping(value = {"", "/", "index"}) public String index() { return "index"; }
}
|
此外,需要定义一个 Controller,提供后台的 API 接口
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| @Controller public class UserController {
@Autowired private UserRepository customerRepository;
@RequestMapping(value = "/user", method = RequestMethod.GET) public String user() { return "user"; }
@ResponseBody @RequestMapping(value = "/user/list") public ResponseDTO<User> list() { Iterable<User> all = customerRepository.findAll(); List<User> list = IteratorUtils.toList(all.iterator()); return new ResponseDTO<>(true, list.size(), list); }
@ResponseBody @RequestMapping(value = "/user/add") public ResponseDTO<User> add(User user) { User result = customerRepository.save(user); List<User> list = new ArrayList<>(); list.add(result); return new ResponseDTO<>(true, 1, list); }
@ResponseBody @RequestMapping(value = "/user/save") public ResponseDTO<User> save(@RequestParam("id") Long id, User user) { user.setId(id); customerRepository.save(user); List<User> list = new ArrayList<>(); list.add(user); return new ResponseDTO<>(true, 1, list); }
@ResponseBody @RequestMapping(value = "/user/delete") public ResponseDTO delete(@RequestParam("id") Long id) { customerRepository.deleteById(id); return new ResponseDTO<>(true, null, null); }
}
|
使用 EasyUI
接下来,我们要使用前面定义的后台接口,仅需要在 EasyUI API 中指定 url
即可。
请留意下面示例中的 url 字段,和实际接口是一一对应的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237
| <!DOCTYPE html> <html> <head> <title>Complex Layout - jQuery EasyUI Demo</title> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/bootstrap/easyui.css" /> <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/color.css" /> <script type="text/javascript" src="../lib/easyui/jquery.min.js"></script> <script type="text/javascript" src="../lib/easyui/jquery.easyui.min.js" ></script> <script type="text/javascript" src="../lib/easyui/locale/easyui-lang-zh_CN.js" ></script> <style type="text/css"> body { font-family: microsoft yahei; } </style> </head> <body> <div style="width:100%"> <h2>基本的 CRUD 应用</h2> <p>数据来源于后台系统</p>
<table id="dg" title="Custom List" class="easyui-datagrid" url="/user/list" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true" > <thead> <tr> <th field="id" width="50">ID</th> <th field="firstName" width="50">First Name</th> <th field="lastName" width="50">Last Name</th> <th field="phone" width="50">Phone</th> <th field="email" width="50">Email</th> </tr> </thead> </table> <div id="toolbar"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()" >添加</a > <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()" >修改</a > <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()" >删除</a > </div>
<div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'" > <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px" > <h3>User Information</h3> <div style="margin-bottom:10px"> <input name="firstName" class="easyui-textbox" required="true" label="First Name:" style="width:100%" /> </div> <div style="margin-bottom:10px"> <input name="lastName" class="easyui-textbox" required="true" label="Last Name:" style="width:100%" /> </div> <div style="margin-bottom:10px"> <input name="phone" class="easyui-textbox" required="true" label="Phone:" style="width:100%" /> </div> <div style="margin-bottom:10px"> <input name="email" class="easyui-textbox" required="true" validType="email" label="Email:" style="width:100%" /> </div> </form> </div> <div id="dlg-buttons"> <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px" >Save</a > <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px" >Cancel</a > </div> </div>
<script type="text/javascript"> var url
function newUser() { $('#dlg') .dialog('open') .dialog('center') .dialog('setTitle', 'New User') $('#fm').form('clear') url = '/user/add' }
function editUser() { var row = $('#dg').datagrid('getSelected') if (row) { $('#dlg') .dialog('open') .dialog('center') .dialog('setTitle', 'Edit User') $('#fm').form('load', row) url = '/user/save' } }
function saveUser() { $('#fm').form('submit', { url: url, onSubmit: function() { return $(this).form('validate') }, success: function(result) { var result = eval('(' + result + ')') if (result.errorMsg) { $.messager.show({ title: 'Error', msg: result.errorMsg }) } else { $('#dlg').dialog('close') $('#dg').datagrid('reload') } } }) }
function destroyUser() { var row = $('#dg').datagrid('getSelected') if (row) { $.messager.confirm( 'Confirm', 'Are you sure you want to destroy this user?', function(r) { if (r) { $.post( '/user/delete', { id: row.id }, function(result) { if (result.success) { $('#dg').datagrid('reload') } else { $.messager.show({ title: 'Error', msg: result.errorMsg }) } }, 'json' ) } } ) } } </script> </body> </html>
|
完整示例
请参考 源码
运行方式:
1 2
| mvn clean package -DskipTests=true java -jar target/
|
在浏览器中访问:http://localhost:8080/
引用和引申