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

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

1. 员工分页查询


1.1 需求分析


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


0f695fede572475c8f8a96d0ae8e96f8.png


  • 请求参数


  • 搜索条件: 员工姓名(模糊查询)


  • 分页条件: 每页展示条数 , 页码


  • 响应数据


  • 总记录数


  • 结果列表


1.2 程序执行流程


1.2.1 页面流程分析


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


4ab915aeff5e44399b8b47f28a5c0737.png


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


a8955cd1a9154bc091ec24d9a016df25.png


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方法


8ab9ef72253f4c93b2a66959d72290d5.png


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


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


23f4f76830f94cf8bdd34e116596c4f0.png


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


e824825b6a004b4baabcb675a09d64f9.png


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


5d0d805f6d9a4567bb3a117ec3fb604a.png


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中的属性如下:


3ff645e5ea514252969cc0c7823c9a27.png


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 {
    @Autowired
    private 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中保存的当前登录员工的id
        request.getSession().removeAttribute("employee");
        //  返回结果
        return R.success("退出成功");
    }
    @PostMapping
    public 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());
        //获得当前登录员工用户的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> 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);
    }
}


3.4 功能测试


代码编写完毕之后,我们需要将工程重启, 完毕之后直接访问管理系统首页, 默认就会打开员工管理的列表页面, 我们可以查看列表数据是否可以正常展示, 也可以通过分页插件来测试分页功能, 及员工姓名的模糊查询功能。


在进行测试时,可以使用浏览器的监控工具查看页面和服务端的数据交互细节。 并借助于debug的形式, 根据服务端参数接收及逻辑执行情况。


6fe07c6aa30e4c4dafd804b9892c5cb5.png

目录
相关文章
|
10天前
|
安全 Java API
SpringBoot + 事务钩子函数,打造高效支付系统!
【8月更文挑战第9天】在当今快速发展的数字支付时代,构建一个稳定、高效且安全的支付系统是企业数字化转型的关键一步。SpringBoot以其简洁的配置、快速的开发速度以及强大的生态支持,成为了构建支付系统的热门选择。而结合事务钩子函数(Transaction Hooks),则能进一步确保支付流程的完整性、一致性和可维护性。以下,我将分享如何利用SpringBoot与事务钩子函数来打造高效支付系统的技术实践。
39 15
SpringBoot + 事务钩子函数,打造高效支付系统!
|
3天前
|
Java 数据安全/隐私保护 Spring
揭秘Spring Boot自定义注解的魔法:三个实用场景让你的代码更加优雅高效
揭秘Spring Boot自定义注解的魔法:三个实用场景让你的代码更加优雅高效
|
5天前
|
JavaScript 前端开发 Java
SpringBoot 引入 smart-doc 接口文档管理插件,以及统一接口返回,最后推送到 Torna,进行统一管理
本文介绍了如何在SpringBoot项目中整合smart-doc接口文档管理插件,实现接口文档的生成和统一管理,并展示了如何将文档推送到Torna接口文档管理系统进行进一步的集中管理。
11 0
SpringBoot 引入 smart-doc 接口文档管理插件,以及统一接口返回,最后推送到 Torna,进行统一管理
|
5天前
|
Java 数据库连接 mybatis
基于SpringBoot+MyBatis的餐饮点餐系统
本文介绍了一个基于SpringBoot和MyBatis开发的餐饮点餐系统,包括系统的主控制器`IndexController`的代码实现,该控制器负责处理首页、点餐、登录、注册、订单管理等功能,适用于毕业设计项目。
9 0
基于SpringBoot+MyBatis的餐饮点餐系统
|
9天前
|
安全 Java Shell
"SpringBoot防窥秘籍大公开!ProGuard混淆+xjar加密,让你的代码穿上隐形斗篷,黑客也无奈!"
【8月更文挑战第11天】开发SpringBoot应用时,保护代码免遭反编译至关重要。本文介绍如何运用ProGuard和xjar强化安全性。ProGuard能混淆代码,去除未使用的部分,压缩字节码,使反编译困难。需配置ProGuard规则文件并处理jar包。xjar则进一步加密jar包内容,即使被解压也无法直接读取。结合使用这两种工具可显著提高代码安全性,有效保护商业机密及知识产权。
36 3
|
15天前
|
Java API 数据格式
Spring Boot API参数读取秘籍大公开!6大神器助你秒变参数处理大师,让你的代码飞起来!
【8月更文挑战第4天】Spring Boot凭借其便捷的开发和配置特性,成为构建微服务的热门选择。高效处理HTTP请求参数至关重要。本文介绍六种核心方法:查询参数利用`@RequestParam`;路径变量采用`@PathVariable`;请求体通过`@RequestBody`自动绑定;表单数据借助`@ModelAttribute`或`@RequestParam`;请求头使用`@RequestHeader`;Cookie则依靠`@CookieValue`。每种方法针对不同场景,灵活运用可提升应用性能与用户体验。
39 9
|
21天前
|
存储 Java Serverless
Java Spring Boot应用如何实现推送代码到指定仓库并自动部署
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)