Vue分頁(yè)查詢?cè)趺磳?shí)現(xiàn)

更新時(shí)間：2023年04月11日 09:10:41 作者：haohulala

這篇文章主要介紹了Vue分頁(yè)查詢?cè)趺磳?shí)現(xiàn)，使用vue實(shí)現(xiàn)分頁(yè)的邏輯并不復(fù)雜，接收后端傳輸過(guò)來(lái)的數(shù)據(jù)，然后根據(jù)數(shù)據(jù)的總數(shù)和每一頁(yè)的數(shù)據(jù)量就可以計(jì)算出一共可以分成幾頁(yè)

我編寫(xiě)了一個(gè)簡(jiǎn)單的前端頁(yè)面用來(lái)查詢數(shù)據(jù)，頁(yè)面一共有幾個(gè)邏輯

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

下面就來(lái)看一下具體的實(shí)現(xiàn)步驟。

首先看一下vue的代碼

<script type="text/javascript">
    Vue.createApp({
        data()  {
            return {
                items : [],
                // 關(guān)鍵詞
                keyword : "",
                // 是否沒(méi)有數(shù)據(jù)
                isnull : false,
                // 一開(kāi)始不顯示上一頁(yè)和下一頁(yè)
                isshow : false,
                // 一共有多少條數(shù)據(jù)
                countInfo : 0,
                // 每一頁(yè)顯示幾條數(shù)據(jù)
                pageSize : 10,
                // 當(dāng)前是第幾頁(yè)
                currentPage : 1,
                // 一共有幾頁(yè)
                countAll : 1,
                code : 200
            }
        },
        methods: {
            search() {
                // 拿到待搜索的關(guān)鍵詞
                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;
                        // 將原始數(shù)據(jù)置空
                        this.items = [];
                        // 不顯示上一頁(yè)下一頁(yè)按鈕
                        this.isshow = false;
                    } else {
                        this.isnull = false;
                        console.log(response)
                        this.items = response.data.msg.list;
                        this.countInfo = response.data.msg.count;
                        // 計(jì)算一共有幾頁(yè)
                        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;
                    // 計(jì)算一共有幾頁(yè)
                    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;
                    // 計(jì)算一共有幾頁(yè)
                    this.countAll = Math.ceil(response.data.msg.count / this.pageSize); 
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        },
    }).mount("#app");
</script>

data()中返回了幾個(gè)變量，

items：用來(lái)存放待展示的數(shù)據(jù)項(xiàng)
keyword：記錄本次查詢使用的關(guān)鍵詞
isnull：表示一次查詢的結(jié)果數(shù)量是否為0，用來(lái)控制沒(méi)有結(jié)果的顯示邏輯
isshow：表示是否顯示上一頁(yè)下一頁(yè)按鈕，以及顯示當(dāng)前頁(yè)數(shù)和數(shù)據(jù)總數(shù)
countInfo：記錄一共有多少條結(jié)果
pageSize：記錄每頁(yè)顯示的數(shù)據(jù)項(xiàng)，目前后端固定每頁(yè)展示10條數(shù)據(jù)
currentPage：記錄當(dāng)前是第幾頁(yè)
countAll：記錄一共有多少頁(yè)數(shù)據(jù)
code：后端返回的一個(gè)狀態(tài)碼，沒(méi)什么用

一共提供了三個(gè)方法進(jìn)行查詢

search()：進(jìn)行一個(gè)新的關(guān)鍵詞的查詢
getNextPage()：查詢下一頁(yè)的數(shù)據(jù)，如果已經(jīng)是最后一頁(yè)了，則查詢當(dāng)前頁(yè)的結(jié)果
getPrePage()：查詢上一頁(yè)的數(shù)據(jù)，如果已經(jīng)是第一頁(yè)了，則查詢當(dāng)前頁(yè)的結(jié)果

接著我們?cè)賮?lái)看一下后端返回的數(shù)據(jù)格式

上圖中方框內(nèi)的數(shù)據(jù)就是后端返回的數(shù)據(jù)，msg中記錄的就是我們需要用到的數(shù)據(jù)，里面有交給數(shù)據(jù)項(xiàng)

count：表示數(shù)據(jù)總數(shù)，只是查詢數(shù)據(jù)總數(shù)，并不會(huì)將所有的數(shù)據(jù)都返回給前端
list：返回當(dāng)前頁(yè)的數(shù)據(jù)
page：表示當(dāng)前是第幾頁(yè)

