tips:

前端表格设计(bootstrap+vue+axios)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>

    <!--导入bootstrap-->
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!--导入vue-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>

</head>
<body>

    <div id="app" class="container">
        <table class="table table-striped"> <!--bootstrap条纹效果-->
            <caption>用户列表</caption>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>创建日期</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="u in users">
                    <td>{{u.id}}</td>
                    <td>{{u.userName}}</td>
                    <td>{{u.createDate}}</td>
                </tr>
            </tbody>
        </table>
        <!--分页器(bootstrap的一款导航)-->
        <ul class="pagination" v-for="p in pageNum">
            <li v-if="p == pageIndex" class="active"><a href="#" @click="doGo(p)">{{p}}</a></li>
            <li v-else="p == pageIndex"><a href="#" @click="doGo(p)">{{p}}</a> </li>
        </ul>

    </div>


    <script>
        new Vue({
            el:'#app',
            data:{
                users:null,
                // 分页
                pageIndex:1,
                pageSize:10,
                pageTotle:0,    // 总条数
                pageNum:0   // 页码
            },
            methods:{
                // 发送请求 获取用户列表
                requestUserList(url){
                    // 通过axios发送请求
                    axios.get(url).then(response =>{
                        console.log(response.data)
                        this.users = response.data.data;    // 特殊 接收后台的Paper对象参数
                        this.pageTotle = response.data.pageTotle;
                        this.pageNum = Math.ceil(this.pageTotle/this.pageSize)
                    });
                },
                doGo(p){
                    this.pageIndex = p;
                    var url = 'http://127.0.0.1:8080/user/list?pageIndex='+p+'&pageSize='+this.pageSize;
                    this.requestUserList(url); // 调用请求用户列表的函数
                }
            },
            created:function (){    // 页面加载完成后执行
                var url = 'http://127.0.0.1:8080/user/list?pageIndex='+this.pageIndex+'&pageSize='+this.pageSize;
                this.requestUserList(url); // 调用请求用户列表的函数
            }
        });
    </script>
</body>
</html>

效果

后端统计数据个数并传参(用于表格分页)

在实体entity包下新建Pager类

package demo.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Pager {
    private Object data;    // 用于响应的数据
    private int pageTotle;  // 总条数
}

MyBaties四层架构(前端 /数据计数)(接上一篇)

tips:

前端表格设计(bootstrap+vue+axios)

效果

后端统计数据个数并传参(用于表格分页)

在实体entity包下新建Pager类

添加方法用于统计人数信息