05---前后端实现分页查询

现在需要新加一个需求：实现分页查询，模糊查询，（例如通过用户名查询出数据） 从上往下修改

1、controller层

UserController.java

 @GetMapping("/page")
    public Map<String,Object> findPage(@RequestParam Integer pageNum,
                                       @RequestParam Integer pageSize,
                                       @RequestParam String username){
      return userService.findPage(pageNum,pageSize,username);

    }

三个参数，pageNum，pageSize，username

2、service层

写实现方法

UserService.java

 public Map<String,Object> findPage(Integer pageNum, Integer pageSize,String username){
        pageNum=(pageNum-1)*pageSize;  //第一个参数
        username="%"+username+"%";
        int total = userMapper.pageTotal(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;

    }

• 写具体的实现方法，业务代码都放在这里。
• 分页查询出来有两个结果，一个是user列，一个是total总数，所以用一个Map来封装这两个结果Mapres=new HashMap<>();

3、UserMapper

UserMapper.java

     List<User> selectPage(Integer pageNum, Integer pageSize,String username);

    int pageTotal(String username);

• 这个没有什么讲究，为了代码规范

4、sql语句

UserMapper.xml

    <select id="selectPage" resultType="User">
        select * from user where username like #{username} limit #{pageNum},#{pageSize}
    select>

    <select id="pageTotal" resultType="int">
        select count(*) from user where username like #{username}
    select>

• 分页查询，模糊查询

5、运行测试

1. 启动主项目，进入swagger页面测试接口，http://localhost:8081/swagger-ui.html

2. 测试分页接口

结果：

测试成功，成功取到符合条件的数据并分页

6、前端实现分页

1. 从后端请求到数据，并显示在前端页面上
2. 遇到bug：

BUG：Access to fetch at ‘http://localhost:8081/user/page?pageNum=1&pageSize=2’ from origin ‘http://localhost:8080’ has been blocked by CORS

解决：跨域问题

• 在后端配置一个CorsConfig

package com.xqh.common;
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;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("http://localhost:8080"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

3. 实现分页。分页按钮，跳转时有响应

4. 实现输入用户名搜索

 
      
       搜索

5. Home.vue完整代码

6. 运行

npm run serve，打开 http://localhost:8080

分页查询OK！