我們具體來(lái)看一下list中數(shù)據(jù)項(xiàng)的內(nèi)容

可以發(fā)現(xiàn)list中的每一項(xiàng)就是構(gòu)成我們前端頁(yè)面中一行的數(shù)據(jù)，這在vue中體現(xiàn)為數(shù)據(jù)的綁定，下面就來(lái)看看詳細(xì)的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"  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">
    <!-- 先編寫(xiě)一個(gè)搜索欄 -->
    <div class="row" id="app">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <!-- 這里面有兩個(gè)個(gè)部分 -->
            <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="請(qǐng)輸入要搜索的關(guān)鍵詞">
                            </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>
                    <!-- 這一行顯示標(biāo)簽 -->
                    <div style="color: #000000">文章標(biāo)簽：<span style="color: #000000; margin-left: 10px">{{item.tag}}</span></div>
                    <!-- 下面一行顯示發(fā)表時(shí)間，閱讀數(shù)和收藏?cái)?shù) -->
                    <div>
                        <div style="color: #000000">發(fā)表時(shí)間：<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>
            <!-- 當(dāng)沒(méi)有查詢結(jié)果的時(shí)候顯示 -->
            <div v-if="isnull">
                <span>非常抱歉，沒(méi)有您想要的結(jié)果(。?＿?。)?I'm sorry~</span>
            </div>
            <!-- 當(dāng)有數(shù)據(jù)的時(shí)候顯示 -->
            <div v-if="isshow">
                <div style="float:left; margin-right: 20px;" >
                    <button type="button" class="btn btn-primary" v-on:click="getPrePage">上一頁(yè)</button>
                </div>
                <div style="float:left; margin-right: 20px;" >
                    <button type="button" class="btn btn-primary" v-on:click="getNextPage" >下一頁(yè)</button>
                </div>
                <div style="float:left; margin-right: 20px; margin-top: 5px;">
                    <span>第{{currentPage}}/{{countAll}}頁(yè)</spa>
                </div>
                <div style="float:left; margin-right: 20px; margin-top: 5px;">
                    <span>共有{{countInfo}}條數(shù)據(jù)</spa>
                </div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
</div>
</body>
<script type="text/javascript">
    Vue.createApp({
        data()  {
            return {
                items : [],
                // 關(guān)鍵詞
                keyword : "",
                // 是否沒(méi)有數(shù)據(jù)
                isnull : false,
                // 一開(kāi)始不顯示上一頁(yè)和下一頁(yè)
                isshow : false,
                // 一共有多少條數(shù)據(jù)
                countInfo : 0,
                // 每一頁(yè)顯示幾條數(shù)據(jù)
                pageSize : 10,
                // 當(dāng)前是第幾頁(yè)
                currentPage : 1,
                // 一共有幾頁(yè)
                countAll : 1,
                code : 200
            }
        },
        methods: {
            search() {
                // 拿到待搜索的關(guān)鍵詞
                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;
                        // 將原始數(shù)據(jù)置空
                        this.items = [];
                        // 不顯示上一頁(yè)下一頁(yè)按鈕
                        this.isshow = false;
                    } else {
                        this.isnull = false;
                        console.log(response)
                        this.items = response.data.msg.list;
                        this.countInfo = response.data.msg.count;
                        // 計(jì)算一共有幾頁(yè)
                        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;
                    // 計(jì)算一共有幾頁(yè)
                    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;
                    // 計(jì)算一共有幾頁(yè)
                    this.countAll = Math.ceil(response.data.msg.count / this.pageSize); 
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        },
    }).mount("#app");
</script>
</html>

使用vue編寫(xiě)前端動(dòng)態(tài)頁(yè)面真的比原生js或者jquery要方便很多，對(duì)比theamleaf也有很多好處。

我們?cè)谑褂胻heamleaf的時(shí)候，每次提交表單都需要刷新頁(yè)面，使用vue+axios進(jìn)行ajax請(qǐng)求則不需要刷新頁(yè)面，這不僅會(huì)減輕服務(wù)端的壓力，而且可以帶來(lái)更好的用戶體驗(yàn)。

到此這篇關(guān)于Vue分頁(yè)查詢?cè)趺磳?shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue分頁(yè)查詢內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: