Spring Boot 之整合 EasyUI 打造 Web 应用

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

本文示例使用技术点：

• Spring Boot：主要使用了 spring-boot-starter-web、spring-boot-starter-data-jpa

• EasyUI：按需加载，并没有引入所有的 EasyUI 特性

• 数据库：为了测试方便，使用 H2

• easyui 是基于 jQuery、Angular.、Vue 和 React 的用户界面组件的集合。

• easyui 提供了构建现代交互式 javascript 应用程序的基本功能。

• 使用 easyui，您不需要编写许多 javascript 代码，通常通过编写一些 HTML 标记来定义用户界面。

• 完整的 HTML5 网页框架。

• 使用 easyui 开发你的产品时可以大量节省你的时间和规模。

• easyui 使用非常简单但功能非常强大。

application.properties 修改：

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

EasyUI 下载地址：http://www.jeasyui.cn/download.html

在 src/main/resources/static 目录下引入 easyui。

然后在 html 中引用：

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

  
    
      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 技术访问数据，我们需要定义 Entity 和 Repository

定义一个 Entity：

@Entitypublic 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);
}

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

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

}

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

@Controllerpublic 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 API 中指定 url 即可。

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

  
    
    
    
    
    
    
    
    
    
      body {        font-family: microsoft yahei;
      }    
  
  
    
      基本的 CRUD 应用
      
数据来源于后台系统

      
        
          
            ID
            First Name
            Last Name
            Phone
            Email
          
        
      
      
        添加
        修改
        删除
      

      
        
      
      
        Save
        Cancel
      
    

    
  

请参考 源码

运行方式：

mvn clean package -DskipTests=truejava -jar target/

在浏览器中访问：http://localhost:8080/

• EasyUI 官网

• EasyUI 中文网

作者：静默虚空

原文出处：https://www.cnblogs.com/jingmoxukong/p/10239821.html