智慧社区管理系统02(用户列表的显示和分页功能)

朵朵宝

已于 2022-11-28 15:31:26 修改

阅读量170

点赞数

分类专栏：智慧社区管理系统文章标签： java mybatis 数据库

于 2022-11-28 15:13:10 首次发布

本文链接：https://blog.csdn.net/magic_818/article/details/128079057

版权

智慧社区管理系统专栏收录该内容

15 篇文章 0 订阅

订阅专栏

后端部分

mapper层

List<User> selectAll(int start, int size);

    int  selectCount();

Usermapper.xml文件

 <select id="selectAll" resultMap="userResult">
        SELECT * FROM userinfo limit #{start},#{size}
    </select>
    <select id="selectCount" resultType="int">
    SELECT count(id) FROM userinfo
    </select>

Service层

接口

  /**
     * 查询用户列表,分页查询
     * @param pageIndex 页码
     * @param pageSize  每页的条数
     * @return
     */
    HttpResult getUsers(int pageIndex,int pageSize);

实现类

@Override
    public HttpResult getUsers(int pageIndex, int pageSize) {
        List<User> users = userMapper.selectAll((pageIndex - 1) * pageSize, pageSize);
        int count = userMapper.selectCount();
        HttpResult result = null;
        if (users != null && users.size() > 0) {
            result = new HttpResult(users, count, 200, null);
        } else {
            result = new HttpResult(null, 0, 500, "没有更多数据");
        }
        return result;
    }

controller层

@RequestMapping("/list")
    public HttpResult selectAll(int pageIndex, int pageSize) {
        return userService.getUsers(pageIndex, pageSize);
    }

之后通过浏览器访问地址,效果图如下:

前端部分

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.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>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="row">
        <div class="col-md-12" style="height: 50px; line-height: 50px;">
            <button class="btn btn-info">新增</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
                <caption>用户列表</caption>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="u in userList">
                    <td>{{u.id}}</td>
                    <td>{{u.username}}</td>
                    <td>
                        <button class="btn btn-link">修改</button>
                        <button class="btn btn-link">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <ul class="pagination" v-for="p in pageNum">
                <li v-if="p==pageIndex" class="active"><a @click="doGo(p)">{{p}}</a></li>
                <li v-else="p==pageIndex" ><a @click="doGo(p)">{{p}}</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            userList: null,//用户列表
            //用于分页
            pageIndex: 1,//当前页数
            pageSize: 10,//每页显示的条数
            pageTotle: 0,//总条数
            pageNum: 0,//页数(分页器)
        },
        methods: {
            //请求用户列表
            requestUserList(p) {
                //通过axios发送请求获取用户列表
                axios.get("http://localhost:8080/user/list?pageIndex=" + p + "&pageSize=" + this.pageSize).then(response => {
                    console.log(response.data);
                    this.userList = response.data.data;//给用户列表赋值
                    this.pageTotle = response.data.pageTotle;//给总条数赋值
                    //计算页数,通过Math.ceil函数,小数取整,向上取整
                    this.pageNum = Math.ceil(this.pageTotle / this.pageSize);
                });
            },
            //点击分页按钮
            doGo(p){
                this.pageIndex=p;
                this.requestUserList(p);//调用请求用户列表的函数
            },
          
        },
       

        created: function () {
            this.requestUserList(this.pageIndex);//调用请求用户列表的函数
        }
    });
</script>
</body>
</html>

效果如图所示: