---
title: SpringBoot 之应用 EasyUI
date: 2019-01-08 17:19:34
order: 21
categories:
- Java
- 框架
- Spring
- SpringWeb
tags:
- Java
- 框架
- Spring
- SpringBoot
- Web
permalink: /pages/3e39cd2c/
---
# 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 修改：
```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 中引用：
```html
```
引入 easyui 后，需要使用哪种组件，可以查看相关文档或 API，十分简单，此处不一一赘述。
## 实战
### 引入 maven 依赖
```xml
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-data-jpa
org.springframework.boot
spring-boot-starter-tomcat
provided
org.springframework.boot
spring-boot-starter-test
test
com.h2database
h2
org.springframework.boot
spring-boot-devtools
commons-collections
commons-collections
3.2.2
```
### 使用 JPA
为了使用 JPA 技术访问数据，我们需要定义 Entity 和 Repository
定义一个 Entity：
```java
@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 {
List findByLastName(String lastName);
}
```
### 使用 Web
首页 Controller，将 web 请求定向到指定页面（下面的例子定向到 index.html）
```java
@Controller
public class IndexController {
@RequestMapping(value = {"", "/", "index"})
public String index() {
return "index";
}
}
```
此外，需要定义一个 Controller，提供后台的 API 接口
```java
@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 list() {
Iterable all = customerRepository.findAll();
List list = IteratorUtils.toList(all.iterator());
return new ResponseDTO<>(true, list.size(), list);
}
@ResponseBody
@RequestMapping(value = "/user/add")
public ResponseDTO add(User user) {
User result = customerRepository.save(user);
List list = new ArrayList<>();
list.add(result);
return new ResponseDTO<>(true, 1, list);
}
@ResponseBody
@RequestMapping(value = "/user/save")
public ResponseDTO save(@RequestParam("id") Long id, User user) {
user.setId(id);
customerRepository.save(user);
List 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 字段，和实际接口是一一对应的。
```html
Complex Layout - jQuery EasyUI Demo
基本的 CRUD 应用
数据来源于后台系统
| ID |
First Name |
Last Name |
Phone |
Email |
```
## 完整示例
请参考 [源码](https://github.com/dunwu/spring-boot-tutorial/tree/master/codes/spring-boot-web-ui/spring-boot-web-ui-easyui)
运行方式：
```
mvn clean package -DskipTests=true
java -jar target/
```
在浏览器中访问：http://localhost:8080/
## 引用和引申
- [EasyUI 官网](http://www.jeasyui.com/)
- [EasyUI 中文网](http://www.jeasyui.cn/)