用分页插件实现分页查询

最新推荐文章于 2024-07-26 23:39:16 发布

牛马程序猿9527

最新推荐文章于 2024-07-26 23:39:16 发布

阅读量475

点赞数 1

本文链接：https://blog.csdn.net/m0_62121751/article/details/127117336

版权

分页插件

<!-- 分页 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.4.1</version>
        </dependency>

service层

/**
     * 分页
     * @return
     */
    PageInfo<User> queryUserList(int index);

serviceImpl层

 public PageInfo<User> queryUserList(int index) {
        PageHelper.startPage(index,3);
        return new PageInfo<User>(userMapper.queryUser());
    }

controller层

@RequestMapping("/pageUserList")
    @ResponseBody
    public JsonPojo pageUserList(int index){
        JsonPojo jsonPojo=new JsonPojo();
        jsonPojo.setStatu(200);
        jsonPojo.setMsg("成功");
        PageInfo<User> pageInfo=userService.queryUserList(index);
        jsonPojo.setData(pageInfo);
        return jsonPojo;
    }

前端

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script th:src="@{/jquery.js}"></script>
    <script th:src="@{/vue.js}"></script>
    <script th:src="@{/axios.js}"></script>
</head>
<body>
<div id="div1">
    <h1>分页</h1>
    <table border="solid" width="20%">
        <tr>
            <td>id</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr v-for="user in pageInfo.list">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.pwd}}</td>
        </tr>
    </table>
    {{pageInfo.pageNam}}  {{pageInfo.pages}} {{pageInfo.isLastPage}}
    <a href="#" @click="showPageUser(-1)">上一页</a>
    <a href="#" @click="showPageUser(1)">下一页</a>

    <br>
</div>
<script>
    var vm=new Vue({
        el: "#div1",
        data: {
            pageInfo: {},
            index: 1,
        },
        methods:{
            showPageUser(number) {
                this.index=this.index+number;
                if(this.index >= this.pageInfo.pages){
                    this.index = this.pageInfo.pages;
                }
                if(this.index<= 0){
                    this.index=1;
                }
                axios.get("/tan/a/pageUserList?index="+this.index)
                    .then(response => {
                        if (response.data.statu == 200) {
                            this.pageInfo = response.data.data;
                        }
                    }).catch(function (error) {
                    alert(error)
                });
            },
        mounted: function () {
            this.showPageUser(0);
        }
    })
</script>
</body>
</html>

工具类

package com.example.pojo;

public class JsonPojo<T> {

    private int  statu;
    private String  msg;
    private T data;


    public int getStatu() {
        return statu;
    }

    public void setStatu(int statu) {
        this.statu = statu;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }
}