SpringBoot集成EasyUI

前置条件：已成功搭建一个springboot项目，且可以简单的增删改查，启动项目ok，我这边已成功搭建一个简单的spring boot项目，使用lambok插件，集成了mybatis plus和redis，项目地址为 springboot简单Demo，下载可直接使用。

准备工作：

1．去easyui官网下载安装包：

解压到一个目录下，目录结构如下：

然后把整个解压包放在上面springboot的static目录下，结构如下图所示：

2．新建一个index.html文件，注意这个文件需要放在static目录下，也就是跟easyui在同一个目录，否则放在templates下由于springboot的内部机制，调用接口访问不到会报404，结构如上图所示，浏览器访问这个页面的路径是localhost:8080/index.html.

3．在controller层写一个简单的增删查改Rest API接口，类上用@RestController注解，接口请求参数使用form表单提交方式，不用加注解@RequestBody，如果加这个注解代表接收的是json，需要在前端提交时加content-type参数设置为application/json，charset=utf-8，由于不是特别熟悉，就采用form表单提交方式，参数前面不加任何注解，否则请求会报415错误,错误如下：

org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

有一个重要的地方需要注意，就是分页查询列表接口时，easyui只支持默认的两个参数total和rows，所以我们自定义分页查询返回的参数需要封装成所需要的参数类型，如下图所示，这样才可以成功展示列表数据，否则接口请求成功，界面展示不了数据，一直会报java Cannot read property 'length' of undefined错误。列表接口参数转换如图所示：
可以使用postman或者swagger-ui测试一下接口返回数据是否正常。

4．Index.html文件内容，首先引入easyui文件，body标签里面新增表格代码，调用上图的列表接口，url为requestMapping请求路径，如图：


在页面上直接访问localhost:8080/index.html页面，就可以看到列表页面，如下图所示:

注意，如果访问看不到列表页面，打开F12再请求一次，看请求资源是否报错，如果资源报404，就是html文件中引入的easyui文件路径不对，如果全部正常，接口也返回了数据，列表就是展示不了数据，请看第三条，看你的接口返回参数是否跟easyui是否一致，否则需要封装接口的返回参数为easyui需要的格式，这样就可以正常展示。