vue+jsp+v-for实现列表，有分页版本

之前写了一篇无分页的vue展示列表，
https://segmentfault.com/a/11...
而有分页的列表和无分页的列表又非常类似，所以在这里介绍一下有分页的列表。关键还是要弄懂每一行代码，深刻理解每一行代码，才能在遇到类似的业务时，设计出对应的方案。

以后会陆续的增加
1.jquery+mybatis的分页
2.jquery+hibernate的分页
3.vue+hibernate的分页
4.angular+mybatis的分页
等等等吧，其实都是非常类似的，把一个搞懂了，其他的就是规则稍微变化一下，难度都差不多
不多说了，有问题留言吧

--【有分页分支】

面试的时候问分页的也是比较多的，其实各种分页都是类似的，在SSH阶段我i们学习jquery+hibernate分页，在SSM阶段我们学习了jquery+SSM分页。通过比较我们发现这两个分页的前端处理方式非常类似。此处我们学习vue分页，其实他们的写法都是非常类似的，只要反复对比练习，都可以掌握，面试的时候一般说出一种就可以了。

分页和不分页的url请求参数不同

分页需要向后台传页码

接口测试

http://localhost:8888/classes?start=2 第二页

http://localhost:8888/classes?start=1 第一页

--pageNum属性代表现在查询的页码，pageSize代表每页显示的数据条数，size代表总共有多少页，total代表有多少条数据，list是查询过来的数据，prePage是上一页的页码，nextPage是下一页的页码，lastPage是末页的页码。

--以上的属性需要我们对应接口返回的数据，自行能够写出，会在分页的时候使用，非常重要

--这些属性在调用的时候区分大小写吗？如何调用？

--如果以前没有写过分页，那么此处最好多练习几遍，以后慢慢的自己就可以写分页工具类了。

后台代码：

后台代码更是简单了，和之前学习的基本一样，只是把page对象作为返回的参数，之前是把page对象放到request作用域中。

@GetMapping("/classes") // 显示List

public PageInfo<com.zz.entity.Class> classes(@RequestParam(value = "start", defaultValue = "0") int start,
        @RequestParam(value = "size", defaultValue = "5") int size) throws Exception {
    PageHelper.startPage(start, size, "classid desc");
    ClassExample classExample = new ClassExample();
    List<com.zz.entity.Class> classList = classService.selectByExample(classExample);
    PageInfo<com.zz.entity.Class> page = new PageInfo<>(classList, 5); // 5表示导航分页最多有5个，像
    // [1,2,3,4,5]
    return page;
}

--这个代码不多做介绍了，在浏览器测试一下接口，没有错误说明接口正确

之前学习的放到request作用域的写法，

code as below

@RequestMapping("/studentList") // 显示List

public String studentList(Model m, @RequestParam(value = "start", defaultValue = "0") int start,
        @RequestParam(value = "size", defaultValue = "5") int size) throws Exception {
    PageHelper.startPage(start, size, "studentid desc");

    StudentExample studentExample = new StudentExample();
    List<Student> studentList = studentMapper.selectByExample(studentExample);
    PageInfo<Student> page = new PageInfo<>(studentList);
    m.addAttribute("studentList", studentList);
    m.addAttribute("page", page);
    return "studentList";
}

--model是什么，回忆mvc时学习的内容

var data4Vue={classes:[], pagination: {} }//数据域增加分页部分

list: function(start){

            var url = "classes?start="+start;//分页查询

​ axios.get(url).then(function(response) {
​ vue.pagination = response.data;
​ console.log(vue.pagination);
​ console.log(response.data);
​ vue.classes = response.data.list;//分页查询
​ })；
},

--pagination代表的就是上面的json对象，此处为什么有用json对象了呢？用json array是否可以？

mounted:function(){ //mounted　表示这个 Vue 对象加载成功了-->jquery ready()-->body onload 事件

//查询第一页
this.list(1);

},

<input type="button" v-on:click="prePage" value="上一页” />

当前{{pagination.pageNum}}页

<input type="button" v-on:click="nextPage" value="下一页” />

方法域增加方法

prePage： function(){

​ vue.list(pagination.prePage);

}

nextPage: function(){

​ vue.list(pagination.prePage);

}

--方法名叫prePage和nextPage就是为了和mybatis分页返回的属性名保持一致。

effect as below

--下节课增加首页和末页的功能，解决一些分页的bug问题