建议用postman,这个是真的好用!
首先,要有一个配置,配置好mybaties_plus默认的分页
package cn.edu.seu.l_mall.config;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import com.baomidou.mybatisplus.extension.plugins.pagination.optimize.JsqlParserCountOptimize;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.transaction.annotation.EnableTransactionManagement;
@EnableTransactionManagement
@Configuration
@MapperScan("cn.edu.seu.l_mall.*.mapper")
public class MybatisPlusConfig {
@Bean
public PaginationInterceptor paginationInterceptor() {
PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
// 设置请求的页面大于最大页后操作, true调回到首页,false 继续请求 默认false
paginationInterceptor.setOverflow(true);
// 设置最大单页限制数量,默认 500 条,-1 不受限制
paginationInterceptor.setLimit(3);
paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
return paginationInterceptor;
}
}
2.在CategoryController加入接收前端数据的函数(接收分页信息等。。。)
@GetMapping("/categories")//与listCategroy.html有关
public IPage<Category> list(@RequestParam(value = "start", defaultValue = "1") int start, @RequestParam(value = "size", defaultValue = "5") int size) throws Exception {
IPage<Category> page = new Page<Category>(start, 3); //(当前页,页大小)
IPage<Category> page1 = categoryService.page(page);
return page1;
}
3.用postman测试
![](https://img2020.cnblogs.com/blog/1980227/202003/1980227-20200327182607515-509501321.png)
成功!目前只是成功返回了分页数据,具体的跳转页面操作还没做。
补充一下,前端这么写:不能放全部代码,见谅
$(function(){
var dataVue = {//是JSON数据//数据,JSON类型
uri:'categories',
beans: [],
bean: { id: 0, name: ''},//分类信息,就是这个页面上的
pagination:{},
file: null//上传的文件
};
//ViewModel
var vue = new Vue({//注意大写V,把id对应的元素与JSON数据关联起来
el: '#workingArea',//id
data: dataVue,
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
this.list(0);
},
methods: {
list:function(start){
var url = this.uri+ "?start="+start;
axios.get(url).then(function(response) {
vue.pagination = response.data;
vue.beans = response.data.records;
});
},
add: function () {//增加和删除操作与分页无关,不展示了
},
deleteBean: function (id) {//delete是保留字。只能用deletebean
},
getFile: function (event) {
this.file = event.target.files[0];
},
jump: function(page){
jump(page,vue); //定义在adminHeader.html 中
},
jumpByNumber: function(start){
jumpByNumber(start,vue);
}
}
});
});