前一篇博客中使用LayUI实现了列表页面和编辑页面的显示交互,但列表页面table渲染的数据是固定数据,本篇博客主要是将固定数据变成数据库数据。
一、项目框架
首先要解决的是项目框架问题,搭建什么样的框架比较合适,优缺点是什么,扩展性、可读性等方面都要考虑,本项目的框架也是百度参考借鉴网友的,不管是Java还是C#的项目思想都差不多也都是可以互相借鉴的,下图是项目结构图,可能后面还会根据需要再进一步的修改完善。
上面目录结构中主要包含8个包,下面对这几个包进行简单介绍。
com.example:存在main函数类
com.example.config:配置类包,例如druid多数据源配置类
com.example.controller:存放controller
com.example.dao:与数据库交互层,存放mapper接口
com.example.entity:实体层,这个与com.example.pojo有点类似,不过两个还是有区别的,pojo层主要是与数据库单个数据表对应,entity可能是其他对象的抽象,比如多个表联合查询组成的行对应的类、或者前端页面显示对应的类、一对多、多对多关系。
com.example.pojo:数据库表的对应类
com.example.service:业务服务接口层,定义服务接口,优势是什么呢,这样在Controller中注入的是service接口,是面向接口的编程,如果服务的具体实现改变了也不影响其他注入类。
com.example.service.impl:实现服务接口,业务逻辑的具体实现
com.example.utils:基础类、工具类层
二、集成日志
项目使用的log4j2日志框架,由于SpringBoot自带的有日志框架,所以需要先排除掉,然后在引入log4j2日志。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <exclusions> <exclusion> <artifactId>spring-boot-starter-logging</artifactId> <groupId>org.springframework.boot</groupId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-log4j2</artifactId> </dependency>
可以在application.properties中设置log4j2的相关配置或者创建log4j2.xml放在application.properties同目录下。这里在创建的log4j2.xml中设置日志存放位置在D:loglogs,在该目录下可以看下日志文件。
二、集成mybatis
集成mybatis主要是引入两个依赖,一个是mysql的,一个是mybatis的。
<!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter --> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>1.3.2</version> </dependency> <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.11</version> </dependency>
项目是使用的xml方式管理sql,所以在该项目的resource目录下创建了mybatis目录,子目录mapper存放sql映射文件,mybatis-config.xml放mybatis的配置,同时还需要在application.properties设置数据库信息、mybatis文件目录信息。
#mysql spring.datasource.driverClassName = com.mysql.cj.jdbc.Driver #spring.datasource.url = jdbc:mysql://localhost:3306/mybatis spring.datasource.url =jdbc:mysql://127.0.0.1:3306/mybatis?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC spring.datasource.username = root spring.datasource.password = 123456 #mybatis mybatis.type-aliases-package=com.example.model mybatis.config-location=classpath:mybatis/mybatis-config.xml mybatis.mapper-locations=classpath:mybatis/mapper/*.xml
三、集成分页pagehelper
集成pagehelper这里有两种方式,一是spring集成方式,二是SpringBoot集成方式,可参考:https://www.cnblogs.com/1315925303zxz/p/7364552.html 。这里使用的是第一种,另外在这里遇到了一个问题,就是分页操作之后能查出数据但PageInfo的total值一直是0,原来是忘记在mybatis-config.xml配置pagehelper插件并要设置rowBoundsWithCount=true。
<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>3.4.2</version> </dependency>
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <typeAliases> <typeAlias alias="Integer" type="java.lang.Integer" /> <typeAlias alias="Long" type="java.lang.Long" /> <typeAlias alias="HashMap" type="java.util.HashMap" /> <typeAlias alias="LinkedHashMap" type="java.util.LinkedHashMap" /> <typeAlias alias="ArrayList" type="java.util.ArrayList" /> <typeAlias alias="LinkedList" type="java.util.LinkedList" /> </typeAliases> <plugins> <!-- com.github.pagehelper为PageHelper类所在包名 --> <plugin interceptor="com.github.pagehelper.PageHelper"> <!-- 方言 --> <property name="dialect" value="mysql"/> <!-- 该参数默认为false --> <!-- 设置为true时,使用RowBounds分页会进行count查询 --> <property name="rowBoundsWithCount" value="true"/> </plugin> </plugins> </configuration>
四、数据分页实现
1.首先数据库准备数据
这里在数据表中插入了12条数据。
2.分页
layui的table填充的数据有4个字段,code、msg、count、data,所以在PageDataResult中定义也定义了4个属性。
package com.example.utils; import java.util.List; public class PageDataResult { //总记录数量 private Integer totals; //当前页数据列表 private List<?> list; private Integer code=200; private String msg=""; public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public PageDataResult() { } public PageDataResult( Integer totals, List<?> list) { this.totals = totals; this.list = list; } public Integer getTotals() { return totals; } public void setTotals(Integer totals) { this.totals = totals; } public List<?> getList() { return list; } public void setList(List<?> list) { this.list = list; } public Integer getCode() { return code; } public void setCode(Integer code) { this.code = code; } @Override public String toString() { return "PageDataResult{" + "totals=" + totals + ", list=" + list + ", code=" + code + '}'; } }
3.分页实现
主要实现方法也比较简单,使用pagehelper进行分页,然后将结果设置到PageDataResult。
@Override public PageDataResult getUsers(UserSearchDTO userSearch) { PageDataResult pdr = new PageDataResult(); PageHelper.startPage(userSearch.getPage(), userSearch.getLimit(),true); List<User> urList = userMapper.getUsers(userSearch); logger.debug("urList:"+urList.size()); // 获取分页查询后的数据 PageInfo<User> pageInfo = new PageInfo<>(urList); // 设置获取到的总记录数total: logger.debug("page:"+userSearch.getPage()+"limit:"+userSearch.getLimit()+"总行数:"+pageInfo.getTotal()); pdr.setTotals(Long.valueOf(pageInfo.getTotal()).intValue()); pdr.setList(urList); return pdr; }
4.替换固定数据
上一博客是将列表数据写成固定的,这里进行了替换,分页之后返回PageDataResult。
@RequestMapping(value = "/getUsers", method = RequestMethod.GET) @ResponseBody public PageDataResult getUsers(@RequestParam("page") Integer page, @RequestParam("limit") Integer limit,@RequestParam(value="keyword",required=false) String keyword) { logger.debug("分页查询用户列表!,查询条件keyword:"+keyword+"page:" + page+",每页记录数量limit:" + limit); PageDataResult pdr = new PageDataResult(); try { if (null == page) { page = 1; } if (null == limit) { limit = 10; } UserSearchDTO userSearch=new UserSearchDTO(page,limit,keyword); // 获取用户和角色列表 pdr = userService.getUsers(userSearch); logger.debug("用户列表查询=pdr:" + pdr); logger.debug("用户列表查询数量:" + pdr.getList().size()); } catch (Exception e) { e.printStackTrace(); logger.error("用户列表查询异常!", e); } return pdr; }
五、优化
由于从数据库返回的user表的sex数据是0、1,所以需要转成男、女,使用了table列的templet,同时id列通过hide=true进行了隐藏,又由于PageDataResult返回结果的key的名字与table所要求的不一致,又使用了response进行映射。下面代码是目前最新的user.js代码,后续可能还会更新。
var table; var layer; layui.use([ 'layer', 'table', 'element' ], function() { table = layui.table; layer = layui.layer; // 执行一个 table 实例 table.render({ elem : '#user', height:350, url : '/user/getUsers', method: 'get', //默认:get请求 page :true, // 开启分页 request: { pageName: 'page' //页码的参数名称,默认:page ,limitName: 'limit' //每页数据量的参数名,默认:limit },response:{ statusName: 'code' //数据状态的字段名称,默认:code ,statusCode: 200 //成功的状态码,默认:0 ,countName: 'totals' //数据总数的字段名称,默认:count ,dataName: 'list' //数据列表的字段名称,默认:data }, cols : [ [ // 表头 { fixed : 'left', type : 'checkbox' }, { field : 'id', title : 'ID', width : 80, fixed : 'left', hide:true }, { field : 'name', title : '姓名', width : 80 }, { field : 'age', title : '年龄', width : 80 }, { field : 'sex', title : '性别', width : 80, templet : function(d) { if (d.sex == 1) { return '男'; } else if (d.sex == 0) { return '女'; } } },{ title : '操作', width : 200, align : 'center', toolbar : '#tools' } ] ] }); // 监听工具条 table.on('tool(tools)', function(obj) { // 注:tool是工具条事件名,test是table原始容器的属性 var data = obj.data // 获得当前行数据 , layEvent = obj.event; // 获得 lay-event 对应的值 if ('edit' == layEvent) { addUser(data.id) } else if ('del' == layEvent) { del(data.id); } }); }); function queryUser(){ var keyword = $("#keyword").val(); table.reload('user', { where : { keyword : keyword }, page : { curr : 1 } }); } var index; function addUser(id) { index = parent.layer.open({ type : 2, title : "用户信息", area: ['550px', '400px'], content : '/user/edit?id=' + id }); layer.full(index); } function del(id) { parent.layer.open({ type : 1, content : '<div style="padding: 20px 80px;">确定删除记录?</div>', btn : [ '确定', '取消' ], yes : function(index, layero) { $.ajax({ url : "/user/delete", data : { "id" : id }, dataType : "text", success : function(data) { if(data==0){ layer.msg("删除成功!"); layer.close(index); queryUser(); }else{ layer.msg("删除失败!"); } }, error : function() { } }); } }); } /** * 获取选中数据 */ function getDatas(){ var checkStatus = table.checkStatus('user'); var data = checkStatus.data; var id = ""; for(var i=0;i<data.length;i++){ id += data[i].id; if(i<data.length-1){ id += ","; } } if(data.length != 0){ alert(id); // del(id); } }
六.小结
目前把java部分的项目框架搭建了起来,也集成了日志、mybatis、分页插件pagehelper,实现了table页面动态数据分页显示,后续就是将新增、编辑、删除几个功能实现,同时还要注意删除功能,删除用户后可能还要删除用户与角色关联表,会涉及到事务操作,后续也会加进来。