這節對上節的代碼進行修改 進行數據分頁顯示
為了讓頁面不刷新請求返回的是同一套數據 我們首先對mock生成的數據進行改造
上節課的代碼每次刷新頁面會生成隨機的50條數據（分頁顯示看著不明顯）所以這節課先讓其在不刷新頁面的情況下返回同一套數據
看下代碼
為了點擊分頁時看數據明顯一些
修改代碼如下 并加入了圖書行號一個字段
image.png
模板頁面
image.png
運行效果
image.png
一共50條數據 下面實現下一頁顯示10條數據
我們在實際開發時 取第二頁 第三頁等內容時 會通過參數的方式去請求 不會赤裸裸的一個url后面沒有參數
以get請求為例
一般會寫入如下
http:mybook.list.com/list?page=n&pageSize=m
image.png
上一節我們的圖書列表api地址為下面這個不帶參數的
image.png
如果想分頁傳入參數像下面一樣 mock就攔截不了請求了 因為api地址不一樣了
image.png
改成帶頁碼的之后mock就攔截不了 同時運行頁面
也出現如下
image.png
圖書列表不見了
那么如何攔截帶參數的地址呢
mock官方給出解決如下
攔截的地址第一個參數可以寫成一個正則表達式的方式 這時他會進行匹配 如果匹配到也可以攔截 代碼如下
image.png
再次運行 可以發現圖書列表出現了（mock進行了攔截）
image.png
下面看下如何獲取參數 可以通過第三個參數獲取當前url 然后通過拼接分割字符串的方式獲取參數 第三個參數除了可以寫要獲取的data數據外 還可以寫入一個剪頭函數 里面有個options參數 可以獲取到當前url信息
代碼如下
image.png
運行結果
image.png
控制臺出現了options對象信息 包含當前請求的url地址
得到url后 對其進行字符串切割（等方法獲取參數）
下面寫個方法 獲取url后面的參數
image.png
獲取參數
image.png
因為bookData(生成了)一共有50條數據 所以需要過濾下數據
所以需要寫個函數過濾下bookData 獲取從頁碼開始的到頁尺寸的部分即可
image.png
運行結果
image.png
只顯示了1頁 是因為我們過濾了圖書數據 booklist.length只有10條數據 所以是1頁
一般分頁 后臺都會返回總條數listsize如下
image.png
這時前臺請求就需要計算這個長度了
修改如下
image.png
對listsize重新賦值
運行出現如下
image.png
顯示了5頁
但是點擊沒有實現分頁
因為我們請求的時候寫成了第一頁
image.png
下面改成動態的
由于我們上節課講過 點擊每一頁改變currentPage的值
所以改成如下
image.png
運行效果
image.png
點擊后還是沒有進行分頁
是因為我們之前說過的一個問題 改變了vue實例data里面的數據 視圖會發生重新渲染（re-render） 我們需要在重新渲染之前執行beforeUpdate函數
這就需要我們學習一個新的生命周期函數 beforeUpdate()
這個函數在重新渲染組件之前執行
所以我們需要在里面再次獲取圖書實例
image.png
運行效果
image.png
可以看見進行分頁了
全部代碼
js
image.png
image.png
image.png
模板頁面
image.png
image.png
image.png
image.png
