1.controller
//接口路径:/user/page?pageNum=1&pageSize=10
//分页接口
//@RequestParam接受
//limit第一个参数:pageNum = (pageNum -1) * pageSize;
@GetMapping("/page")
public Map<String,Object> findPage(@RequestParam Integer pageNum,
@RequestParam Integer pageSize,
@RequestParam
String username){
pageNum = (pageNum -1) * pageSize;
username = "%"+username+"%";
List<User> data = userMapper.selectPage(pageNum,pageSize,username);
Integer total = userMapper.selectTotal(username);
Map<String,Object> res = new HashMap<>();
res.put("data",data);
res.put("total",total);
return res;
}
2.usermapper
@Select("select * from user where username like #{username} limit #{pageNum},#{pageSize}")
List<User> selectPage(Integer pageNum, Integer pageSize, String username);
@Select("select count(*) from user where username like #{username}")
Integer selectTotal(String username);
3.前台:
methods:{
load(){
//fetch api请求查询
fetch("http://localhost:9090/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&username="+this.username).then(res => res.json()).then(res =>{
console.log(res);
this.userList=res.data;
this.total = res.total;
})
}
}
4.直接调用load方法即可