某马瑞吉外卖单体架构项目完整开发文档，基于 Spring Boot 2.7.11 + JDK 11。预计 5 月 20 日前更新完成，有需要的胖友记得一键三连，关注主页 “瑞吉外卖” 专栏获取最新文章。
相关资料：https://pan.baidu.com/s/1rO1Vytcp67mcw-PDe_7uIg?pwd=x548
提取码：x548
文章目录
- 1.需求分析
- 2.代码开发
- 3.功能测试
1.需求分析
员工登陆后，页面会跳转到系统首页面（backend/index.html），此时会显示当前用户的用户名信息。
这个信息其实就是上一文中提到的服务端传回前端，然后使用 localStorage.setItem('userInfo', JSON.stringify(res.data)) 存储在浏览器中的用户数据。当我们点击右侧的退出按钮即可退出系统，退出系统页面后应该跳回登陆页面。
那么，点击退出按钮后会访问什么地址呢？我们同样使用调试台一测便知：
可以看到，当我们点击退出登陆按钮后会以 POST 方式请求 ”/employee/logout“，这便是我们接下来要实现的功能。
具体处理逻辑如下：
- 清理 Session 域中存储的用户 id；
- 返回结果。
2.代码开发
EmployeeController 中用于处理退出登陆的代码如下：
/**
* 处理退出请求
* 说明：退出操作需要将 Session 中的员工 id 移除，因此需要一个 HttpServletRequest 参数
*
* @param request 请求对象
* @return 响应对象
*/
@PostMapping("/logout")
public R<String> logout(HttpServletRequest request) {
// 1.从 Session 中移除员工 id
request.getSession().removeAttribute("employee");
// 2.返回退出成功结果
return R.success("退出成功");
}
至此，我们的登陆退出功能就实现了，最终完整的 EmployeeController 代码如下：
package cn.javgo.reggie_take_out.controller;
import cn.javgo.reggie_take_out.common.R;
import cn.javgo.reggie_take_out.entity.Employee;
import cn.javgo.reggie_take_out.service.EmployeeService;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import lombok.extern.slf4j.Slf4j;
import org.springframework.util.DigestUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
/**
* @author: JavGo
* @description: TODO
* @date: 2023/5/13 16:14
*/
@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {
@Resource
private EmployeeService employeeService;
/**
* 处理登陆请求
* 说明：
* 1.由于前端携带的用户名和密码是以 JSON 形式提交的，所以需要使用 @RequestBody 注解将请求体中的 JSON 数据转换为 Employee 对象
* 2.由于前端传过来的是明文密码，所以需要对密码进行 MD5 加密处理
* 3.需要使用 HttpServletRequest 对象获取 session 对象，用于将登陆成功的用户信息存入 session 中，以便后续的请求可以直接获取到用户信息
*
* @param request 请求对象
* @param employee 员工对象
* @return 响应对象
*/
@PostMapping("/login")
public R<Employee> login(HttpServletRequest request, @RequestBody Employee employee) {
// 1.将页面提交的密码进行 MD5 加密处理
String password = employee.getPassword();
password = DigestUtils.md5DigestAsHex(password.getBytes());
// 2.根据用户名查询数据库
/*LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(Employee::getUsername,employee.getUsername());
Employee emp = employeeService.getOne(queryWrapper);*/
QueryWrapper<Employee> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("username", employee.getUsername());
Employee emp = employeeService.getOne(queryWrapper);
// 3.如果没有查询到则返回登录失败结果
if (emp == null) {
return R.error("登陆失败");
}
// 4.进行密码比对，如果不一致则返回登录失败结果
if (!emp.getPassword().equals(password)) {
return R.error("登陆失败");
}
// 5.查看员工状态，如果为已禁用状态，则返回员工已禁用结果
if (emp.getStatus() == 0) {
return R.error("账号已禁用");
}
// 6.登录成功，将员工 id 存入 Session 并返回登录成功结果
request.getSession().setAttribute("employee", emp.getId());
return R.success(emp);
}
/**
* 处理退出请求
* 说明：退出操作需要将 Session 中的员工 id 移除，因此需要一个 HttpServletRequest 参数
*
* @param request 请求对象
* @return 响应对象
*/
@PostMapping("/logout")
public R<String> logout(HttpServletRequest request) {
// 1.从 Session 中移除员工 id
request.getSession().removeAttribute("employee");
// 2.返回退出成功结果
return R.success("退出成功");
}
}
3.功能测试
在上面的后端代码中，我们从 Session 域中移除了员工 id，其实在前端的 static/backend/index.html 代码中也进行了浏览器端存储的用户信息的清楚操作。
对应代码如下：
注意：再次强调，由于我们的静态文件都是存储在项目的 resources/static 目录下，所以当出现 404 的时候，就需要留意是否前端代码的路径缺少了 ”static“。当然，为了一劳永逸，我们可以在 IDEA 中按 ctrl + R 快捷键打开替换，然后一次性地在所有 ”/backend“ 前加上 ”/static“。
下面以 ”/backend“ 为例，胖友自行对 “/front”也应该做同样的修改：
启动应用，成功登陆后台，然后 F12 打开调试工具查看存储的用户信息变化：
点击退出按钮，回到登陆页面，用户信息被清理：
