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

布满荆棘的人生 2023-10-11 20:01 5阅读 0赞

**目录**

后端部分

mapper层

Usermapper.xml文件

Service层

接口

实现类

controller层

前端部分

源码

--------------------

## 后端部分 ##

### 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);
        }

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

![e1ad52d346cc4c9393bc04867a58fbf1.png][]

## 前端部分 ##

### 源码 ###

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

效果如图所示:

![b1bd1573803b44b79b888cfd4d15c9e0.png][]

[e1ad52d346cc4c9393bc04867a58fbf1.png]: https://img-blog.csdnimg.cn/e1ad52d346cc4c9393bc04867a58fbf1.png
[b1bd1573803b44b79b888cfd4d15c9e0.png]: https://img-blog.csdnimg.cn/b1bd1573803b44b79b888cfd4d15c9e0.png