Songbirds


春

ElementUI+Vue+PageHelp实现分页展示

  • ~10.90K 字
  1. 1. 一、前端
    1. 1.1. 1.查询所有
    2. 1.2. 2. 用户查询
    3. 1.3. 3.实现
  2. 2. 二、后端
    1. 2.1. 0.结果封装类
    2. 2.2. 1. controller层
    3. 2.3. 2. serviceImpl实现类层：(service层略)
    4. 2.4. 3.dao对应的xml(dao层略)
    5. 2.5. 三、结果展示

表格的分页展示不仅能让页面更清晰，还能够减轻数据库的负担。

一、前端

前端主要实现两个功能(表格与分页使用elementUI)：

  1. 用户进入时，查询所有
  2. 用户手动查询，查询出结果，并将用户跳转到第一页的结果

1.查询所有

  1. 用户进入该页面就查询所有：则该方法必须在页面的 created() 函数中调用，同时查询语句queryString默认为null、当前页默认为1，使用findPage()方法
  2. 请求的数据全部封装在 pagination 中。
  3. 返回的所有查到的结果使用 dataList 数组接收，datalist 绑定了表格中的数据
  4. 用户切换当前页：调用 handleCurrentChange(currentPage) 方法 (注：currentPage：elementUI获取用户选择页码)，赋值当前页后，再次分页查询findPage()

2. 用户查询

  1. 用户输入绑定 queryString，则这次查询带条件，
  2. 用户查询后必须将用户定位到第一页(无论他现在在第几页)， 调用handleCurrentChange(1)，即可

3.实现

  • 重点看几处注释处和vue的js部分即可，
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>分页查询</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">
    <div class="filter-container">
        <!--v-model绑定用户输入的查询条件 pagination.queryString-->
        <el-input placeholder="项目编码/项目名称" v-model="pagination.queryString" style="width: 200px;"
                  class="filter-item"></el-input>
        <!--用户自己查询，查询后定位到第一页 handleCurrentChange(1)-->
        <el-button @click="handleCurrentChange(1)" class="dalfBut">查询</el-button>
    </div>
    <div class="box">
        <!-- :data="dataList 绑定表格中的数据-->
        <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
            <el-table-column type="index" align="center" label="序号"></el-table-column>
            <el-table-column prop="code" label="项目编码" align="center"></el-table-column>
            <el-table-column prop="name" label="项目名称" align="center"></el-table-column>
            <el-table-column label="适用性别" align="center">
                <template slot-scope="scope">
                    <!--将0、1、2转换为对应的性别-->
                    <span>{{ scope.row.sex == '0' ? '不限' : scope.row.sex == '1' ? '男' : '女'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="age" label="适用年龄" align="center"></el-table-column>
            <el-table-column prop="remark" label="项目说明" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <!--获取原有数据-->
                <template slot-scope="scope">
                    <!--scope.row相当于当前行的数据对象，可以获取id(row.id)查询数据，然后回显 -->
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页参数-->
        <div class="pagination-container">
            <el-pagination
                    class="pagiantion"                          <!--这里注释会出现问题，使用请删除-->
                    @current-change="handleCurrentChange"       <!--当前页绑定的函数，切换当前页时调用-->
                    :current-page="pagination.currentPage"      <!--当前页-->
                    :page-size="pagination.pageSize"            <!--每页大小-->
                    layout="total, prev, pager, next, jumper"
                    :total="pagination.total">                  <!--数据总条数-->
            </el-pagination>
        </div>
    </div>
</div>

</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 10,//每页显示的记录数
                total: 0,//总记录数
                queryString: null//查询条件,默认为空，在用户进入页面时，默认查询全部，当用户在输入框查询，才赋值(v-model绑定)
            },
            dataList: [],//当前页要展示的分页列表数据
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            // 查询所有抽取成findPage便于复用
            this.findPage();
        },
        methods: {
            //分页查询
            findPage() {
                // 查询所有检查项,post请求参数在逗号后面单独写，get请求的参数：url.do？参数变量名+参数值
                axios.post('/checkitem/findPage.do', this.pagination).then(res => {
                    if (res.data.flag) {
                        // 绑定数据, res返回的结果包含total:数据库总共多少条，rows：分页查询到的结果
                        // res.data是得到的后端的封装的数据，res.data.data是后端封装的数据中查询的分页的结果，
                        // res.data.data.rows是后端封装的数据中查询的分页的结果中rows的值，具体查看com.songbirds.health.entity.Result实体类
                        this.dataList = res.data.data.rows;
                        // 总记录数
                        this.pagination.total = res.data.data.total;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
            },
            //切换页码
            handleCurrentChange(currentPage) {
                // 将当前的页码赋值给分页的当前页
                this.pagination.currentPage = currentPage;
                // 赋值后查询
                this.findPage();
                // 查询后应该将当前页码改为1(避免后面页没数据显示，但是是有数据的)，在html中调用该方法时要赋值currentPage=1
                // 上面注释这个用在用户查询，用户查询直接调用handleCurrentChange(1)，用户查询后，将用户跳到第一页
            },
        }
    })
</script>
</html>

二、后端

0.结果封装类

  1. 前端分页请求查询数据的封装：QueryPageBean
1
2
3
4
5
6
7
8
9
10
public class QueryPageBean implements Serializable{
    private Integer currentPage;//页码
    private Integer pageSize;//每页记录数(大小)
    private String queryString;//查询条件

    public Integer getCurrentPage() {
        return currentPage;
    }
	// todo get与set方法
}
  1. 后端查询到的分页结果的封装：PageResult<>
1
2
3
4
5
6
7
8
9
10
11
public class PageResult<T> implements Serializable{
    private Long total;//总记录数
    private List<T> rows;//当前页结果

    public PageResult(Long total, List<T> rows) {
        super();
        this.total = total;
        this.rows = rows;
    }
	// todo get与set方法
}
  1. 返回的结果封装：Result
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class Result implements Serializable{
    private boolean flag;//执行结果，true为执行成功 false为执行失败
    private String message;//返回结果信息
    private Object data;//返回数据
    
    public Result(boolean flag, String message) { // 保存、修改保存，(不需要返回数据结果)
        super();
        this.flag = flag;
        this.message = message;
    }

    public Result(boolean flag, String message, Object data) {// 查询回显(需要返回数据结果)
        this.flag = flag;
        this.message = message;
        this.data = data;
    }

    public boolean isFlag() {
        return flag;
    }
	// todo get与set方法
}

1. controller层

  1. 由于发的是post请求，所以，请求的数据需要从请求体中获取。实现如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@RestController
@RequestMapping("/checkitem")
public class CheckItemController {
    /**
    * @Description: 分页查询
    * @Param: [queryPageBean] ：后端用来接受前端的查询的所有请求数据
    * @return: com.songbirds.health.entity.Result ：返回的封装的结果数据
    * @Author: songbirds
    * @Date: 2021/1/7-21:19
    */
    @PostMapping("/findPage")
    public Result findPage(@RequestBody QueryPageBean queryPageBean){  // @RequestBody 指定从请求体获取
        // PageResult：用于封装数据库分页查询的结果
        PageResult<CheckItem> pageResult = checkItemService.findPage(queryPageBean);
        return new Result(true, "查询成功", pageResult);
    }
}

2. serviceImpl实现类层：(service层略)

  1. 需要判断是否有查询条件，如果有使用模糊查询。如果没有，查询全部
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
@Service(interfaceClass = CheckItemService.class)
public class CheckItemServiceImpl implements CheckItemService {
    /**
    * @Description: 分页查询
    * @Param: [queryPageBean]
    * @return: PageResult<CheckItem> : 分页查询封装的结果
    * @Author: songbirds
    * @Date: 2021/1/7-18:20
    */
    @Override
    public PageResult<CheckItem> findPage(QueryPageBean queryPageBean) {
        // 前端传来的pageSize不能无限大，根据前端传参进行分页
        // 此处可限制：queryPageBean.getPageSize() > 50?50:queryPageBean.getPageSize();直接替换下面的第二个参数即可
        // 参数：arg0：当前页， arg1：每页大小
        PageHelper.startPage(queryPageBean.getCurrentPage(), queryPageBean.getPageSize());

        // 查询条件不为空
        if(StringUtils.isNotEmpty(queryPageBean.getQueryString())){
            // 使用模糊查询
            queryPageBean.setQueryString("%" + queryPageBean.getQueryString() + "%");
        }
	    // 使用查询条件查询
        // Page：com.github.pagehelper.Page，继承Arraylist,所以可以封装集合
        // 由于使用了PageHelper，他会自动拦截查询分页所需的结果(总条数，每页大小(在上面start
        Page方法中已经设置了))
        Page<CheckItem> page = checkItemDao.findByCondition(queryPageBean.getQueryString());
        // 获取com.github.pagehelper.Page中的total(总数)与Result(结果)
        PageResult<CheckItem> pageResult = new PageResult<>(page.getTotal(),page.getResult());
        return pageResult;
    }
}

3.dao对应的xml(dao层略)

1
2
3
4
5
6
7
8
9
10
11
12
   <!-- 由于使用了PageHelper，他会自动拦截查询分页所需的结果，这里只专注核心，查询用户需要的结果即可 -->
<select id="findByCondition" parameterType="string" resultType="checkItem">
       select * from t_checkitem
       <where>
           <!-- 动态条件判断时，参数为基础数据类型用value -->
           <!-- 判断查询条件QueryString是否为空 -->
           <if test="value != null and value.length>0">
               <!-- 用户查询code编码或者名称皆可 -->
               code like #{queryString} or name like #{queryString}
           </if>
       </where>
   </select>

三、结果展示

  1. 进入页面查询全部

  1. 用户手动查询

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
, ,