今天咱们来说分页，分页前端有控件，后端使用pagehelper。前端
从后端开始。先在entity里建立base文件夹，并在里面建立PageVo的类，里面包含pageSize, pageNum, sortField, sortOrder四个属性，并添加默认值。用来处理分页vue
1 public class PageVo { 2 private Integer pageSize = 10; 3 private Integer pageNum = 1; 4 private String sortField = "id"; 5 private String sortOrder = "desc"; 6 7 public Integer getPageSize() { 8 return pageSize; 9 } 10 11 public void setPageSize(Integer pageSize) { 12 this.pageSize = pageSize; 13 } 14 15 public Integer getPageNum() { 16 return pageNum; 17 } 18 19 public void setPageNum(Integer pageNum) { 20 this.pageNum = pageNum; 21 } 22 23 public String getSortField() { 24 return sortField; 25 } 26 27 public void setSortField(String sortField) { 28 this.sortField = sortField; 29 } 30 31 public String getSortOrder() { 32 return sortOrder; 33 } 34 35 public void setSortOrder(String sortOrder) { 36 this.sortOrder = sortOrder; 37 } 38 39 public String getOrderBy() { 40 if (StringUtil.isEmpty(sortField)) { 41 return "id desc"; 42 } 43 return sortField + " " + sortOrder; 44 } 45 }
而后咱们打开UserController里的，queryUser，添加接受参数PageVo， service中的接口及实现进行改造添加pageVo参数。ios
Pom中添加对pagehelp的引用git
<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.10</version> </dependency>
引用后，对PageVo进行修改，添加实现接口IPage，默认前台不传排序咱们按id desc进行排序github
public class PageVo implements IPage {
在entity/base中建立PageResult对象，用来service层返回带翻页信息的类，不直接使用PageInfo做为返回值是由于，里面有咱们用不到的属性，减小无用数据的传递，还有就是能够之后咱们须要扩展时方便咱们扩展。直接使用PageInfo的话咱们就没办法直接控制了。spring
1 public class PageResult<T> { 2 private List<T> list; 3 private Integer pageNum; 4 private Integer pageSize; 5 private Long total; 6 private Integer pages; 7 8 public PageResult(PageInfo<T> pageInfo) { 9 this.list = pageInfo.getList(); 10 this.pageNum = pageInfo.getPageNum(); 11 this.pageSize = pageInfo.getPageSize(); 12 this.total = pageInfo.getTotal(); 13 this.pages = pageInfo.getPages(); 14 } 15 //get,set略 16 }
在UserServiceImpl中，修改query以下。sql
1 @Override 2 public PageResult<User> query(QueryUser vo, PageVo pageVo) { 3 PageHelper.startPage(pageVo); 4 List<User> users = userMapper.select(vo); 5 PageInfo<User> pageInfo = new PageInfo<User>(users); 6 return new PageResult<>(pageInfo); 7 }
而后，咱们对返回的结果进行改造，初期仍是使用map来作，不过建立一个BaseController用来处理全部的通用内容，之后获取登录信息也在这里处理。 json
1 public class BaseController { 2 3 private static final String CODE_SUCCESS = "0"; 4 private static final String CODE_ERROR = "1001"; 5 private static final String CODE_AUTHER = "5001"; 6 7 public Map<String, Object> getResultMessage(PageResult result) { 8 return getResultMessage(true, result.getList(), result.getPageInfo(), CODE_SUCCESS, ""); 9 } 10 11 public Map<String, Object> getResultMessage(Object data) { 12 return getResultMessage(true, data, CODE_SUCCESS, ""); 13 } 14 15 16 public Map<String, Object> getResultMessage(Boolean success, Object data, String code, String message) { 17 Map<String, Object> map = new HashMap<>(); 18 map.put("success", success); 19 map.put("data", data); 20 map.put("message", message); 21 map.put("code", code); 22 return map; 23 } 24 25 public Map<String, Object> getResultMessage(Boolean success, Object data, Object pageInfo, String code, String message) { 26 Map<String, Object> map = new HashMap<>(); 27 map.put("success", success); 28 map.put("data", data); 29 map.put("page", pageInfo); 30 map.put("message", message); 31 map.put("code", code); 32 return map; 33 } 34 }
中间还对PageResult进行改造，能够将分页信息单独获取出来 axios
1 public Map<String, Object> getPageInfo() { 2 Map<String, Object> map = new HashMap<>(); 3 map.put("pageNum", pageNum); 4 map.put("pageSize", pageSize); 5 map.put("total", total); 6 map.put("pages", pages); 7 return map; 8 }
这是返回json的格式。到目前为止后端处理完成后端
{ "code": "0", "data": [{ "id": 1, "username": "admin", "password": "", "salt": "", "realname": "admin", "sex": "1", "mail": "a@a.a", "phone": "1234567", "avatar": "", "remarks": "", "status": "0", "createTime": "2018-12-16 20:00:00", "editTime": "2018-12-16 20:00:00", "editor": 1, "editorName": "admin", "lastLoginTime": null, "lastLoginIp": null }], "success": true, "page": { "total": 1, "pages": 1, "pageSize": 10, "pageNum": 1 }, "message": "" }
咱们再添加一条记录，id为2的，再刷新界面咱们看到了user排到admin前面了，看控制台的输出也能看到分页和排序了。
查看一下控制台，也能看到查询的sql上带有分页和排序信息了
接下来咱们在前台加分页了。
打开user.vue，在table下面添加分页控件的引用
<el-row style="text-align: right"> <el-pagination class="pagination" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="pagination.pageSizes" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"> </el-pagination> </el-row>
在data里，添加相关参数的引用。
data() { return { loading: true, tableData: [], pagination: { pageSizes: [1, 10, 20, 50], currentPage: 1, total: 0, pageSize: 10, }, } },
添加两个事件
//改变时 handleSizeChange(val) { this.pagination.pageSize = val; this.queryList(); }, //条目改变时 handleCurrentChange(val) { this.pagination.currentPage = val; this.queryList(); },
并在查询结果时，对参数进行赋值。咱们刚才在返回结果写了success及message，因此咱们调整一下返回结果的处理。
Vue.axios.post(queryUrl, para) .then(function (res) { let result = res.data; if (result.success) { _this.tableData = result.data; _this.pagination.total = result.page.total; } else { this.$message({ message: result.message, type: "error", }); } _this.loading = false; }) .catch(function (error) { this.$message({ message: error, type: "error", }) });
咱们再加上一个查询按钮，用来测试一下每次查询后显示到第一页的内容。
完活，不算样式的话。这个查询终于作完了。
下面是完整的user.vue代码
1 <template> 2 <div> 3 <el-row> 4 <el-button type="primary" size="small" id="search" @click="search">查询</el-button> 5 </el-row> 6 <el-table :data="tableData" v-loading="loading" stripe style="width: 100%"> 7 <el-table-column prop="username" label="用户名" width="180"/> 8 <el-table-column prop="realname" label="姓名名" width="180"/> 9 <el-table-column prop="sex" label="性别" width="100"/> 10 <el-table-column prop="mail" label="邮箱" width="180"/> 11 <el-table-column prop="phone" label="电话" width="180"/> 12 <el-table-column prop="remark" label="备注" width="180"/> 13 <el-table-column prop="status" label="状态" width="180"/> 14 <el-table-column prop="editorName" label="修改人" width="180"/> 15 <el-table-column prop="editTime" label="修改时间" width="180"/> 16 </el-table> 17 <el-row style="text-align: right"> 18 <el-pagination class="pagination" 19 background 20 @size-change="handleSizeChange" 21 @current-change="handleCurrentChange" 22 :current-page="pagination.currentPage" 23 :page-sizes="pagination.pageSizes" 24 :page-size="pagination.pageSize" 25 layout="total, sizes, prev, pager, next, jumper" 26 :total="pagination.total"> 27 </el-pagination> 28 </el-row> 29 </div> 30 </template> 31 32 <script> 33 import Vue from 'vue'; 34 35 export default { 36 name: "userManage", 37 data() { 38 return { 39 loading: true, 40 tableData: [], 41 pagination: { 42 pageSizes: [1, 10, 20, 50], 43 currentPage: 1, 44 total: 0, 45 pageSize: 10, 46 }, 47 } 48 }, 49 mounted: function () { 50 this.queryList(); 51 }, 52 methods: { 53 queryList: function () { 54 55 var _this = this; 56 var queryUrl = "/api/user/query"; 57 let para = { 58 pageNum: this.pagination.currentPage, 59 pageSize: this.pagination.pageSize, 60 }; 61 this.loading = true; 62 Vue.axios.post(queryUrl, para) 63 .then(function (res) { 64 let result = res.data; 65 if (result.success) { 66 _this.tableData = result.data; 67 _this.pagination.total = result.page.total; 68 } else { 69 this.$message({ 70 message: result.message, 71 type: "error", 72 }); 73 } 74 _this.loading = false; 75 }) 76 .catch(function (error) { 77 this.$message({ 78 message: error, 79 type: "error", 80 }) 81 }); 82 83 }, 84 //改变时 85 handleSizeChange(val) { 86 this.pagination.pageSize = val; 87 this.queryList(); 88 }, 89 //条目改变时 90 handleCurrentChange(val) { 91 this.pagination.currentPage = val; 92 this.queryList(); 93 }, 94 search() { 95 this.pagination.currentPage = 1; 96 this.queryList(); 97 } 98 } 99 } 100 </script> 101 102 <style scoped> 103 104 </style>