vue+element-ui+mybatis-plus+springboot实现分页查询功能

最新推荐文章于 2024-07-05 04:49:07 发布

Peas.

最新推荐文章于 2024-07-05 04:49:07 发布

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签： vue spring elementui

本文链接：https://blog.csdn.net/S_duxiu/article/details/111462205

版权

该博客详细介绍了如何整合Vue、ElementUI、Mybatis-Plus和SpringBoot来实现分页查询功能。从准备相关文件、添加查询方法到UserMapper，编写XML查询语句，再到实现service和Controller中的分页查询逻辑，以及前端通过axios获取后台分页数据并构建页面，每个步骤都进行了清晰的阐述。

摘要由CSDN通过智能技术生成

一、准备

利用代码生成器，生成User相关文件

userMapper.xml
userService
userServiceImpl
UserController
创建对应查询视图对象（package：vo）
userVO：属性为提供的可查询的条件

二、为UserMapper添加查询方法

IPage<User> findUserPage(Page<User> page,@Param(Constants.WRAPPER) QueryWrapper<User> wrapper);

接收两个参数

Page：封装User实体的分页信息
QueryWrapper：封装User实体类的查询信息
Constants.WRAPPER：为

三、添加查询语句到XML文件中

<mapper namespace="com.doudou.system.mapper.UserMapper">
    <select id="findUserPage" resultType="User">
        select u.`id`,`username`,`nickname`,`email`,`avatar`,`phone_number`,`status`,
                u.`create_time`,u.`modified_time`,`sex`,`salt`,`type`,`password`,`birth`,
                `department_id`,d.name as name
        from tb_user u
        inner JOIN tb_department d
        on u.department_id = d.id
        ${
   ew.customSqlSegment}
    </select>
</mapper>

${ew.customSqlSegment}一定要加

四、添加service方法

IPage<User> findUserPage(Page<User> page, @Param(Constants.WRAPPER) QueryWrapper<User> wrapper);

五、实现service方法

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
   

    @Override
    public IPage<User> findUserPage(Page<User> page, QueryWrapper<User> wrapper) {
   
        return this.baseMapper.findUserPage(page,wrapper);
    }
}

六、Controller类中写分页查询

@RestController
@RequestMapping("/system/user")
public class UserController {
   

    @Resource
    private UserService userService;

    @PostMapping("/findUserPage")
    public Result findUserPage(@RequestParam(required = true,defaultValue = "1")Integer current,
                               @RequestParam(required = true,defaultValue = "6")Integer size,
                               @RequestBody UserVO userVO){
   
        // 对用户进行分页，泛型中注入的就是用户实体类
        Page<User> page = new Page<>(current,size);
        QueryWrapper<User> wrapper = getWrapper(userVO);
        IPage<User> userPage = userService.findUserPage(