上饒建設(shè)培訓中心網(wǎng)站圖片外鏈生成
使用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 : [],// 關(guān)鍵詞keyword : "",// 是否沒有數(shù)據(jù)isnull : false,// 一開始不顯示上一頁和下一頁isshow : false,// 一共有多少條數(shù)據(jù)countInfo : 0,// 每一頁顯示幾條數(shù)據(jù)pageSize : 10,// 當前是第幾頁currentPage : 1,// 一共有幾頁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 = [];// 不顯示上一頁下一頁按鈕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：記錄本次查詢使用的關(guān)鍵詞
-
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()：進行一個新的關(guān)鍵詞的查詢
- 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" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><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="請輸入要搜索的關(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" 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 : [],// 關(guān)鍵詞keyword : "",// 是否沒有數(shù)據(jù)isnull : false,// 一開始不顯示上一頁和下一頁isshow : false,// 一共有多少條數(shù)據(jù)countInfo : 0,// 每一頁顯示幾條數(shù)據(jù)pageSize : 10,// 當前是第幾頁currentPage : 1,// 一共有幾頁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 = [];// 不顯示上一頁下一頁按鈕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請求則不需要刷新頁面，這不僅會減輕服務(wù)端的壓力，而且可以帶來更好的用戶體驗。