12、幽络源微服务项目实战：ElementUI+MyBatisPlus的分页查询与配置

前言

上节教程在权限管理中，我们使用的是树状递归查询，这节幽络源来讲解ElementUI与MyBatisPlus的分页查询以及配置。

分析用户管理页

在用户管理页面中，我们首先考虑到查询是要做成分页的，其次在表格上还有三个搜索框，无论是搜索还是不搜索，都属于分页查询的操作，因此一个接口就行了，不搜索时直接传递空值。如图

接口开发与配置分页插件

由于这里我们要用到MyBatisPlus的自带分页功能，因此分页配置必不可少，在tenant模块下的config包创建MyBatisPlusConfig配置类，内容如下

@Configuration
public class MyBatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return interceptor;
    }
}

创建UserController，内容与图如下，接口路径定义为/user/selectPage，这里专门针对分页大小做了处理，防止有人恶意传参，导致一次性查询量很大

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

    @Resource
    private UserService userService;

    @GetMapping("/selectPage")
    public ResResult<?> selectPage(@Param("username")String username,
                                   @Param("realName")String realName,
                                   @Param("companyId")String companyId,
                                   @Param("page")Integer page,
                                   @Param("size")Integer size){
        if (size<0 || size > 50){
            return ResResult.fail("分页大小限制0~50");
        }
        return userService.selectPage(username,realName,companyId,page,size);
    }
}

然后是服务层，代码与图如下，我们直接构造传来的搜索条件，若为空则不添加条件，然后分页就直接使用MyBatisPlus自带的分页工具即可，另外总条数需要我们另外的查询一下，这个total在前端做分页会需要用到，因此必不可少

@Service
public class UserServiceImpl implements UserService {

    @Resource
    private UserMapper userMapper;

    @Override
    public ResResult<?> selectPage(String username, String realName, String companyId, Integer page, Integer size) {
        LambdaQueryWrapper<User> eq = new LambdaQueryWrapper<User>()
                .eq(StringUtils.isNotBlank(username), User::getUsername, username)
                .eq(StringUtils.isNotBlank(realName), User::getRealName, realName)
                .eq(StringUtils.isNotBlank(companyId), User::getCompanyId, companyId);
        Page<User> userPage = userMapper.selectPage(new Page<>(page, size), eq);
        Integer count = userMapper.selectCount(eq);
        userPage.setTotal(count);
        return ResResult.success(userPage);
    }
}

除此之外，在前端界面我们还能看到表格中的用户信息是包括了公司的名称的，而上面我们的查询用户接口是不带有公司的名称，只带有公司的id，因此还需要额外一个接口来查询公司信息，这里我们需要返回 以 公司Id为键，公司名为值 的map对象，如图，这里提示一下

前端分页对接与理解

新建 user.js，封装对应的请求，代码与图如下

//分页搜索查询用户
export function selectUserPage(username,realName,companyId,page,size) {
    return request({
        url: '/user/selectPage?username='+username+'&realName='+realName+'&companyId='+companyId+'&page='+page+'&size='+size,
        method: 'get'
    });
}

同样的，公司的map信息我们也要封装请求，如图

在分页表格的模版代码中，我们可以看到，这里针对公司名是做了特殊处理的，他不是直接使用后端返回的值，而是通过一个map来展示公司的信息，这就对应上了我们上边查询公司map信息的接口

<el-table :data="list" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column prop="username" label="用户名" width="150" />
        <el-table-column prop="realName" label="真实姓名" width="120" />
        <el-table-column prop="phone" label="手机号" width="150" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column label="所属公司">
          <template slot-scope="{row}">
            {{ companyMap[row.companyId] }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="{row}">
            <el-tag :type="row.status ? 'success' : 'danger'">
              {{ row.status ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="{row}">
            <el-button size="mini" @click="handleUpdate(row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row)">禁用</el-button>
          </template>
        </el-table-column>
      </el-table>

在分页条的模版中，这里使用的是elementui的分页组件，可以看到他有三个属性（:current-page，:page-size，:total），一个方法（@current-change），这三个属性的值决定了分页条的样子，分页条有多少页，由total和size控制，这是elementui会自动帮我们计算的，我们只需确保total和size的值正确即可，然后current-change表示页码修改后触发的函数，第一次进入页面传数字1会触发，然后通过点击不同页码以及上下页也会触发

<div class="pagination-container">
        <el-pagination
            :current-page="listQuery.page"
            :page-size="listQuery.limit"
            :total="total"
            layout="total, prev, pager, next"
            @current-change="handleCurrentChange"
        />
      </div>

总之，这里的表格和分页条所用到参数为如下

然后是对接分页处理的封装的请求，在当前页引入请求

import {selectUserPage} from '@/api/tenant/user'
import {selectCompanyMap} from '@/api/tenant/company'

然后利用mounted函数使页面加载时就获取公司map信息，以及获取第一页的用户信息，如图，

本节源码

https://pan.quark.cn/s/21df21f97025

结语

如上为幽络源的12、幽络源微服务项目实战：ElementUI+MyBatisPlus的分页查询与配置教程，如有疑问或对微服务感兴趣可加入我们的QQ群询问与交流：307531422