基于SSM的订餐系统 ---员工信息分页查询

需求分析:
系统中的员工很多的时候，如果在一个页面中全部展示出来会显得比较乱，不便于查看，所以一般系统中会以分页来展示列表数据。

处理流程：
1.页面发送ajax请求，将分页查询参数(Page,PageSize,name)提交到服务器
2.服务端Controller接收页面提交到数据并调用Service查询数据
3.Service调用Mapper操作数据库，查询分页数据
4.Controller将查询到的分页数据响应给页面
5.页面接收到分页数据并通过ElementUI的Table组件展示到页面上

vue：传page、pageSize、name作为参数

 async init () {
            const params = {
              page: this.page,
              pageSize: this.pageSize,
              name: this.input ? this.input : undefined
            }
            await getMemberList(params).then(res => {
              if (String(res.code) === '1') {
                this.tableData = res.data.records || []  
                this.counts = res.data.total  
                <!--因为records 和 totals,所以后端返回page对象-->
              }
            }).catch(err => {
              this.$message.error('请求出错了：' + err)
            })
          }

ajax请求:

function getMemberList (params) {
  return $axios({
    url: '/employee/page',
    method: 'get',
    params
  })
}

后端：
1.设置分页拦截器

//配置MP的分页插件
@Configuration
public class MybatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
        mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return  mybatisPlusInterceptor;
    }
}

2.Controller编写

    /**
     * 分页查询
     * @return
     */
    @GetMapping("/page")
    public R<Page> page(int page,int pageSize, String name){
    	//先测试参数是否可以正确传至后端
        log.info("page = {} ,pagesize={},name={}",page,pageSize,name);

        //构造分页构造器
        Page pageInfo = new Page(page,pageSize);

        //构造条件构造器
        LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper();
        queryWrapper.like(Strings.isNotEmpty(name),Employee::getName,name);

        //排序条件
        queryWrapper.orderByDesc(Employee::getUpdateTime);

        //执行查询
        employeeService.page(pageInfo,queryWrapper);

        return R.success(pageInfo);
    }