在分页查询页面中, 以分页的方式来展示列表数据,以及查询条件 "员工姓名"。
请求参数
搜索条件: 员工姓名(模糊查询)
分页条件: 每页展示条数 , 页码
响应数据
总记录数
结果列表
A. 点击菜单,打开员工管理页面时,执行查询:
B. 搜索栏输入员工姓名,回车,执行查询:
1). 页面发送ajax请求,将分页查询参数(page、pageSize、name)提交到服务端
2). 服务端Controller接收页面提交的数据, 并组装条件调用Service查询数据
3). Service调用Mapper操作数据库,查询分页数据
4). Controller将查询到的分页数据, 响应给前端页面
5). 页面接收到分页数据, 并通过ElementUI的Table组件展示到页面上
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
当前我们要实现的分页查询功能,而在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;
- }
-
- }
页面在进行分页查询时, 具体的请求信息如下:
请求 | 说明 |
---|---|
请求方式 | GET |
请求路径 | /employee/page |
请求参数 | page , pageSize , name |
查询返回的结果数据data中应该封装两项信息, 分别为: records 封装分页列表数据, total 中封装符合条件的总记录数。
在定义controller方法的返回值类型R时, 直接将 MybatisPlus 分页查询的结果 Page 直接封装返回,因为Page中的属性如下:
- 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 {
- @Autowired
- private EmployeeService employeeService;
-
- @PostMapping("/login")
- public R
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
- * @version v1.0
- * @author LiBiGo
- * @date 2022/8/12 11:32
- */
- // ①. 将页面提交的密码password进行md5加密处理, 得到加密后的字符串
- String password = employee.getPassword();
- password = DigestUtils.md5DigestAsHex(password.getBytes());
- // ②. 根据页面提交的用户名username查询数据库中员工数据信息
- LambdaQueryWrapper
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
logout(HttpServletRequest request){ - /**@Description: /employee/logout 员工退出
- * @author LiBiGo
- * @date 2022/8/12 12:09
- */
- // 清理Session中保存的当前登录员工的id
- request.getSession().removeAttribute("employee");
- // 返回结果
- return R.success("退出成功");
- }
-
- @PostMapping
- public R
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());
-
- //获得当前登录员工用户的id
- Long 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(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
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);
- }
-
- }
代码编写完毕之后,我们需要将工程重启, 完毕之后直接访问管理系统首页, 默认就会打开员工管理的列表页面, 我们可以查看列表数据是否可以正常展示, 也可以通过分页插件来测试分页功能, 及员工姓名的模糊查询功能。
在进行测试时,可以使用浏览器的监控工具查看页面和服务端的数据交互细节。 并借助于debug的形式, 根据服务端参数接收及逻辑执行情况。