第十一章 分页及BaseController

今天我们来讲分页，分页前端有控件，后端使用pagehelper。

从后端开始。先在entity里创建base文件夹，并在里面创建PageVo的类，里面包含pageSize, pageNum, sortField, sortOrder四个属性，并添加默认值。用来处理分页

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 }

PageVo

然后我们打开UserController里的，queryUser，添加接受参数PageVo， service中的接口及实现进行改造添加pageVo参数。

Pom中添加对pagehelp的引用

com.github.pagehelper

pagehelper-spring-boot-starter

1.2.10

引用后，对PageVo进行修改，添加实现接口IPage，默认前台不传排序我们按id desc进行排序

public class PageVo implements IPage {

在entity/base中创建PageResult对象，用来service层返回带翻页信息的类，不直接使用PageInfo作为返回值是因为，里面有我们用不到的属性，减少无用数据的传递，还有就是可以以后我们需要扩展时方便我们扩展。直接使用PageInfo的话我们就没办法直接控制了。

1 public class PageResult {

2 private List list;

3 private Integer pageNum;

4 private Integer pageSize;

5 private Long total;

6 private Integer pages;

7

8 public PageResult(PageInfo 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如下。

1 @Override

2 public PageResult query(QueryUser vo, PageVo pageVo) {

3 PageHelper.startPage(pageVo);

4 List users = userMapper.select(vo);

5 PageInfo pageInfo = new PageInfo(users);

6 return new PageResult<>(pageInfo);

7 }

然后，我们对返回的结果进行改造，初期还是使用map来做，不过创建一个BaseController用来处理所有的通用内容，以后获取登陆信息也在这里处理。

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 getResultMessage(PageResult result) {

8 return getResultMessage(true, result.getList(), result.getPageInfo(), CODE_SUCCESS, "");

9 }

10

11 public Map getResultMessage(Object data) {

12 return getResultMessage(true, data, CODE_SUCCESS, "");

13 }

14

15

16 public Map getResultMessage(Boolean success, Object data, String code, String message) {

17 Map 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 getResultMessage(Boolean success, Object data, Object pageInfo, String code, String message) {

26 Map 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 }

View Code

中间还对PageResult进行改造，可以将分页信息单独获取出来

1 public Map getPageInfo() {

2 Map 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": ""

}

json结果

我们再添加一条记录，id为2的，再刷新界面我们看到了user排到admin前面了，看控制台的输出也能看到分页和排序了。

查看一下控制台，也能看到查询的sql上带有分页和排序信息了

接下来我们在前台加分页了。

打开user.vue，在table下面添加分页控件的引用

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">

在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

31

32

101

102

user.vue