学做毕设 2022 第八讲分页查询

原创已于 2022-02-23 19:12:54 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#linq #vue.js #elementui

于 2022-02-22 10:42:54 首次发布

本文介绍了如何在Spring Boot中实现分页查询，并通过Controller和Mapper接口展示详细步骤。同时，针对跨域问题，配置了CORS过滤器以允许来自不同源的请求。此外，还展示了Vue.js前端页面如何使用El-Table和El-Pagination组件进行分页显示，并处理分页查询数据。

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