Vue.js如何实现真分页

  本文主要为大家分享一篇Vue.js如何实现真分页的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧。

思路：

      前端在初始化过程中，第一步先请求总的条数，然后，再请求第一页数据，然后根据点击翻页事件根据请求页码用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><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></a></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:{'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}<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></a></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:{'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}<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 					//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						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('http://localhost:8088/Web/ListServlet',<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:{'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'}<br>            		}<br>            	).then(res=>{<br>					console.log(JSON.stringify(res.data));<br>					var object = eval(res.data);<br>					for(var i = 0; i 						//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.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></a></span>

额外：

                            可添加配置：pagesize，从前台传入后台，修改分页大小

                            example，条件查询，可在params里配置，用mybatis example配置查询

总结：

        这是一个比较原生的真分页方法，如果想要实现更加复杂的分页，需要使用相关分页插件。

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！