瑞吉外卖后台系统登录、退出功能-自学笔记
文章目录
- 登录功能
-
- 需求分析：
- 代码实现：
-
- 1. Employee实体类
- 2. Mapper
- 3. Service
- 4. Impl
- 5. Controller
- 6 返回结果类R
- 7 代码实现
-
- 1）将页面提交的密码进行md5加密处理
- 2）根据页面提交的用户名查询数据库
- 3）如果没有查询到则返回登录失败
- 4）密码比对，如果不一致则返回登录失败
- 5）查看员工状态，如果为已禁用状态，则返回员工已禁用结果
- 6）登录成功，将员工id存入session并返回登录成功
- 退出功能
-
- 需求分析
- 代码实现
- 完整代码
- 完善登录功能
-
- 问题分析
- 代码开发
登录功能
需求分析：
点击登录按钮后提示404错误是因为后台系统还没有响应此次请求的处理器，所以需要创建相关类来处理登录请求。
后端实现过程：
Controller→Service→Mapper→DB
通过Controller把前端发送的用户名密码接收到，然后调用Service，由Service调用Mapper查询数据库，最后判断接收到的数据和数据库中的数据是否一致（查询employee表）
前端实现过程：
<el-form-item style="width:100%;">
<el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;"
@click.native.prevent="handleLogin">
<span v-if="!loading">登录span>
<span v-else>登录中...span>
el-button>
el-form-item>
点击登录按钮后会调用 “handleLogin”方法
methods: {
async handleLogin() {
// validate 用来校验用户名密码是否为空
this.$refs.loginForm.validate(async (valid) => {
// 如果校验通过
if (valid) {
// 通过登录按钮的v-if 将 “登录” 变成“登录中...” 由下图可见
this.loading = true
// 调用loginApi 方法
let res = await loginApi(this.loginForm)
// res用来接收请求的结果
if (String(res.code) === '1') { // 1表示登录成功
// 将数据转换成JSON形式，然后保存到浏览器中
localStorage.setItem('userInfo',JSON.stringify(res.data))
// 然后跳转到主页面
window.location.href= '/backend/index.html'
} else { // code!=1,登录失败
this.$message.error(res.msg)
this.loading = false
}
}
})
}
}
res的code、data、msg 都是需要由后端响应给前端的
↓↓↓↓↓↓
function loginApi(data) {
return $axios({
'url': '/employee/login',
'method': 'post',
// 这里的data就是handleLogin中的loginForm（用户名、密码）
data
})
}
function logoutApi(){
return $axios({
'url': '/employee/logout',
'method': 'post',
})
}
代码实现：
1. Employee实体类
实体类都需要放在entity包中，而且实体类中的字段必须和数据库中的字段一样，如果数据库有中带下划线的字段则需要将下划线去掉然后将下换线后的第一个字母大写，即[**驼峰命名法**](https://baike.baidu.com/item/%E9%A9%BC%E5%B3%B0%E5%91%BD%E5%90%8D%E6%B3%95/7560610)。
eg: id_number → idNumber
package com.itheima.reggie.entity;
import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;
import java.io.Serializable;
import java.time.LocalDateTime;
@Data
public class Employee implements Serializable {
private static final long serialVersionUID = 1L;
private Long id;
private String username;
private String name;
private String password;
private String phone;
private String sex;
private String idNumber;
private Integer status;
private LocalDateTime createTime;
private LocalDateTime updateTime;
@TableField(fill = FieldFill.INSERT)
private Long createUser;
@TableField(fill = FieldFill.INSERT_UPDATE)
private Long updateUser;
}
2. Mapper
package com.itheima.reggie.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.itheima.reggie.entity.Employee;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface EmployeeMapper extends BaseMapper<Employee> {
}
3. Service
package com.itheima.reggie.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.itheima.reggie.entity.Employee;
public interface EmployeeService extends IService<Employee> {
}
4. Impl
package com.itheima.reggie.service.impl;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.itheima.reggie.entity.Employee;
import com.itheima.reggie.mapper.EmployeeMapper;
import com.itheima.reggie.service.EmployeeService;
import org.springframework.stereotype.Service;
@Service
public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper,Employee> implements EmployeeService {
}
5. Controller
package com.itheima.reggie.controller;
import com.itheima.reggie.service.EmployeeService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
}
6 返回结果类R
package com.itheima.reggie.common;
import lombok.Data;
import java.util.HashMap;
import java.util.Map;
/**
* 通用的返回结果类，服务端响应的数据最终都会封装成此对象
* @param
*/
@Data
public class R<T> {
private Integer code; //编码：1成功，0和其它数字为失败
private String msg; //错误信息
private T data; //数据
private Map map = new HashMap(); //动态数据
public static <T> R<T> success(T object) {
R<T> r = new R<T>();
r.data = object;
r.code = 1;
return r;
}
public static <T> R<T> error(String msg) {
R r = new R();
r.msg = msg;
r.code = 0;
return r;
}
public R<T> add(String key, Object value) {
this.map.put(key, value);
return this;
}
}
代码放在上面了，我又深入学习了一下“返回结果类”, 感兴趣的小伙伴可以去看看我写的返回结果类笔记
7 代码实现
1）将页面提交的密码进行md5加密处理
String password = employee.getPassword();
password = DigestUtils.md5DigestAsHex(password.getBytes());
2）根据页面提交的用户名查询数据库
LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(Employee::getUsername,employee.getUsername());
// 因为数据库中username是唯一的，所以这里调用getOne方法
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);
退出功能
需求分析
用户点击页面中退出按钮，发送请求，请求地址为/employee/logout,请求方式为POST，我们只需要在Controller中创建对应的处理方法即可
代码实现
/**
* 员工退出功能
* @param request
* @return
*/
@PostMapping("/logout")
public R<String> logout(HttpServletRequest request){
request.getSession().removeAttribute("employee");
return R.success("退出成功！！");
}
完整代码
package com.itheima.reggie.controller;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
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.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.DigestUtils;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
/**
* 员工登录
* @param request
* @param employee
* @return
*/
@PostMapping("/login")
// 加了@RequestBody 才能接收到前端发送来的JSON数据
// 前端发送过来的数据，要和Employee实体类一一对应，否则无法封装
// HttpServletRequest 是为了登录成功之后，把Employee对象的id存到Session中，便于后期获取当前登录用户（用request的getSession）
public R<Employee> login(HttpServletRequest request, @RequestBody Employee employee){
/**
*
*
* 5查看员工状态，如果为已禁用状态，则返回员工已禁用结果
* 6登录成功，将员工id存入session并返回登录成功
*/
// 1、将页面提交的密码进行md5加密处理
String password = employee.getPassword();
password = DigestUtils.md5DigestAsHex(password.getBytes());
// 2、根据页面提交的用户名查询数据库
LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(Employee::getUsername,employee.getUsername());
// 因为数据库中username是唯一的，所以这里调用getOne方法
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);
}
}
完善登录功能
问题分析
目前如果我们直接访问首页的地址，是不需要登录就能过直接进入的，这是不安全的，所以需要使用拦截器或过滤器来限制一下只有登录之后才能够访问首页，如果不登录就会直接跳转到登录页面。
代码开发
- 创建自定义过滤器LoginCheckFilter
1）在目录中创建filter包用来存放各种过滤器
2）创建LoginCheckFilter类
3）接上javax.servlet下的Filter接口
4）实现Filter接口的doFilter方法
5）加入注解@WebFilter，filterName可以自己定义，/*是拦截所有的请求，后期会放行某些请求
@WebFilter(filterName = "loginCheckFilter",urlPatterns = "/*")
6）加入注解@Slf4j，打印拦截信息
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) servletRequest;
log.info("拦截到请求：{}",request.getRequestURI());
}
7）将拦截到的信息放行
HttpServletResponse response = (HttpServletResponse) servletResponse;
filterChain.doFilter(request,response);
- 在启动类上加入注解@ServletComponentScan
- 完善过滤器的处理逻辑
1）获取本次请求的URI
——定义不需要处理的请求
——路径匹配器，支持通配符
2）判断本次请求是否需要处理
3）如果不需要处理，则直接放行
4）判断登录状态，如果已登录，则直接放行
5）如果未登录则返回未登录结果
package com.itheima.reggie.filter;
import com.alibaba.fastjson.JSON;
import com.itheima.reggie.common.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.util.AntPathMatcher;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(filterName = "loginCheckFilter",urlPatterns = "/*")
@Slf4j
public class LoginCheckFilter implements Filter {
// 路径匹配器，支持通配符
public static final AntPathMatcher PATH_MATCHER = new AntPathMatcher();
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) servletRequest;
HttpServletResponse response = (HttpServletResponse) servletResponse;
// 1）获取本次请求的URI
String requestURI = request.getRequestURI();
// 定义不需要处理的请求
String[] urls = new String[]{
"/employee/login",
"/employee/logout",
"/backend/**",
"/front/**"
};
// 2）判断本次请求是否需要处理
boolean check = check(urls,requestURI);
// 3）如果不需要处理，则直接放行
if(check){
log.info("本次请求{}不需要处理",requestURI);
filterChain.doFilter(request,response);
//放行之后，后面的语句就不需要执行了，所以直接return
return;
}
// 4）判断登录状态，如果已登录，则直接放行
if(request.getSession().getAttribute("employee") != null){
log.info("用户已登录,用户id未:{}",request.getSession().getAttribute("employee"));
filterChain.doFilter(request,response);
//放行之后，后面的语句就不需要执行了，所以直接return
return;
}
log.info("用户未登录");
// 5）如果未登录则返回未登录结果,通过输出流的方式向客户端页面响应数据(因为前端已经
// 写好了登录失败后就跳转页面，我们只需要将前端需要的登录失败的信息返回去就可以了)
response.getWriter().write(JSON.toJSONString(R.error("NOTLOGIN")));
return;
}
/**
* 路径匹配，检查本次访问是否需要放行
* @param urls
* @param requestURUI
* @return
*/
public boolean check(String[] urls,String requestURUI){
for (String url : urls) {
boolean match = PATH_MATCHER.match(url,requestURUI);
if(match){
return true;
}
}
return false;
}
}