UserMapper中的
@Select("select * from sys_user limit #{pageNum},#{pageSize}")
List<User> selectPage(Integer pageNum, Integer pageSize);
UserController中的
//分页查询
//接口路径,user/page
//@RequestParam接收 ?pageNum=1 & pagesize=10
//limit=(pageNum-1)*pageSize
@GetMapping("/page")
public List<User> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize)
{
pageNum=(pageNum-1)*pageSize;
return userMapper.selectPage(pageNum,pageSize);
}
改变之后的样子
UserController
//分页查询
//接口路径,user/page
//@RequestParam接收 ?pageNum=1 & pagesize=10
//limit=(pageNum-1)*pageSize
@GetMapping("/page")
public Map<String,Object> findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize)
{
pageNum=(pageNum-1)*pageSize;
Integer total=userMapper.selectTotal();
List<User> data=userMapper.selectPage(pageNum,pageSize);
Map<String,Object> res=new HashMap<>();
res.put("data",data);
res.put("total",total);
return res;
}
UserMapper
@Select("select count(*) from sys_user")
Integer selectTotal();
created() {
//请求前台分页查询数据
fetch("http://localhost:9090/user/page?pageNum=1&pageSize=2").then(res=> res.json()).then(
res=>{
console.log(res)
})
},
跨域报警
[HMR] Waiting for update signal from WDS...
localhost/:18 Access to fetch at 'http://localhost:9090/user/page?pageNum=1&pageSize=2' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
package com.yinming.sprintboot.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
// 当前跨域请求最大有效时长。这里默认1天
private static final long MAX_AGE = 24 * 60 * 60;
private CorsConfiguration buildConfig(){
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
corsConfiguration.setMaxAge(MAX_AGE);
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4 对接口配置跨域设置
return new CorsFilter(source);
}
}
UserController中的
//分页查询
//接口路径,user/page
//@RequestParam接收 ?pageNum=1 & pagesize=10
//limit=(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+"%";
Integer total=userMapper.selectTotal(username);
List<User> data=userMapper.selectPage(pageNum,pageSize,username);
Map<String,Object> res=new HashMap<>();
res.put("data",data);
res.put("total",total);
return res;
}
<el-table :data="tableData" border stripe :header-cell-class-name="headBg">
<el-table-column prop="id" label="id" width="80">
</el-table-column>
<el-table-column prop="username" label="用户名" width="140">
</el-table-column>
<el-table-column prop="nickname" label="昵称" width="120">
</el-table-column>
<el-table-column prop="email" label="邮箱地址" width="150">
</el-table-column>
<el-table-column prop="address" label="地址" width="150">
</el-table-column>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
export default { name: 'Home', data(){ return { tableData: [], total:0, pageNum:1, pageSize:2, collapseBtnClass:'el-icon-s-fold', isCollapse:false, side_With:200, logoTextShow:true, headBg:'headBg' } }, created() { this.load() }, methods:{ collapse(){//点击收缩按钮触发 console.log('AAA'); this.isCollapse=!this.isCollapse; if (this.isCollapse) { this.side_With=64 this.collapseBtnClass='el-icon-s-unfold' this.logoTextShow=false }else { this.side_With=200 this.collapseBtnClass='el-icon-s-fold' this.logoTextShow=true } }, handleSizeChange(pageSize){ this.pageSize=pageSize this.load() }, handleCurrentChange(pageNum){ this.pageNum=pageNum this.load() }, load(){ //请求分页查询数据 fetch("http://localhost:9090/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"").then(res=> res.json()).then( res=>{ this.tableData=res.data this.total=res.total }) } } }