想法：

前端在初始化過程中，第一步先請求總的條數，然後，再請求第一頁數據，然後根據點擊翻頁事件根據請求頁碼用ajax（axios和qs）去後台取得數據。

過程：

頁碼設定項：

<span style="font-family: 微软雅黑, "Microsoft YaHei";">pagerData:{<br/>                    data:[],<br/>                    page:{<br/>                    	//分页数<br/>                        arrPageSize:[10,20,30,40],<br/>                        //分页大小<br/>                        pageSize:10,<br/>                        //总分页数<br/>                        pageCount:1,<br/>                        //当前页面<br/>                        pageCurrent:1,<br/>                        //总数<br/>                        totalCount:80<br/>                    }<br/>                },<br/></span>

服務Impl：

<span style="font-family: 微软雅黑, "Microsoft YaHei";">	@Override<br/>	public List<A> getPageList(int startpage, int endpage) throws IOException {<br/>		// TODO Auto-generated method stub<br/>		init();<br/>		List<A> list = aMapper.selectByPage(startpage,endpage,null);<br/>		return list;<br/>	}<br/><br/>	@Override<br/>	public Integer getCount() throws IOException {<br/>		// TODO Auto-generated method stub<br/>		init();<br/>		Integer count = (int) aMapper.countByExample(null);<br/>		return count;<br/>	}<br/></span>

1請求總數

#vue.js（JavaScript）程式碼：

<span style="font-family: 微软雅黑, "Microsoft YaHei";">created(){<br/>			//请求总页数<br/>			this.$axios.post("http://localhost:8088/Web/ListServlet",<br/>					{params:{<br/>						init:true<br/>					}}<br/>				,<br/>				{<br/>					headers:{&#39;Content-Type&#39;: &#39;application/x-www-form-urlencoded;charset=utf-8&#39;}<br/>				}<br/>				)<br/>			.then(res=>{<br/>				console.log(JSON.stringify(res.data));<br/>				var object = eval(res.data);<br/>				var totalNum = object["count"];<br/>				console.log("totalNum:" + totalNum);<br/>				this.pagerData.page.totalCount = totalNum;<br/>			});}<br/></span>

#後台程式碼（Java）：

<span style="font-family: 微软雅黑, "Microsoft YaHei";">String queryString = readRequest(request);<br/>		<br/>		JSONObject object = null;<br/>		object = JSONObject.fromObject(queryString);<br/>		JSONObject params = (JSONObject) object.get("params");<br/>		//判断是是初始化过程<br/>		if((params.getString("init")).equals("true")) {<br/>			Integer count = service.getCount();<br/>			PrintWriter out = response.getWriter();<br/>			JSONObject result = new JSONObject();<br/>			result.put("count", count);<br/>			logger.info(result.toString());<br/>			out.write(result.toString());<br/>			out.close();<br/>			return;<br/>		}<br/>		logger.info(params.get("startpage"));<br/>		logger.info(params.get("endpage"));<br/>		//判断不是初始化过程<br/>		if((params.getString("init")).equals("false")) {<br/>			PrintWriter out = response.getWriter();<br/>			List<A> list = service.getPageList(Integer.parseInt((params.getString("startpage"))),<br/>					Integer.parseInt((params.getString("endpage"))));<br/>			JSONArray array = JSONArray.fromObject(list);<br/>			out.write(array.toString());<br/>			out.close();<br/>			return;<br/>		}<br/>public String readRequest(HttpServletRequest request) throws IOException {<br/>		BufferedReader reader = new BufferedReader(new InputStreamReader(request.getInputStream(),"UTF-8"));<br/>		String temp = "";<br/>		String s = "";<br/>		while((temp = reader.readLine()) != null)<br/>		{<br/>			s = s + temp;<br/>		}<br/>		return s;<br/>	}<br/></span>

2請求首頁與後續頁碼

vue.js（JavaScript）代碼：

<span style="font-family: 微软雅黑, "Microsoft YaHei";">//请求首页 1-10<br/>			this.$axios.post("http://localhost:8088/Web/ListServlet",<br/>				<br/>					{params:{<br/>						init:false,<br/>						startpage:1,<br/>						endpage:10<br/>					}}<br/>				,<br/>				{<br/>					headers:{&#39;Content-Type&#39;: &#39;application/x-www-form-urlencoded;charset=utf-8&#39;}<br/>				}<br/>				)<br/>			.then(res=>{<br/>				console.log(JSON.stringify(res.data));<br/>				var object = eval(res.data);<br/>				var totalNum = object["count"];<br/>				console.log("totalNum:" + totalNum);<br/>				for(var i = 0; i < res.data.length; i++){<br/>					//console.log("res.data[i] is " + i + "\n " + JSON.stringify(res.data[i]));<br/>					var object = eval(res.data[i]);<br/>					object.index = i+1;<br/>					totalNum ++;<br/>					if(i<=10){	//初始化获取数据的过程中，将前10个默认加入分页data<br/>						this.pagerData.data.push(object);<br/>						}<br/>					}<br/>				//this.pagerData.page.totalCount = totalNum;<br/>			});<br/>			this.loading = false;<br/>			<br/>			<br/>		}<br/></span>

翻頁（change）：

<span style="font-family: 微软雅黑, "Microsoft YaHei";">this.$axios.post(&#39;http://localhost:8088/Web/ListServlet&#39;,<br/>            		{params:{<br/>            			init:false,<br/>				startpage:((curpage-1)*this.pagerData.page.pageSize +1),<br/>				endpage:curpage*this.pagerData.page.pageSize<br/>            		}},<br/>            		{<br/>            			headers:{&#39;Content-Type&#39;:&#39;application/x-www-form-urlencoded;charset=utf-8&#39;}<br/>            		}<br/>            	).then(res=>{<br/>					console.log(JSON.stringify(res.data));<br/>					var object = eval(res.data);<br/>					for(var i = 0; i < res.data.length; i++){<br/>						//console.log("res.data[i] is " + i + "\n " + JSON.stringify(res.data[i]));<br/>						var object = eval(res.data[i]);<br/>						object.index = (curpage-1)*this.pagerData.page.pageSize +1 + i;<br/>						if(i<=this.pagerData.page.pageSize){<br/>							this.pagerData.data.push(object);<br/>							}<br/>						}<br/>					//this.pagerData.page.totalCount = totalNum;<br/>				})<br/></span>

後台程式碼（Java）：

<span style="font-family: 微软雅黑, "Microsoft YaHei";">//判断不是初始化过程<br/>		if((params.getString("init")).equals("false")) {<br/>			PrintWriter out = response.getWriter();<br/>			List<A> list = service.getPageList(Integer.parseInt((params.getString("startpage"))),<br/>					Integer.parseInt((params.getString("endpage"))));<br/>			JSONArray array = JSONArray.fromObject(list);<br/>			//logger.info(array.get(1).toString());<br/>			out.write(array.toString());<br/>			out.close();<br/>			return;<br/>		}<br/></span>

額外：

地新增設定：pageSize，從 example，以條件查詢，可於params配置，使用mybatis example設定查詢

總結：

這是一個比較原生的真分頁方法，如果您想要實現更複雜的分頁，則需要使用相關分頁外掛程式。

以上是Vue.js如何實現真分頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。