Vue分頁查詢怎么實現(xiàn)
更新時間：2023年04月11日 09:10:41 作者：haohulala
這篇文章主要介紹了Vue分頁查詢怎么實現(xiàn)，使用vue實現(xiàn)分頁的邏輯并不復雜，接收后端傳輸過來的數(shù)據(jù)，然后根據(jù)數(shù)據(jù)的總數(shù)和每一頁的數(shù)據(jù)量就可以計算出一共可以分成幾頁
我編寫了一個簡單的前端頁面用來查詢數(shù)據(jù)，頁面一共有幾個邏輯
具體的效果可以看下面的演示
下面就來看一下具體的實現(xiàn)步驟。
首先看一下vue的代碼
<script type="text/javascript">
Vue.createApp({
data() {
return {
items : [],
// 關鍵詞
keyword : "",
// 是否沒有數(shù)據(jù)
isnull : false,
// 一開始不顯示上一頁和下一頁
isshow : false,
// 一共有多少條數(shù)據(jù)
countInfo : 0,
// 每一頁顯示幾條數(shù)據(jù)
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;
// 將原始數(shù)據(jù)置空
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：用來存放待展示的數(shù)據(jù)項
- keyword：記錄本次查詢使用的關鍵詞
- isnull：表示一次查詢的結(jié)果數(shù)量是否為0，用來控制沒有結(jié)果的顯示邏輯
- isshow：表示是否顯示上一頁下一頁按鈕，以及顯示當前頁數(shù)和數(shù)據(jù)總數(shù)
- countInfo：記錄一共有多少條結(jié)果
- pageSize：記錄每頁顯示的數(shù)據(jù)項，目前后端固定每頁展示10條數(shù)據(jù)
- currentPage：記錄當前是第幾頁
- countAll：記錄一共有多少頁數(shù)據(jù)
- code：后端返回的一個狀態(tài)碼，沒什么用
一共提供了三個方法進行查詢
- search()：進行一個新的關鍵詞的查詢
- getNextPage()：查詢下一頁的數(shù)據(jù)，如果已經(jīng)是最后一頁了，則查詢當前頁的結(jié)果
- getPrePage()：查詢上一頁的數(shù)據(jù)，如果已經(jīng)是第一頁了，則查詢當前頁的結(jié)果
接著我們再來看一下后端返回的數(shù)據(jù)格式
上圖中方框內(nèi)的數(shù)據(jù)就是后端返回的數(shù)據(jù)，msg中記錄的就是我們需要用到的數(shù)據(jù)，里面有交給數(shù)據(jù)項
- count：表示數(shù)據(jù)總數(shù)，只是查詢數(shù)據(jù)總數(shù)，并不會將所有的數(shù)據(jù)都返回給前端
- list：返回當前頁的數(shù)據(jù)
- page：表示當前是第幾頁
我們具體來看一下list中數(shù)據(jù)項的內(nèi)容
可以發(fā)現(xiàn)list中的每一項就是構(gòu)成我們前端頁面中一行的數(shù)據(jù)，這在vue中體現(xiàn)為數(shù)據(jù)的綁定，下面就來看看詳細的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">
<!-- 先編寫一個搜索欄 -->
<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>
<!-- 下面一行顯示發(fā)表時間，閱讀數(shù)和收藏數(shù) -->
<div>
<div style="color: #000000">發(fā)表時間：<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>
<!-- 當沒有查詢結(jié)果的時候顯示 -->
<div v-if="isnull">
<span>非常抱歉，沒有您想要的結(jié)果(。?＿?。)?I'm sorry~</span>
</div>
<!-- 當有數(shù)據(jù)的時候顯示 -->
<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}}條數(shù)據(jù)</spa>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</body>
<script type="text/javascript">
Vue.createApp({
data() {
return {
items : [],
// 關鍵詞
keyword : "",
// 是否沒有數(shù)據(jù)
isnull : false,
// 一開始不顯示上一頁和下一頁
isshow : false,
// 一共有多少條數(shù)據(jù)
countInfo : 0,
// 每一頁顯示幾條數(shù)據(jù)
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;
// 將原始數(shù)據(jù)置空
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編寫前端動態(tài)頁面真的比原生js或者jquery要方便很多，對比theamleaf也有很多好處。
我們在使用theamleaf的時候，每次提交表單都需要刷新頁面，使用vue+axios進行ajax請求則不需要刷新頁面，這不僅會減輕服務端的壓力，而且可以帶來更好的用戶體驗。
到此這篇關于Vue分頁查詢怎么實現(xiàn)的文章就介紹到這了,更多相關Vue分頁查詢內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了Vue2中的組件通信方式，文中通過示例進行了詳細的介紹，對我們學習Vue有一定的幫助，感興趣的小伙伴可以了解一下2022-07-07
vue插件開發(fā)之使用pdf.js實現(xiàn)手機端在線預覽pdf文檔的方法
這篇文章主要介紹了vue插件開發(fā)之使用pdf.js實現(xiàn)手機端在線預覽pdf文檔的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Vue-DPlayer是一個易于使用、高性能的基于Vue.js的視頻播放器組件,本文給大家介紹Vue DPlayer詳細使用,本文將從四個方面對Vue-DPlayer進行詳細的闡述,感興趣的朋友一起看看吧2023-10-10
組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。下面通過本文給大家分享Vue.js組件通信的幾種姿勢，感興趣的朋友一起看看吧2017-10-10
vue-cli3項目升級到vue-cli4 的方法總結(jié)
這篇文章主要介紹了vue-cli3項目升級到vue-cli4 的方法總結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)放大縮小拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了vue如何監(jiān)聽頁面緩存事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細介紹了vue中路由驗證和相應攔截的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了vue中van-picker的選項插槽的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了vue計時器的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06