springboot+mybatisplus整合vue实现分页查询

效果图如下，实现多条件模糊分页查询:

1.后台接口：

//    分页查询

    @GetMapping("/page")
    public ResultUtil queryGoodsList(@RequestParam Integer page, @RequestParam Integer limit, @RequestParam String goodsName,@RequestParam String goodsType){
        //        传入分页属性
        Page objectPage = new Page<>(page, limit);
        QueryWrapper wrapper = new QueryWrapper<>();
        //      条件查询：不为空和空白字符
        wrapper.like(StringUtils.isNotBlank(goodsName),"name",goodsName)
        .like(StringUtils.isNotBlank(goodsType),"goodstype",goodsType);
        //        分页查询
        IPage goodsIPage = goodsService.page(objectPage, wrapper);
        //        数据总数
        long total = goodsIPage.getTotal();
        //        分页的数据
        List goodsList = goodsIPage.getRecords();
        //        回写数据
        Map res = new HashMap<>();
        res.put("data",goodsList);
        res.put("total",total);
//        return res;
        return new ResultUtil(0,total,goodsList);
    }

2.mybatisplus配置：

@Configuration
@MapperScan("com.jk.mapper")
public class MybatisPlusConfig {
    /**
     * 分页插件
     */
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        return new PaginationInterceptor();
    }
}

3.后台解决跨域问题：

@Configuration
public class CorsConfig  implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedHeaders(CorsConfiguration.ALL)
                .allowedMethods(CorsConfiguration.ALL)
                .allowCredentials(true)
                .maxAge(24*60*60);
    }
}

4.vue前端页面：