# 分页实现
# 分页概述
分页在项目开发中是必不可少的功能，后台数据管理中会对系统数据进行分页查询并显示，分页的功能无处不在，主要目的是实现数据的快速查询以及更好的对数据进行维护操作，框架使用 MyBatisPlus 因为需要进行分页配置，因此项目新建分页配置文件 MybatisPlusConfig,具体配置文件如下：
// +----------------------------------------------------------------------
// | JavaWeb_Cloud_Pro微服务旗舰版框架 [ JavaWeb ]
// +----------------------------------------------------------------------
// | 版权所有 2019~2020 南京JavaWeb研发中心
// +----------------------------------------------------------------------
// | 官方网站: http://www.javaweb.vip/
// +----------------------------------------------------------------------
// | 作者: 鲲鹏 <1175401194@qq.com>
// +----------------------------------------------------------------------
package com.javaweb.service.system.config;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.transaction.annotation.EnableTransactionManagement;
/**
* 分页插件配置类
*/
@EnableTransactionManagement(proxyTargetClass = true)
@Configuration
public class MybatisPlusConfig {
/**
* 分页插件
*
* @return
*/
@Bean
public PaginationInterceptor paginationInterceptor() {
return new PaginationInterceptor();
}
}
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
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
# 前端调用
此项目为基于Vue+ElementUI的前后端分离项目，分页的参数由前端传入，其中涉及两个参数分别为 页码：page 和 每页数：limit 有请求参数统一传入后端，后端接收参数后参数分页数据的查询，由于前端做了数据表格的组件封装 ElDataTable 请求参数URL有外部传入组件，分页参数在组件内部进行处理，具体调用示例如下：
- 数据表格组件
<!-- 数据表格 -->
<ele-data-table ref="table" :config="table" :choose.sync="choose" height="calc(100vh - 315px)" highlight-current-row>
<template slot-scope="{index}">
<el-table-column type="selection" width="45" align="center" fixed="left"/>
<el-table-column type="index" :index="index" label="编号" width="60" align="center" fixed="left" show-overflow-tooltip/>
<el-table-column prop="name" label="职级名称" sortable="custom" show-overflow-tooltip min-width="250"/>
<el-table-column prop="status" label="职级状态" sortable="custom" :resizable="false" min-width="120">
<template slot-scope="{row}">
<el-switch v-model="row.status" @change="editStatus(row)" :active-value="1" :inactive-value="2"/>
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" sortable="custom" show-overflow-tooltip/>
<el-table-column label="创建时间" sortable="custom" show-overflow-tooltip min-width="160">
<template slot-scope="{row}">{{ row.createTime | toDateString }}</template>
</el-table-column>
<el-table-column label="更新时间" sortable="custom" show-overflow-tooltip min-width="160">
<template slot-scope="{row}">{{ row.updateTime | toDateString }}</template>
</el-table-column>
<el-table-column label="操作" width="130px" align="center" :resizable="false" fixed="right">
<template slot-scope="{row}">
<el-link @click="edit(row)" icon="el-icon-edit" type="primary" :underline="false">修改</el-link>
<el-popconfirm title="确定要删除此职级吗？" @confirm="remove(row)" class="ele-action">
<el-link slot="reference" icon="el-icon-delete" type="danger" :underline="false">删除</el-link>
</el-popconfirm>
</template>
</el-table-column>
</template>
</ele-data-table>
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
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
- URL请求传入
export default {
name: "SysLevel",
data() {
return {
table: {url: '/level/index', where: {}}, // 表格配置
choose: [], // 表格选中数据
}
},
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
特别说明
分页参数 page 和 limit 由数据分页组件内部处理，因为外部只需要传入获取数据方法地址即可，前端请求时会自动带上分页参数传递给后端方法
# 后端实现
如上所述，前端获取分页数据请求及分页参数传给后端后，统一后后端方法进行统一处理及实现分页查询，后端封装了查询条件基类 BaseQuery 文件中包括分页参数 page 和 limit,每个业务模块查询条件只需继承查询基类即可拥有分页查询参数条件，BaseQuery 基类查询条件内容如下：
// +----------------------------------------------------------------------
// | JavaWeb_Cloud_Pro微服务旗舰版框架 [ JavaWeb ]
// +----------------------------------------------------------------------
// | 版权所有 2019~2020 南京JavaWeb研发中心
// +----------------------------------------------------------------------
// | 官方网站: http://www.javaweb.vip/
// +----------------------------------------------------------------------
// | 作者: 鲲鹏 <1175401194@qq.com>
// +----------------------------------------------------------------------
package com.javaweb.common.framework.common;
import lombok.Data;
/**
* 查询对象基类
*/
@Data
public class BaseQuery {
/**
* 页码(默认1)
*/
private Integer page = 1;
/**
* 每页数(默认：20)
*/
private Integer limit = 20;
}
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
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
以职级管理举例说明实现原理，职级管理模块查询条件文件为LevelQuery 此类是继承了基类查询 BaseQuery, 具体内容如下：
// +----------------------------------------------------------------------
// | JavaWeb_Cloud_Pro微服务旗舰版框架 [ JavaWeb ]
// +----------------------------------------------------------------------
// | 版权所有 2019~2020 南京JavaWeb研发中心
// +----------------------------------------------------------------------
// | 官方网站: http://www.javaweb.vip/
// +----------------------------------------------------------------------
// | 作者: 鲲鹏 <1175401194@qq.com>
// +----------------------------------------------------------------------
package com.javaweb.service.system.query;
import com.javaweb.common.framework.common.BaseQuery;
import lombok.Data;
/**
* 职级查询条件
*/
@Data
public class LevelQuery extends BaseQuery {
/**
* 职级名称
*/
private String name;
}
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
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
那么前端请求传入后端后我们只需要传入直接查询条件类LevelQuery 即可，在职级查询条件类中可以取到分页的参数信息并参与分页查询，具体如下：
- 控制器方法
// +----------------------------------------------------------------------
// | JavaWeb_Cloud_Pro微服务旗舰版框架 [ JavaWeb ]
// +----------------------------------------------------------------------
// | 版权所有 2019~2020 南京JavaWeb研发中心
// +----------------------------------------------------------------------
// | 官方网站: http://www.javaweb.vip/
// +----------------------------------------------------------------------
// | 作者: 鲲鹏 <1175401194@qq.com>
// +----------------------------------------------------------------------
package com.javaweb.service.system.controller;
import com.javaweb.common.framework.common.BaseController;
import com.javaweb.common.framework.utils.JsonResult;
import com.javaweb.service.system.entity.Level;
import com.javaweb.service.system.query.LevelQuery;
import com.javaweb.service.system.service.ILevelService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
/**
* <p>
* 职级表 前端控制器
* </p>
*
* @author 鲲鹏
* @since 2020-11-02
*/
@RestController
@RequestMapping("/level")
public class LevelController extends BaseController {
@Autowired
private ILevelService levelService;
/**
* 获取职级列表
*
* @param levelQuery 查询条件
* @return
*/
@GetMapping("/index")
public JsonResult index(LevelQuery levelQuery) {
return levelService.getList(levelQuery);
}
}
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
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
- 接口实现
// +----------------------------------------------------------------------
// | JavaWeb_Cloud_Pro微服务旗舰版框架 [ JavaWeb ]
// +----------------------------------------------------------------------
// | 版权所有 2019~2020 南京JavaWeb研发中心
// +----------------------------------------------------------------------
// | 官方网站: http://www.javaweb.vip/
// +----------------------------------------------------------------------
// | 作者: 鲲鹏 <1175401194@qq.com>
// +----------------------------------------------------------------------
package com.javaweb.service.system.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.javaweb.common.framework.common.BaseQuery;
import com.javaweb.common.framework.utils.JsonResult;
import com.javaweb.common.framework.utils.StringUtils;
import com.javaweb.common.security.common.BaseServiceImpl;
import com.javaweb.service.system.entity.Level;
import com.javaweb.service.system.mapper.LevelMapper;
import com.javaweb.service.system.query.LevelQuery;
import com.javaweb.service.system.service.ILevelService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* <p>
* 职级表 服务实现类
* </p>
*
* @author 鲲鹏
* @since 2020-11-02
*/
@Service
public class LevelServiceImpl extends BaseServiceImpl<LevelMapper, Level> implements ILevelService {
@Autowired
private LevelMapper levelMapper;
/**
* 获取职级列表
*
* @param query 查询条件
* @return
*/
@Override
public JsonResult getList(BaseQuery query) {
LevelQuery levelQuery = (LevelQuery) query;
// 查询条件
QueryWrapper<Level> queryWrapper = new QueryWrapper<>();
// 职级名称
if (!StringUtils.isEmpty(levelQuery.getName())) {
queryWrapper.like("name", levelQuery.getName());
}
queryWrapper.eq("mark", 1);
queryWrapper.orderByAsc("sort");
// 查询分页数据
IPage<Level> page = new Page<>(levelQuery.getPage(), levelQuery.getLimit());
IPage<Level> pageData = levelMapper.selectPage(page, queryWrapper);
return JsonResult.success(pageData);
}
}
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
57
58
59
60
61
62
63
64
65
66
67
68
69
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
57
58
59
60
61
62
63
64
65
66
67
68
69
- 效果展示：
