员工分页查询

[TOC]

简要描述

• 员工分页查询

前端页面和服务端交互过程

• 页面(backend/page/food/list.html)发送ajax请求，将分页查询参数(page、pageSize、name)提交到服务端，获取分页数据
• 页面发送请求，请求服务端进行图片下载，用于页面图片展示
• 服务端Controller接收页面提交的数据并调用Service查询数据
• Service调用Mapper操作数据库，查询分页数据
• Controller将查询到的分页数据响应给页面
• 页面接收到分页数据并通过ElementUI的Table组件展示到页面上

触发事件

<el-input
  v-model="input"
  placeholder="请输入员工姓名"
  style="width: 250px"
  clearable
   @keyup.enter.native="handleQuery"
>

接口调用

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
    }
  }).catch(err => {
    this.$message.error('请求出错了：' + err)
  })
},
handleQuery() {
  this.page = 1;
  this.init();
},

请求URL

• [context-path]/employee/page

请求方式

• get

API接口

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

参数

参数名	必选	类型	说明
page	是	int	页数
pageSize	是	int	页面大小
name	否	string	员工姓名

返回示例

code: 1
data: {records: [,…], total: 1, size: 5, current: 1, orders: [], optimizeCountSql: true, searchCount: true,…}
map: {}
msg: null

返回参数说明

参数名	类型	说明
code	int	返回码：1：成功 0或其它：失败
data	object	返回数据
map	map	动态数据
msg	string	错误信息

备注

• data有两种返回结果

public static <T> R<T> success(T object) {
    R<T> r = new R<T>();
    r.data = object;
    r.code = 1;
    return r;
}

public static <T> R<T> error(String msg) {
    R r = new R();
    r.msg = msg;
    r.code = 0;
    return r;
}

后端接口请求参数

• Spring Boot整合MyBatis实现分页

后端代码

@GetMapping("/page")
public R<Page> page(int page,int pageSize,String name){
    Page<Employee> page1 = new Page(page,pageSize);

    LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper();

    queryWrapper.like(StringUtils.isNotEmpty(name),Employee::getName,name);

    queryWrapper.orderByDesc(Employee::getUpdateTime);
    employeeService.page(page1,queryWrapper);

    return R.success(page1);
}