Spring Boot 之整合 EasyUI 打造 Web 应用

:: Web :: UI ::

是一个简单的用户界面组件的集合。由于 已经封装好大部分 UI 基本功能，能帮用户减少大量的 js 和 css 代码。所以， 非常适合用于开发简单的系统或原型系统。

本文示例使用技术点：

Boot 整合 实战 完整示例引用和引申

简介 什么是 ？ Boot 整合 配置

. 修改：

spring.mvc.view.prefix = /views/
spring.mvc.view.suffix = .html

引入

下载地址：

在 src/main// 目录下引入 。

然后在 html 中引用：

引入 后，需要使用哪种组件，可以查看相关文档或 API，十分简单，此处不一一赘述。

实战 引入 maven 依赖

  org.springframework.bootspring-boot-starter-weborg.springframework.bootspring-boot-starter-data-jpaorg.springframework.bootspring-boot-starter-tomcatprovidedorg.springframework.bootspring-boot-starter-testtestcom.h2databaseh2org.springframework.bootspring-boot-devtoolscommons-collectionscommons-collections3.2.2

使用 JPA

为了使用 JPA 技术访问数据，我们需要定义 和

定义一个 ：

@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
}

定义一个 ：

public interface UserRepository extends CrudRepository {List findByLastName(String lastName);
}

使用 Web

首页 ，将 web 请求定向到指定页面（下面的例子定向到 index.html）

@Controller
public class IndexController {@RequestMapping(value = {"", "/", "index"})public String index() {return "index";}}

此外，需要定义一个 ，提供后台的 API 接口

@Controller
public class UserController {@Autowiredprivate 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);}}

使用

接下来，我们要使用前面定义的后台接口，仅需要在 API 中指定 url 即可。

请留意下面示例中的 url 字段，和实际接口是一一对应的。

基本的 CRUD 应用
数据来源于后台系统
IDFirst NameLast NamePhoneEmail
添加修改删除
User Information
SaveCancel