耳闻之不如目见之,目见之不如足践之。一一刘向《说苑》
我们首先准备一个接口,格式如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| # 请求方法为POST,参数格式为:application/json {"pageNum":1,"pageSize":10} # 响应格式如下 { "msg": "查询成功!", "code": 200, "data": { "records": [], "total": 0, "size": 10, "current": 1, "searchCount": true, "pages": 1 }, "success": true }
|
编写Java
代码
DTO
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| package com.ruben.pojo.dto;
import lombok.Data;
@Data public class PageDTO {
private Integer pageNum;
private Integer pageSize;
private String keywords;
private String id; }
|
PO
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| package com.ruben.pojo.po;
import com.baomidou.mybatisplus.annotation.TableName; import lombok.*;
import java.io.Serializable;
@Data @Builder @ToString @NoArgsConstructor @AllArgsConstructor @TableName("user") public class UserPO implements Serializable { private static final long serialVersionUID = -1891465370283313432L; private Integer id; private String username; private String password;
}
|
Controller
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| @RestController @RequestMapping("user") @DependsOn("SpringContextHolder") public class UserController {
@Resource private UserService userService;
@PostMapping("userList") public AjaxJson userList(@RequestBody PageDTO pageDTO) { IPage<UserPO> page = userService.findList(pageDTO); page.setRecords(page.getRecords().stream().peek(userPO -> userPO.setPassword(null)).collect(Collectors.toList())); return AjaxJson.success("查询成功!").put("data", page); } }
|
Service
1 2 3 4 5 6 7 8 9 10 11 12 13
| @Slf4j @Service public class UserServiceImpl implements UserService { @Resource private MpUserMapper mpUserMapper;
@Override public IPage<UserPO> findList(PageDTO pageDTO) { return mpUserMapper.selectPage(new Page<>(pageDTO.getPageNum(), pageDTO.getPageSize()), Wrappers.lambdaQuery()); } }
|
然后就可以开始编写前端代码了,这里使用的是layui
,非常方便好用,这里就只写一个简单的Demo
啦
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> </head> <body onload="refreshList()"> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md12"> <button class="layui-btn layui-btn-normal layui-btn-fluid" onclick="refreshList()">刷新</button> </div> </div> <div class="layui-row"> <div class="layui-col-md12"> <table id="demo" lay-filter="test"></table> </div> </div> </div> <script type="application/javascript" src="js/index.js"></script> <script src="layui/layui.all.js"></script> <script> function refreshList() { let table = layui.table; table.render({ elem: '#demo', method: 'post', url: '/user/userList', contentType: 'application/json', page: true, parseData: function (res) { return { "code": res.code, "msg": res.msg, "count": res.data.total, "data": res.data.records }; }, request: { pageName: 'pageNum' , limitName: 'pageSize' }, response: { "statusCode": 200 }, cols: [[ {field: 'id', title: 'ID', fixed: 'left'} , {field: 'username', title: '用户名'} ]] }); } </script> </body> </html>
|