SpringBoot集成EasyUI

柔光的暖阳◎ 2022-03-01 10:00 101阅读 0赞

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

> 准备工作：

1．去easyui官网下载安装包：  
![2019032211160359.png][]

解压到一个目录下，目录结构如下：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMjYzMDM5_size_16_color_FFFFFF_t_70][]

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

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`错误。列表接口参数转换如图所示：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMjYzMDM5_size_16_color_FFFFFF_t_70 2][]  
可以使用postman或者swagger-ui测试一下接口返回数据是否正常。

4．Index.html文件内容，首先引入easyui文件，body标签里面新增表格代码，调用上图的列表接口，url为requestMapping请求路径，如图：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMjYzMDM5_size_16_color_FFFFFF_t_70 3][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMjYzMDM5_size_16_color_FFFFFF_t_70 4][]  
在页面上直接访问localhost:8080/index.html页面，就可以看到列表页面，如下图所示:  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMjYzMDM5_size_16_color_FFFFFF_t_70 5][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMjYzMDM5_size_16_color_FFFFFF_t_70 6][]

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

[springboot_Demo]: https://github.com/1036789521/springboot_study
[2019032211160359.png]: /images/20220301/59174f918b5447a89447015c01b2b7a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMjYzMDM5_size_16_color_FFFFFF_t_70]: /images/20220301/c1180578e368498892a436acf7aecb88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMjYzMDM5_size_16_color_FFFFFF_t_70 1]: /images/20220301/0264f385a7064c12ae025d02ec4abde5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMjYzMDM5_size_16_color_FFFFFF_t_70 2]: /images/20220301/0d5de72dbb214b60a6efec14cb713b14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMjYzMDM5_size_16_color_FFFFFF_t_70 3]: /images/20220301/bb9f7bc952474890926b950b0f1ae0fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMjYzMDM5_size_16_color_FFFFFF_t_70 4]: /images/20220301/68593d3266074dddaa3f13c7f2284d0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMjYzMDM5_size_16_color_FFFFFF_t_70 5]: /images/20220301/ab1f1e7b00b34547b96fd7593c158c70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMjYzMDM5_size_16_color_FFFFFF_t_70 6]: /images/20220301/5ac20ddf378b4ddcbf1a3594fea623ac.png