基于Springboot外卖系统07：员工分页查询+ 分页插件配置+分页代码实现

1. 员工分页查询

1.1 需求分析

在分页查询页面中, 以分页的方式来展示列表数据，以及查询条件 "员工姓名"。

请求参数
- 搜索条件：员工姓名(模糊查询)
- 分页条件：每页展示条数，页码
响应数据
- 总记录数
- 结果列表

1.2 程序执行流程

1.2.1 页面流程分析

A. 点击菜单，打开员工管理页面时，执行查询：

B. 搜索栏输入员工姓名,回车,执行查询:

1.2.2 数据流分析

1). 页面发送ajax请求，将分页查询参数(page、pageSize、name)提交到服务端

2). 服务端Controller接收页面提交的数据, 并组装条件调用Service查询数据

3). Service调用Mapper操作数据库，查询分页数据

4). Controller将查询到的分页数据, 响应给前端页面

5). 页面接收到分页数据, 并通过ElementUI的Table组件展示到页面上

2 前端代码介绍

1). 访问员工列表页面/member/list.html时, 会触发Vuejs中的钩子方法, 在页面初始化时调用created方法

从上述的前端代码中看到, 执行完分页查询, 因此给前端返回的信息中需要包含两项 : records 中封装结果列表, total中封装总记录数。

而在组装请求参数时 , page、pageSize 都是前端分页插件渲染时的参数；

2). 在getMemberList方法中, 通过axios发起异步请求

axios发起的异步请求会被声明在 request.js 中的request拦截器拦截, 在其中对get请求进行进一步的封装处理

3). 最终发送给服务端的请求为 : GET请求 , 请求链接 /employee/page?page=1&pageSize=10&name=xxx

3 代码实现

3.1 分页插件配置

当前我们要实现的分页查询功能，而在MybatisPlus要实现分页功能，就需要用到MybatisPlus中提供的分页插件，要使用分页插件，就要在配置类中声明分页插件的bean对象。

package com.itheima.reggie.config;import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;/*** Description: MP分页配置类* @date 2022/8/13 9:45*/@Configuration
public class MybatisPlusConfig {@Bean // Spring的@Bean注解用于告诉方法，产生一个Bean对象，然后这个Bean对象交给Spring管理。产生这个Bean对象的方法Spring只会调用一次，随后这个Spring将会将这个Bean对象放在自己的IOC容器中。//SpringIOC容器管理一个或者多个bean，这些bean都需要在@Configuration注解下进行创建，在一个方法上使用@Bean注解就表明这个方法需要交给Spring进行管理。public MybatisPlusInterceptor mybatisPlusInterceptor(){MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());return mybatisPlusInterceptor;}}

3.2 分页查询实现

页面在进行分页查询时，具体的请求信息如下:

请求	说明
请求方式	GET
请求路径	/employee/page
请求参数	page , pageSize , name

查询返回的结果数据data中应该封装两项信息, 分别为: records 封装分页列表数据, total 中封装符合条件的总记录数。

在定义controller方法的返回值类型R时, 直接将 MybatisPlus 分页查询的结果 Page 直接封装返回，因为Page中的属性如下:

3.2.2 代码实现:

package com.itheima.reggie.controller;import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.itheima.reggie.common.R;
import com.itheima.reggie.entity.Employee;
import com.itheima.reggie.service.EmployeeService;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.DigestUtils;
import org.springframework.web.bind.annotation.*;import javax.servlet.http.HttpServletRequest;
import java.time.LocalDateTime;@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {@Autowiredprivate EmployeeService employeeService;@PostMapping("/login")public R<Employee> login(HttpServletRequest request, @RequestBody Employee employee){/**@Description: 员工登陆* @param @RequestBody 传入的是json 故需要将其转化为实体类，json中的类名与实体类名对应才可以封装*          A. 由于需求分析时, 我们看到前端发起的请求为post请求, 所以服务端需要使用注解 @PostMapping*          B. 由于前端传递的请求参数为json格式的数据, 这里使用Employee对象接收, 但是将json格式数据封装到实体类中, 在形参前需要加注解@RequestBody* @return com.itheima.reggie.common.R<com.itheima.reggie.entity.Employee>* @version v1.0* @author LiBiGo* @date 2022/8/12 11:32*///  ①. 将页面提交的密码password进行md5加密处理, 得到加密后的字符串String password = employee.getPassword();password = DigestUtils.md5DigestAsHex(password.getBytes());//  ②. 根据页面提交的用户名username查询数据库中员工数据信息LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>();queryWrapper.eq(Employee::getUsername,employee.getUsername());Employee emp = employeeService.getOne(queryWrapper); //在数据库中用户名是唯一的，所以可以用getone()//  ③. 如果没有查询到, 则返回登录失败结果if (emp == null){return R.error("用户名不存在");}//  ④. 密码比对，如果不一致, 则返回登录失败结果if(!emp.getPassword().equals(password)){return R.error("密码失败");}//  ⑤. 查看员工状态，如果为已禁用状态，则返回员工已禁用结果if(emp.getStatus() == 0){return R.error("账户已禁用");}//  ⑥. 登录成功，将员工id存入Session, 并返回登录成功结果request.getSession().setAttribute("employee",emp.getId());return R.success(emp);}@PostMapping("/logout")public R<String> logout(HttpServletRequest request){/**@Description:  /employee/logout 员工退出* @author LiBiGo* @date 2022/8/12 12:09*///  清理Session中保存的当前登录员工的idrequest.getSession().removeAttribute("employee");//  返回结果return R.success("退出成功");}@PostMappingpublic R<String> save(HttpServletRequest request,@RequestBody Employee employee){/**@Description: 用于保存用户员工信息。** B. 在组装员工信息时, 还需要封装创建时间、修改时间，创建人、修改人信息(从session中获取当前登录用户)。* @author LiBiGo* @date 2022/8/12 17:25*/log.info("新增员工，员工信息：{}",employee.toString());// A. 在新增员工时，设置初始密码，需要进行MD5加密处理employee.setPassword(DigestUtils.md5DigestAsHex("123456".getBytes()));// B. 在组装员工信息时, 需封装创建时间、修改时间，创建人、修改人信息(从session中获取当前登录用户)。employee.setCreateTime(LocalDateTime.now());employee.setUpdateTime(LocalDateTime.now());//获得当前登录员工用户的idLong empId = (Long) request.getSession().getAttribute("employee");employee.setCreateUser(empId); // 创建员工信息的人employee.setUpdateUser(empId); // 最后一次更新信息的人employeeService.save(employee); // 因为employeeService继承了，所以不用写，直接用log.info("新增员工成功");return R.success("新增员工成功");}@GetMapping("page")public R<Page> page(int page,int pageSize,String name){/**@Description: 员工分页查询* @param page 当前查询页码* @param pageSize 每页展示记录数* @param name 员工姓名 - 可选参数* @author LiBiGo* @date 2022/8/13 9:51*/log.info("page = {},pageSize = {},name = {}" ,page,pageSize,name);//构造分页构造器Page pageInfo = new Page(page,pageSize);//构造条件构造器LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>();//添加过滤条件queryWrapper.like(StringUtils.isNotEmpty(name),Employee::getName,name); // 当name不为null，则进行添加过滤//排序条件queryWrapper.orderByDesc(Employee::getUpdateTime);//执行查询employeeService.page(pageInfo,queryWrapper); //结果自动放入 pageInfo，不需要传参return R.success(pageInfo);}}