目錄
SpringBootTutorial :: Web :: UI :: 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 修改：
spring.mvc.view.prefix = /views/ spring.mvc.view.suffix = .html引入 easyui
EasyUI 下載地址：http://www.jeasyui.cn/download.html
在 src/main/resources/static 目錄下引入 easyui。
然后在 html 中引用：
<!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 依賴
<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：
@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; } // 略 getter/setter }定義一個 Repository：
public interface UserRepository extends CrudRepository<User, Long> { List<User> findByLastName(String lastName); }使用 Web
首頁 Controller，將 web 請求定向到指定頁面（下面的例子定向到 index.html）
@Controller public class IndexController { @RequestMapping(value = {"", "/", "index"}) public String index() { return "index"; } }此外，需要定義一個 Controller，提供后台的 API 接口
@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 字段，和實際接口是一一對應的。
<!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%" />