Vue分页查询怎么实现

更新时间：2023年04月11日 09:10:41 作者：haohulala

这篇文章主要介绍了Vue分页查询怎么实现，使用vue实现分页的逻辑并不复杂，接收后端传输过来的数据，然后根据数据的总数和每一页的数据量就可以计算出一共可以分成几页

我编写了一个简单的前端页面用来查询数据，页面一共有几个逻辑

具体的效果可以看下面的演示

下面就来看一下具体的实现步骤。

首先看一下vue的代码

<script type="text/javascript">
    Vue.createApp({
        data()  {
            return {
                items : [],
                // 关键词
                keyword : "",
                // 是否没有数据
                isnull : false,
                // 一开始不显示上一页和下一页
                isshow : false,
                // 一共有多少条数据
                countInfo : 0,
                // 每一页显示几条数据
                pageSize : 10,
                // 当前是第几页
                currentPage : 1,
                // 一共有几页
                countAll : 1,
                code : 200
            }
        },
        methods: {
            search() {
                // 拿到待搜索的关键词
                var keyword = document.getElementById("keyword").value;
                console.log(keyword);
                this.keyword = keyword;
                this.currentPage = 1;
                var url = "http://localhost:8080/csdn/search/" + keyword + "/" + this.currentPage;
                console.log(url);
                axios.get(url).then((response) => {
                    if(response.data.msg.count==0) {
                        this.isnull = true;
                        // 将原始数据置空
                        this.items = [];
                        // 不显示上一页下一页按钮
                        this.isshow = false;
                    } else {
                        this.isnull = false;
                        console.log(response)
                        this.items = response.data.msg.list;
                        this.countInfo = response.data.msg.count;
                        // 计算一共有几页
                        this.countAll = Math.ceil(response.data.msg.count / this.pageSize); 
                        this.isshow = true;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            getNextPage() {
                if(this.currentPage == this.countAll) {
                    this.currentPage = this.currentPage;
                } else {
                    this.currentPage = this.currentPage + 1;
                }
                var url = "http://localhost:8080/csdn/search/" + this.keyword + "/" + this.currentPage;
                axios.get(url).then((response) => {
                    console.log(response)
                    this.items = response.data.msg.list;
                    // 计算一共有几页
                    this.countAll = Math.ceil(response.data.msg.count / this.pageSize); 
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            getPrePage() {
                if(this.currentPage == 1) {
                    this.currentPage = 1;
                } else {
                    this.currentPage = this.currentPage - 1;
                }
                var url = "http://localhost:8080/csdn/search/" + this.keyword + "/" + this.currentPage;
                axios.get(url).then((response) => {
                    console.log(response)
                    this.items = response.data.msg.list;
                    // 计算一共有几页
                    this.countAll = Math.ceil(response.data.msg.count / this.pageSize); 
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        },
    }).mount("#app");
</script>

data()中返回了几个变量，

items：用来存放待展示的数据项
keyword：记录本次查询使用的关键词
isnull：表示一次查询的结果数量是否为0，用来控制没有结果的显示逻辑
isshow：表示是否显示上一页下一页按钮，以及显示当前页数和数据总数
countInfo：记录一共有多少条结果
pageSize：记录每页显示的数据项，目前后端固定每页展示10条数据
currentPage：记录当前是第几页
countAll：记录一共有多少页数据
code：后端返回的一个状态码，没什么用

一共提供了三个方法进行查询

search()：进行一个新的关键词的查询
getNextPage()：查询下一页的数据，如果已经是最后一页了，则查询当前页的结果
getPrePage()：查询上一页的数据，如果已经是第一页了，则查询当前页的结果

接着我们再来看一下后端返回的数据格式

上图中方框内的数据就是后端返回的数据，msg中记录的就是我们需要用到的数据，里面有交给数据项

count：表示数据总数，只是查询数据总数，并不会将所有的数据都返回给前端
list：返回当前页的数据
page：表示当前是第几页

我们具体来看一下list中数据项的内容

可以发现list中的每一项就是构成我们前端页面中一行的数据，这在vue中体现为数据的绑定，下面就来看看详细的html代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纳米搜索</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="external nofollow" >
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container">
    <!-- 先编写一个搜索栏 -->
    <div class="row" id="app">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <!-- 这里面有两个个部分 -->
            <div class="row">
                <!--<div class="col-md-2"></div>-->
                <div class="col-md-12">
                    <div style="float: left; margin-top: 20px;margin-left: 20%">
                        <h2 style="color:cornflowerblue">纳米搜索</h2>
                    </div>
                    <div style="float: left; margin-top: 20px; margin-left: 20px">
                        <div class="form-group" style="margin-right: 20px; float: left;" >
                            <div class="input-group" >
                                <input type="text" class="form-control" name="keyword"  id="keyword" placeholder="请输入要搜索的关键词">
                            </div>
                        </div>
                        <div style="float:left">
                            <button id="search" type="button" class="btn btn-primary" v-on:click="search">搜索</button>
                        </div>
                    </div>
                </div>
                <!--<div class="col-md-2"></div>-->
            </div>
            <hr>
            <div>
                <div v-for="item of items">
                    <!-- 第一行是url -->
                    <a :href="item.url" rel="external nofollow"  target="_blank">
                        <div style="color: #0000cc">{{item.title}}</div>
                    </a>
                    <div style="color: #28a745">{{item.url}}</div>
                    <!-- 这一行显示文章作者 -->
                    <div style="color: #000000">文章作者：<span style="color: #000000; margin-left: 10px">{{item.nick_name}}</span></div>
                    <!-- 这一行显示标签 -->
                    <div style="color: #000000">文章标签：<span style="color: #000000; margin-left: 10px">{{item.tag}}</span></div>
                    <!-- 下面一行显示发表时间，阅读数和收藏数 -->
                    <div>
                        <div style="color: #000000">发表时间：<span style="color: #000000;margin-left: 10px">{{item.up_time}}</span></div>
                        <div style="color: #000000;float: left">阅读量：<span style="color: #000000;margin-left: 10px">{{item.read_volum}}</span></div>
                        <div style="color: #000000;float: left; margin-left: 10px">收藏量：<span style="color: #000000;margin-left: 10px">{{item.collection_volum}}</span></div>
                    </div>
                    <br>
                    <hr>
                </div>
            </div>
            <!-- 当没有查询结果的时候显示 -->
            <div v-if="isnull">
                <span>非常抱歉，没有您想要的结果(。・＿・。)ﾉI'm sorry~</span>
            </div>
            <!-- 当有数据的时候显示 -->
            <div v-if="isshow">
                <div style="float:left; margin-right: 20px;" >
                    <button type="button" class="btn btn-primary" v-on:click="getPrePage">上一页</button>
                </div>
                <div style="float:left; margin-right: 20px;" >
                    <button type="button" class="btn btn-primary" v-on:click="getNextPage" >下一页</button>
                </div>
                <div style="float:left; margin-right: 20px; margin-top: 5px;">
                    <span>第{{currentPage}}/{{countAll}}页</spa>
                </div>
                <div style="float:left; margin-right: 20px; margin-top: 5px;">
                    <span>共有{{countInfo}}条数据</spa>
                </div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
</div>
</body>
<script type="text/javascript">
    Vue.createApp({
        data()  {
            return {
                items : [],
                // 关键词
                keyword : "",
                // 是否没有数据
                isnull : false,
                // 一开始不显示上一页和下一页
                isshow : false,
                // 一共有多少条数据
                countInfo : 0,
                // 每一页显示几条数据
                pageSize : 10,
                // 当前是第几页
                currentPage : 1,
                // 一共有几页
                countAll : 1,
                code : 200
            }
        },
        methods: {
            search() {
                // 拿到待搜索的关键词
                var keyword = document.getElementById("keyword").value;
                console.log(keyword);
                this.keyword = keyword;
                this.currentPage = 1;
                var url = "http://localhost:8080/csdn/search/" + keyword + "/" + this.currentPage;
                console.log(url);
                axios.get(url).then((response) => {
                    if(response.data.msg.count==0) {
                        this.isnull = true;
                        // 将原始数据置空
                        this.items = [];
                        // 不显示上一页下一页按钮
                        this.isshow = false;
                    } else {
                        this.isnull = false;
                        console.log(response)
                        this.items = response.data.msg.list;
                        this.countInfo = response.data.msg.count;
                        // 计算一共有几页
                        this.countAll = Math.ceil(response.data.msg.count / this.pageSize); 
                        this.isshow = true;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            getNextPage() {
                if(this.currentPage == this.countAll) {
                    this.currentPage = this.currentPage;
                } else {
                    this.currentPage = this.currentPage + 1;
                }
                var url = "http://localhost:8080/csdn/search/" + this.keyword + "/" + this.currentPage;
                axios.get(url).then((response) => {
                    console.log(response)
                    this.items = response.data.msg.list;
                    // 计算一共有几页
                    this.countAll = Math.ceil(response.data.msg.count / this.pageSize); 
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            getPrePage() {
                if(this.currentPage == 1) {
                    this.currentPage = 1;
                } else {
                    this.currentPage = this.currentPage - 1;
                }
                var url = "http://localhost:8080/csdn/search/" + this.keyword + "/" + this.currentPage;
                axios.get(url).then((response) => {
                    console.log(response)
                    this.items = response.data.msg.list;
                    // 计算一共有几页
                    this.countAll = Math.ceil(response.data.msg.count / this.pageSize); 
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        },
    }).mount("#app");
</script>
</html>

使用vue编写前端动态页面真的比原生js或者jquery要方便很多，对比theamleaf也有很多好处。

我们在使用theamleaf的时候，每次提交表单都需要刷新页面，使用vue+axios进行ajax请求则不需要刷新页面，这不仅会减轻服务端的压力，而且可以带来更好的用户体验。

到此这篇关于Vue分页查询怎么实现的文章就介绍到这了,更多相关Vue分页查询内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue使用pdfjs显示PDF可复制的实现方法
这篇文章主要介绍了vue使用pdfjs显示PDF可复制的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
Vue标尺插件使用详解
这篇文章主要为大家详细介绍了Vue标尺插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
Vue3时间轴组件问题记录(时间信息收集组件)
本文介绍了如何在Vue3项目中封装一个时间信息收集组件,采用双向绑定响应式数据,通过对Element-Plus的Slider组件二次封装,实现时间轴功能,解决了小数计算导致匹配问题和v-model绑定组件无效问题,感兴趣的朋友跟随小编一起看看吧
2024-09-09
Vue2.0 从零开始_环境搭建操作步骤
下面小编就为大家带来一篇Vue2.0 从零开始_环境搭建操作步骤。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue3超出文本展示el tooltip实现示例
这篇文章主要为大家介绍了vue3超出文本展示el tooltip实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
vue3 el-form-item如何自定义label标签内容
这篇文章主要介绍了vue3 el-form-item如何自定义label标签内容问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue不用window的方式如何刷新当前页面
这篇文章主要介绍了vue不用window的方式如何刷新当前页面,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
Vue3.0中的monorepo管理模式的实现
这篇文章主要介绍了Vue3.0中的monorepo管理模式的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
vue中node_modules中第三方模块的修改使用详解
这篇文章主要介绍了vue中node_modules中第三方模块的修改使用,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
vue项目使用cmd运行方式
在开发过程中,启动项目是必不可少的一步,本文介绍了两种启动项目的方法,第一种方法是通过命令提示符(cmd)进入项目目录,然后输入npm run serve来启动项目,第二种方法是直接在项目目录下打开命令提示符(cmd),输入npm run serve即可启动项目
2024-10-10

Vue分页查询怎么实现

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具