이 기사는 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:{'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/></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 < 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('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 < 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, 프런트 데스크에서 백그라운드로 전달, 페이지 매기기 크기 수정
예, 조건 쿼리, Params에서 구성할 수 있으며 mybatis 사용 예제 구성 쿼리
요약:
이것은 상대적으로 기본인 진정한 페이징 방법입니다. 보다 복잡한 페이징을 구현하려면 관련 페이징 플러그인을 사용해야 합니다.
위 내용은 Vue.js에서 실제 페이징을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
