文章目录
- 07员工分页查询+ 分页插件配置+分页代码实现
- 08员工账号状态管理功能+对象转换器+扩展Spring mvc的消息转换器
- 09员工信息编辑+员工信息保存
- 1 编辑员工信息功能
- 1.1 需求分析
- 1.2 程序执行流程
- 1). 点击编辑按钮时,页面跳转到add.html,并在url中携带参数[员工id]
- 2). 在add.html页面获取url中的参数[员工id]
- 3). 发送[ajax](https://so.csdn.net/so/search?q=ajax&spm=1001.2101.3001.7020)请求,请求服务端,同时提交员工id参数
- 4). 服务端接收请求,根据员工id查询员工信息,将员工信息以json形式响应给页面
- 5). 页面接收服务端响应的json数据,通过VUE的数据绑定进行员工信息回显
- 6). 点击保存按钮,发送ajax请求,将页面中的员工信息以json方式提交给服务端
- 7). 服务端接收员工信息,并进行处理,完成后给页面响应
- 8). 页面接收到服务端响应信息后进行相应处理
- 2 Api接口与代码实现
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.fc.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;
/**
*MP分页配置类
*/
@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 分页查询实现
3.2.1分页实现分析
页面在进行分页查询时, 具体的请求信息如下:
请求 | 说明 |
---|---|
请求方式 | GET |
请求路径 | /employee/page |
请求参数 | page,pageSize,name |
查询返回的结果数据data中应该封装两项信息, 分别为: records 封装分页列表数据, total 中封装符合条件的总记录数。
在定义controller方法的返回值类型R时, 直接将 MybatisPlus 分页查询的结果 Page 直接封装返回,因为Page中的属性如下:
3.2.2 代码实现
package com.fc.reggie.controller;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.fc.reggie.common.R;
import com.fc.reggie.entity.Employee;
import com.fc.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){
/**
*员工登陆
* @param @RequestBody 传入的是json 故需要将其转化为实体类,json中的类名与实体类名对应才可以封装
* A. 由于需求分析时, 我们看到前端发起的请求为post请求, 所以服务端需要使用注解 @PostMapping
* B. 由于前端传递的请求参数为json格式的数据, 这里使用Employee对象接收, 但是将json格式数据封装到实体类中, 在形参前需要加注解@RequestBody
*/
// ①. 将页面提交的密码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){
/*
员工退出
*/
// 清理Session中保存的当前登录员工的id
request.getSession().removeAttribute("employee");
// 返回结果
return R.success("退出成功");
}
@PostMapping
public R<String> save(HttpServletRequest request,@RequestBody Employee employee){
/**
*用于保存用户员工信息。
*
* B. 在组装员工信息时, 还需要封装创建时间、修改时间,创建人、修改人信息(从session中获取当前登录用户)。
*/
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){
/*
*员工分页查询
* @param page 当前查询页码
* @param pageSize 每页展示记录数
* @param name 员工姓名 - 可选参数
*/
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.3功能测试
代码编写完毕之后,我们需要将工程重启, 完毕之后直接访问管理系统首页, 默认就会打开员工管理的列表页面, 我们可以查看列表数据是否可以正常展示, 也可以通过分页插件来测试分页功能, 及员工姓名的模糊查询功能。
在进行测试时,可以使用浏览器的监控工具查看页面和服务端的数据交互细节。 并借助于debug的形式, 根据服务端参数接收及逻辑执行情况。
08员工账号状态管理功能+对象转换器+扩展Spring mvc的消息转换器
1 员工账号状态管理
1.1 需求分析
在员工管理列表页面,可以对某个员工账号进行启用或者禁用操作。账号禁用的员工不能登录系统,启用后的员工可以正常登录。如果某个员工账号状态为正常,则按钮显示为 “禁用”,如果员工账号状态为已禁用,则按钮显示为"启用"。
只有管理员(admin用户)可以对其他普通用户进行启用、禁用操作,普通用户登录系统后启用、禁用按钮不显示。
A. admin 管理员登录
B. 普通用户登录
1.2 程序执行流程
1.2.1 页面按钮动态展示
只有管理员(admin用户)可以对其他普通用户进行启用、禁用操作,所以普通用户登录系统后启用、禁用按钮不显示:
1). 在列表页面(list.html)加载时, 触发钩子函数created, 在钩子函数中, 会从localStorage中获取到用户登录信息, 然后获取到用户名
2). 在页面中, 通过Vue指令v-if进行判断,如果登录用户为admin将展示 启用/禁用 按钮, 否则不展示
1.2.2 执行流程分析
1). 当管理员admin点击 “启用” 或 “禁用” 按钮时, 调用方法statusHandle
scope.row : 获取到的是这一行的数据信息
2). statusHandle方法中进行二次确认, 然后发起ajax请求, 传递id、status参数
最终发起异步请求, 请求服务端, 请求信息如下:
请求 | 说明 |
---|---|
请求方式 | PUT |
请求路径 | /employee |
请求参数 | {“id”:xxx,“status”:xxx} |
**{...params}** : 三点是ES6中出现的扩展运算符。作用是遍历当前使用的对象能够访问到的所有属性,并将属性放入当前对象中。
1.3 员工账号状态管理程序流程
A.页面发送ajax请求,将参数(id、status)提交到服务端
B. 服务端Controller接收页面提交的数据并调用Service更新数据
C. Service调用Mapper操作数据库
1.4 员工账号状态管理代码实现
启用、禁用员工账号,本质即对status状态字段进行更新操作。在Controller中创建update方法,此方法是一个通用的修改员工信息的方法。
package com.fc.reggie.controller;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.fc.reggie.common.R;
import com.fc.reggie.entity.Employee;
import com.fc.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){
/**
*员工登陆
* @param @RequestBody 传入的是json 故需要将其转化为实体类,json中的类名与实体类名对应才可以封装
* A. 由于需求分析时, 我们看到前端发起的请求为post请求, 所以服务端需要使用注解 @PostMapping
* B. 由于前端传递的请求参数为json格式的数据, 这里使用Employee对象接收, 但是将json格式数据封装到实体类中, 在形参前需要加注解@RequestBody
*/
// ①. 将页面提交的密码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){
/*
*员工退出
*/
// 清理Session中保存的当前登录员工的id
request.getSession().removeAttribute("employee");
// 返回结果
return R.success("退出成功");
}
@PostMapping
public R<String> save(HttpServletRequest request,@RequestBody Employee employee){
/*
*用于保存用户员工信息。
*
* B. 在组装员工信息时, 还需要封装创建时间、修改时间,创建人、修改人信息(从session中获取当前登录用户)。
*/
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){
/*
*员工分页查询
* @param page 当前查询页码
* @param pageSize 每页展示记录数
* @param name 员工姓名 - 可选参数
*/
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);
}
@PutMapping
public R<String> update(HttpServletRequest request,@RequestBody Employee employee){
/**
*根据id修改员工信息,传入员工的所有信息,再根据员工id进行数据库的替换
*/
log.info("更新的用户信息{}",employee.toString()); // 传入的
Long empId = (Long)request.getSession().getAttribute("employee"); //获取emp的id
employee.setUpdateTime(LocalDateTime.now()); //设置更新时间
employee.setUpdateUser(empId); // 设置更新人
employeeService.updateById(employee);
return R.success("员工信息修改成功");
}
}
1.5 功能测试
重启工程,访问前端页面, 进行 “启用” 或 “禁用” 的测试。
测试过程中没有报错,但是功能并没有实现,查看数据库中的数据也没有变化。但是从控制台输出的日志, 可以看出确实没有更新成功。
而在我们的数据库表结构中, 并不存在该ID, 数据库的ID为1420038345634918401
2 对象转换器+扩展Spring mvc的消息转换器
2.1 原因分析
2.1.1 现象
通过观察控制台输出的SQL发现页面传递过来的员工id的值和数据库中的id值不一致
在分页查询时,服务端会将返回的R对象进行json序列化,转换为json格式的数据,而员工的ID是一个Long类型的数据,而且是一个长度为 19 位的长整型数据, 该数据返回给前端是没有问题的。
2.1.2 具体的问题原因
前端JS对长度较长的长整型数据进行处理时,会损失精度,从而导致提交的id和数据库中的id不一致。
2.1.3 解决方案
解决方案:将js处理的ID数据类型转为字符串类型, 这样不损失精度。
在业务中, 让分页查询返回的json格式数据库中long类型的属性, 不直接转换为数字类型, 而转换为字符串类型就可以解决这个问题 , 最终返回的结果为 :
2.2 代码修复
由于在SpringMVC中, 将Controller方法返回值转换为json对象, 是通过jackson来实现的, 涉及到SpringMVC中的一个消息转换器MappingJackson2HttpMessageConverter, 因此需要对该消息转换器的功能进行拓展。
2.2.1 具体实现步骤:
1). 提供对象转换器JacksonObjectMapper,基于Jackson进行Java对象到json数据的转换
2). 在WebMvcConfig配置类中扩展Spring mvc的消息转换器,在此消息转换器中使用提供的对象转换器进行Java对象到json数据的转换
1). 引入JacksonObjectMapper
package com.fc.reggie.common;
import com.fasterxml.jackson.databind.DeserializationFeature;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.module.SimpleModule;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
import com.fasterxml.jackson.datatype.jsr310.deser.LocalDateDeserializer;
import com.fasterxml.jackson.datatype.jsr310.deser.LocalDateTimeDeserializer;
import com.fasterxml.jackson.datatype.jsr310.deser.LocalTimeDeserializer;
import com.fasterxml.jackson.datatype.jsr310.ser.LocalDateSerializer;
import com.fasterxml.jackson.datatype.jsr310.ser.LocalDateTimeSerializer;
import com.fasterxml.jackson.datatype.jsr310.ser.LocalTimeSerializer;
import java.math.BigInteger;
import java.time.LocalDate;
import java.time.LocalDateTime;
import java.time.LocalTime;
import java.time.format.DateTimeFormatter;
import static com.fasterxml.jackson.databind.DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES;
/**
* 对象映射器:基于jackson将Java对象转为json,或者将json转为Java对象
* 将JSON解析为Java对象的过程称为 [从JSON反序列化Java对象]
* 从Java对象生成JSON的过程称为 [序列化Java对象到JSON]
* 该自定义的对象转换器, 主要指定在进行json数据序列化及反序列化时, LocalDateTime、LocalDate、LocalTime的处理方式, 以及BigInteger及Long类型数据,直接转换为字符串。
*/
public class JacksonObjectMapper extends ObjectMapper {
public static final String DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
public static final String DEFAULT_DATE_TIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
public static final String DEFAULT_TIME_FORMAT = "HH:mm:ss";
public JacksonObjectMapper() {
super();
//收到未知属性时不报异常
this.configure(FAIL_ON_UNKNOWN_PROPERTIES, false);
//反序列化时,属性不存在的兼容处理
this.getDeserializationConfig().withoutFeatures(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES);
SimpleModule simpleModule = new SimpleModule()
.addDeserializer(LocalDateTime.class, new LocalDateTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
.addDeserializer(LocalDate.class, new LocalDateDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
.addDeserializer(LocalTime.class, new LocalTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)))
.addSerializer(BigInteger.class, ToStringSerializer.instance)
.addSerializer(Long.class, ToStringSerializer.instance) // 将long转化为string,可以解决前端页面不能正确显示超过固定尾位数的数字
.addSerializer(LocalDateTime.class, new LocalDateTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
.addSerializer(LocalDate.class, new LocalDateSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
.addSerializer(LocalTime.class, new LocalTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)));
//注册功能模块 例如,可以添加自定义序列化器和反序列化器
this.registerModule(simpleModule);
}
}
2). 在WebMvcConfig中重写方法extendMessageConverters
package com.fc.reggie.config;
import com.fc.reggie.common.JacksonObjectMapper;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
import java.util.List;
//配置类
@Slf4j
@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport {
/*
*设置静态资源的映射
* @param
* @return
*/
@Override
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
log.info("静态资源开始映射......");
registry.addResourceHandler("/backend/**").addResourceLocations("classpath:/backend/");
registry.addResourceHandler("/front/**").addResourceLocations("classpath:/front/");
log.info("静态资源映射成功");
}
@Override
protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
/**
*扩展mvc框架的消息转换器,项目启动时即调用,
*/
log.info("扩展消息转换器...");
// 创建消息转换器
MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();
// 设置对象转换器,底层使用将jackson将java对象转化为json
messageConverter.setObjectMapper(new JacksonObjectMapper());
// 将上面的消息转化器对象追加到mvc的转化器集合中
converters.add(0,messageConverter); // 将我们的转化器放在最前面,实现优先使用
}
}
2.2.4测试成功
09员工信息编辑+员工信息保存
1 编辑员工信息功能
1.1 需求分析
在员工管理列表页面点击 “编辑” 按钮,跳转到编辑页面,在编辑页面回显员工信息并进行修改,最后点击 “保存” 按钮完成编辑操作。
那么从上述的分析中,当前实现的编辑功能需要实现两个方法:
A. 根据ID查询, 用于页面数据回显
B. 保存修改
1.2 程序执行流程
1). 点击编辑按钮时,页面跳转到add.html,并在url中携带参数[员工id]
2). 在add.html页面获取url中的参数[员工id]
3). 发送ajax请求,请求服务端,同时提交员工id参数
4). 服务端接收请求,根据员工id查询员工信息,将员工信息以json形式响应给页面
5). 页面接收服务端响应的json数据,通过VUE的数据绑定进行员工信息回显
6). 点击保存按钮,发送ajax请求,将页面中的员工信息以json方式提交给服务端
7). 服务端接收员工信息,并进行处理,完成后给页面响应
8). 页面接收到服务端响应信息后进行相应处理
注意:add.html页面为公共页面,新增员工和编辑员工都是在此页面操作
2 Api接口与代码实现
2.1 根据ID查询Api
在根据ID查询员工信息时,请求信息如下:
请求 | 说明 |
---|---|
请求方式 | GET |
请求路径 | /employee/{id} |
2.2 修改员工Api
在修改员工信息时,请求信息如下:
请求 | 说明 |
---|---|
请求方式 | PUT |
请求路径 | /employee |
请求参数 | {…}json格式数据 |
2.3 员工信息编辑+员工信息保存代码实现
在EmployeeController中增加方法, 根据ID查询员工信息,然后在使用根据ID更新员工信息功能。
package com.fc.reggie.controller;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.fc.reggie.common.R;
import com.fc.reggie.entity.Employee;
import com.fc.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){
/**
* 员工登陆
* @param @RequestBody 传入的是json 故需要将其转化为实体类,json中的类名与实体类名对应才可以封装
* A. 由于需求分析时, 我们看到前端发起的请求为post请求, 所以服务端需要使用注解 @PostMapping
* B. 由于前端传递的请求参数为json格式的数据, 这里使用Employee对象接收, 但是将json格式数据封装到实体类中, 在形参前需要加注解@RequestBody
*/
// ①. 将页面提交的密码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){
/*
*员工退出
*/
// 清理Session中保存的当前登录员工的id
request.getSession().removeAttribute("employee");
// 返回结果
return R.success("退出成功");
}
@PostMapping
public R<String> save(HttpServletRequest request,@RequestBody Employee employee){
/*
*用于保存用户员工信息。
* B. 在组装员工信息时, 还需要封装创建时间、修改时间,创建人、修改人信息(从session中获取当前登录用户)。
*/
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){
/*
*员工分页查询
* @param page 当前查询页码
* @param pageSize 每页展示记录数
* @param name 员工姓名 - 可选参数
*/
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);
}
@PutMapping
public R<String> update(HttpServletRequest request,@RequestBody Employee employee){
/*
*根据id修改员工信息,传入员工的所有信息,再根据员工id进行数据库的替换
*/
log.info("更新的用户信息{}",employee.toString()); // 传入的
Long empId = (Long)request.getSession().getAttribute("employee"); //获取emp的id
employee.setUpdateTime(LocalDateTime.now()); //设置更新时间
employee.setUpdateUser(empId); // 设置更新人
employeeService.updateById(employee);
return R.success("员工信息修改成功");
}
@GetMapping("/{id}")
// @PathVariable 路径变量
private R<Employee> getById(@PathVariable Long id){
log.info("根据id查询员工信息");
Employee employee = employeeService.getById(id);
if (employee != null){
return R.success(employee);
}
return R.error("没有查询到员工信息");
}
}
2.4 功能测试
yee employee){
/*
*根据id修改员工信息,传入员工的所有信息,再根据员工id进行数据库的替换
*/
log.info(“更新的用户信息{}”,employee.toString()); // 传入的
Long empId = (Long)request.getSession().getAttribute(“employee”); //获取emp的id
employee.setUpdateTime(LocalDateTime.now()); //设置更新时间
employee.setUpdateUser(empId); // 设置更新人
employeeService.updateById(employee);
return R.success(“员工信息修改成功”);
}
@GetMapping("/{id}")
// @PathVariable 路径变量
private R<Employee> getById(@PathVariable Long id){
log.info("根据id查询员工信息");
Employee employee = employeeService.getById(id);
if (employee != null){
return R.success(employee);
}
return R.error("没有查询到员工信息");
}
}
### 2.4 功能测试
将工程重启访问前端页面, 按照前面分析的操作流程进行测试,查看数据是否正常修改即可。