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

一、准备

利用代码生成器，生成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(page,wrapper);
        long total = userPage.getTotal();
        List<User> records = userPage.getRecords();
        return Result.ok().data("total",total).data("records",records);
    }
    
    private QueryWrapper<User> getWrapper(UserVO userVO){
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        if(userVO!=null){
            if(!StringUtils.isEmpty(userVO.getDepartmentId())){
                queryWrapper.eq("department_id",userVO.getDepartmentId());
            }
            if(!StringUtils.isEmpty(userVO.getUsername())){
                queryWrapper.eq("username",userVO.getUsername());
            }
            if(!StringUtils.isEmpty(userVO.getEmail())){
                queryWrapper.eq("email",userVO.getEmail());
            }
            if(!StringUtils.isEmpty(userVO.getSex())){
                queryWrapper.eq("sex",userVO.getSex());
            }
            if(!StringUtils.isEmpty(userVO.getNickname())){
                queryWrapper.eq("nickname",userVO.getNickname());
            }
        }
        return queryWrapper;
    }

}

七、通过axios接收后台传递的分页数据

创建axios实例，连接后端
request.js

import axios from 'axios'
// 创建axios实例，指向后端
var instance = axios.create({
    baseURL: 'http://localhost:8081',
    timeout: 3000,
  });
// 暴露接口
export default instance;

创建user-api，指定url连接

import request from '../utils/request'

export const findUserList = (current,size,userVO) => {
    return request({
        url:"/system/user/findUserPage",
        method:'post',
        params:{
            current,
            size
        },
        data:userVO
    })
}

八、前端页面构建

<el-card>

      <el-table :data="userList" border style="width: 100%;" max-height="560">
        <el-table-column prop="id" label="编号" width="150">el-table-column>
        <el-table-column prop="username" label="用户名" width="150">el-table-column>
        <el-table-column prop="sex" label="性别" width="110">
          <template slot-scope="scope">{{scope.row.sex==0?'男':(scope.row.sex==1?'女':'保密')}}template>
        el-table-column>
        <el-table-column sortable prop="name" label="所属部门" width="180">el-table-column>
        <el-table-column sortable prop="birth" label="生日" width="180">el-table-column>
        <el-table-column sortable prop="email" label="邮箱" width="180">el-table-column>
        <el-table-column prop="phoneNumber" label="电话" width="150">el-table-column>
        <el-table-column prop="status" label="是否禁用" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-color="#ff4949" inactive-color="#13ce66">el-switch>
          template>
        el-table-column>
        <el-table-column label="操作">
          <el-button type="primary" size="mini" icon="el-icon-edit">el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete">el-button>
          <el-button type="warning" size="mini" icon="el-icon-s-tools">el-button>
        el-table-column>
      el-table>
      
      <div class="block">
        <el-pagination
          style="padding-top:15px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[8, 10, 20, 30]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >el-pagination>
      div>
el-card>

data、method、created

  data() {
    return {
      userVO:{
        departmentId:'',
        email:'',
        username:'',
        sex:'',
        nickname:'',
      },
      // 用户集合
      userList: [],
      // 部门集合
      deptList: [],
      // 每页显示的条数
      size: 8,
      // 总条数
      total: 100,
      formInline: {
        user: "",
        region: "",
        city: ""
      },
      // 当前页码
      current: 1,
      departments: []
    };
  },
  created() {
    // 创建组件的时候调用查询所有用户的方法
    this.getUserList();
    this.getDeptAndCount();
  },
  methods: {
    // 重置表单
    resetUserVO() {
      this.userVO.departmentId=''
      this.userVO.email='',
      this.userVO.username='',
      this.userVO.sex='',
      this.userVO.nickname='',
      this.getUserList()
    },
    onSubmit() {
      console.log("submit!");
    },
    // 当每页条数改变的时候
    handleSizeChange(val) {
      // 将val赋值给size
      this.size = val;
      // 重新去后台查询数据
      this.getUserList();
    },
    // 当前页码改变的时候
    handleCurrentChange(val) {
      this.current = val;
      this.getUserList();
    },
    async getUserList() {
      const { data } = await findUserList(this.current, this.size,this.userVO);
      this.userList = data.data.records;
      this.total = data.data.total;
    },
    async getDeptAndCount() {
      const { data } = await findDeptAndCount();
      this.departments = data.data.departments;
    }
  },