Vue.js에서 실제 페이징을 구현하는 방법

零到壹度
풀어 주다: 2018-03-29 10:31:01
원래의
1894명이 탐색했습니다.


이 기사는 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>
로그인 후 복사

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개 총 요청

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>
로그인 후 복사
페이지 넘김(변경):
<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>
로그인 후 복사
E 밖 Extra:

구성 추가: PageSize, 프런트 데스크에서 백그라운드로 전달, 페이지 매기기 크기 수정

예, 조건 쿼리, Params에서 구성할 수 있으며 mybatis 사용 예제 구성 쿼리

요약:

이것은 상대적으로 기본인 진정한 페이징 방법입니다. 보다 복잡한 페이징을 구현하려면 관련 페이징 플러그인을 사용해야 합니다.

위 내용은 Vue.js에서 실제 페이징을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