So implementieren Sie echtes Paging in Vue.js

Dieser Artikel zeigt Ihnen hauptsächlich, wie Sie echtes Paging in Vue.js implementieren. Er hat einen guten Referenzwert und ich hoffe, dass er hilfreich ist an alle. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

Idee:

Während des Initialisierungsprozesses fordert das Frontend zunächst die Gesamtzahl der Artikel und dann die an 3. Eine Seite mit Daten, und dann verwenden Sie Ajax (Axios und QS), um die Daten aus dem Hintergrund entsprechend der angeforderten Seitenzahl basierend auf dem Klick-Seitenwechselereignis abzurufen.

Prozess:

Seitenzahl-Konfigurationselement:

<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>

ServiceImpl :

<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 Anfragen insgesamt

vue.js (JavaScript) Code:

<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>

Backend-Code (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 Homepage und nachfolgende Seitenzahlen anfordern

vue.js (JavaScript) Code:

<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>

Seitenwechsel:

<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>

Backend-Code (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>

Zusätzlich:

Sie können folgende Konfiguration hinzufügen: pageSize, von vorne in den Hintergrund übergeben, die Seitengröße ändern

Beispiel, Bedingungsabfrage, kann in Params konfiguriert werden, verwenden Sie die Mybatis-Beispielkonfiguration zur Abfrage

Zusammenfassung:

Dies ist Eine relativ native Echte Paging-Methode. Wenn Sie komplexeres Paging implementieren möchten, müssen Sie verwandte Paging-Plug-Ins verwenden.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie echtes Paging in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!