实战五：SpringBoot实现分页查询

一、跨域

1、前端跨域报错

localhost: 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.

2、服务端跨域配置

@Configuration
public class CorsConfig {
    //当前跨域请求默认最大有效时常，1天    
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean    
    public CorsFilter corsFilter() {

        //1. 添加 CORS配置信息        
        CorsConfiguration config = new CorsConfiguration();
        //放行哪些原始域        
        config.addAllowedOrigin("*");
        //是否发送 Cookie//        
        config.setAllowCredentials(true);        
        //放行哪些请求方式        
        config.addAllowedMethod("*");
        //放行哪些原始请求头部信息        
        config.addAllowedHeader("*");
        //暴露哪些头部信息//        
        config.addExposedHeader("*");        
        config.setMaxAge(MAX_AGE);

        //2. 添加映射路径        
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        //3. 返回新的CorsFilter        
        return new CorsFilter(source);
    }
}

二、分页查询

1、某个字段不展示给前端

@Data
public class User {
    private Integer id;
    private String username;
   @JsonIgnore   
    private String password;
    private String nickname;
    private String email;
    private String phone;
    private String address;
}

2、模糊查询拼接方式

1）sql 拼接

@Select 注解用concat('%',#{username},'%')拼模糊查询

2）可以代码中拼接

3、分页查询服务端代码

@GetMapping("/page")
public Map<String,Object> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize,@RequestParam String username){
    pageNum = (pageNum -1)*pageSize;
    Integer total = userMapper.selectTotal(username);
    username = '%'+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;
}

Mapper

@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 concat('%',#{username},'%')")
Integer selectTotal(String username);

4、前端代码

data() {
    return {
      tableData: [],
      total: 0,
      pageNum:1,
      pageSize:2,
      username:'',
      email:'',
      address:'',
      msg: "",
      collapseBtnClass:'el-icon-s-fold',
      isCollapse:false,
      sideWidth:200,
      logoTextShow:true,
      headerBg: "headerBg"
    }
  },
  created(){
    this.load()

  },
  methods: {
    collapse(){
      this.isCollapse =!this.isCollapse
      if (this.isCollapse) {//收缩
        this.sideWidth = 64
        this.collapseBtnClass ='el-icon-s-unfold'
        this.logoTextShow = false
      }else{//展开
        this.sideWidth = 200
        this.collapseBtnClass ='el-icon-s-fold'
        this.logoTextShow = true
      }   
    },
    handleSizeChange(pageSize){
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum){
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },
    load(){
    //请求分页查询
     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.tableData =res.data
        this.total = res.total
      })
    }
  }
};

分页 

            <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>

列表 

          <el-table :data="tableData" align="center">
            <el-table-column prop="id" label="ID" width="80" align="center">
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="140" align="center">
            </el-table-column>
            <el-table-column prop="nickname" label="昵称" width="120" align="center">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="120" align="center">
            </el-table-column>
            <el-table-column prop="phone" label="电话" width="120" align="center">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="200" align="center">
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button type="success">编辑<i class="el-icon-edit"></i></el-button>
                <el-button type="danger">删除<i class="el-icon-remove-outline"></i></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 10px 0;">
            <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>
          </div>

查询 

          <div style="margin: 10px 0;">
            <el-input suffix-icon="el-icon-search" style="width: 200px;" placeholder="请输入姓名" class="search" v-model="username" clearable></el-input>   
            <el-input suffix-icon="el-icon-message" style="width: 200px;" placeholder="请输入邮箱" class="search" v-model="email" clearable></el-input>   
            <el-input suffix-icon="el-icon-position" style="width: 200px;" placeholder="请输入地址" class="search" v-model="address" clearable></el-input>   
            <el-button class="ml-5" type="primary" @click="load">查询</el-button>
          </div>