vue前端分頁記憶 平台開發 9 列表分頁

列表通常都要有分頁功能，之前我還以為要費一番周折去實現，後來一搜發現jpa自帶了乙個分頁類，足夠滿足常規需求了。

搞起！

做的是專案管理列表的分頁，所以後端部分修改的就是projectcontroller下的/list介面。

注釋部分是老**，這個介面不需要任何傳參，直接會返回所有的列表資料。

而新介面則是加入了2個引數，分別是number第幾頁和size每頁最大數量。

@restcontroller

public class projectcontroller 
public result projectlist(int number, int size) throws exception 
}

注釋部分是老**，不再贅述。

package com.mock.platform.service;

import com.mock.platform.dao.projectdao;
import com.mock.platform.pojo.project;
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.data.domain.page;
import org.springframework.data.domain.pagerequest;
import org.springframework.data.domain.pageable;
import org.springframework.data.domain.sort;
import org.springframework.stereotype.service;
@service
public class projectservice 
public pagegetprojectlist(int number, int size) 

注意這裡要有一步減去1的處理，不然你傳1的時候，查詢出來的是第二頁的資料。

現在可以查詢一下這個介面了，看下返回的資料發生了什麼變化。

現在介面返回中有了我想要的分頁字段資料了，那麼前端拿到這些字段資料，就可以做處理了。

前端部分，我所使用的框架也都有解決方案，所以改起來也很容易。

不過這裡用到的乙個分頁元件，在vue-admin-template裡沒有，我是在vue-element-admin找到並拷貝過來使用的。 此外，還用到utils下的scroll-to.js。

這個前端框架的作者將分頁抽離成乙個元件，可供復用，所以在專案管理列表的vue檔案裡要匯入這個元件。

對應的，專案管理的vue元件裡，也要增加分頁所使用的相關字段。當拿到後端介面的返回後，將後端的返回值賦給pageinfo裡的各位。

剩下的就是改methods裡的projectget()方法了，注意後端介面返回的list資料已經放到了content裡，所以這裡也要對應修改。

methods: )

},

在列表內容下增加分頁的**，v-show判斷是否展示，這裡當總資料大於0的時候就會顯示分頁欄。

0" :total="pageinfo.totalelements" :page.sync="pageinfo.number"

:limit.sync="pageinfo.size" @pagination="projectget" />

最後，看下效果。

前端開發 前端分頁外掛程式myPagination

由於國內關於mypagination外掛程式的文件並不多，由於參照官方給的文件一直出現問題，所以自己摸索出了一種新的食用方法。定義全域性變數和預設搜尋條件var searchjson 預設的搜尋條件 searchjson.voucherdate searchjson.sorttag sorttime...

適合前端Vue開發童鞋的跨平台Weex

基於 vue 技術棧的你如果需要選用一種移動端跨平台框架，是 weex？react native？還是flutter?無疑，相對於後兩者，因為你現在已有比較熟練的 vue 基礎，如果在其他條件一致的情況，weex 無疑是最佳選擇 但是 weex 真的適合在實際專案中進行移動端跨平台開發嗎？weex ...

vue前端開發必備

編譯軟體 vscode 微軟出品 sublimetext webstorm或者idea 工具列表 vue.js devtools 除錯工具 adguard廣告截器 web前端助手 vuex snipaste 很方便快捷的截圖工具，極其強大 pxcook 對ps圖進行元素樣式解析，直接複製，即可使用 ...