2.登陆退出功能开发

登陆退出功能开发

1、登陆功能开发

1.1、创建MVC结构

登陆网址：http://localhost:8080/backend/page/login/login.html

1、创建员工实体类Employee

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;

/** * @Author: xjhqre * @DateTime: 2022/6/15 16:45 */
@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、创建MVC目录：controller、service、service.impl、mapper

3、创建EmployeeMapper

package com.itheima.reggie.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.itheima.reggie.entity.Employee;
import org.apache.ibatis.annotations.Mapper;

/** * @Author: xjhqre * @DateTime: 2022/6/15 16:47 */
@Mapper
public interface EmployeeMapper extends BaseMapper<Employee> {
    
}

4、创建EmployeeService

package com.itheima.reggie.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.itheima.reggie.entity.Employee;

/** * @Author: xjhqre * @DateTime: 2022/6/15 16:48 */
public interface EmployeeService extends IService<Employee> {
    
}

5、创建EmployeeServiceImpl

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;

/** * @Author: xjhqre * @DateTime: 2022/6/15 16:48 */
@Service
public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper, Employee> implements EmployeeService {
    
}

6、创建EmployeeController

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;

/** * @Author: xjhqre * @DateTime: 2022/6/15 16:50 */
@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {
    

    @Autowired
    private EmployeeService employeeService;
}

1.2、创建返回值类R

创建common目录，在该目录下创建R

用于给前端返回信息，将所需要传递的信息都封装为R对象

package com.itheima.reggie.common;

import lombok.Data;

import java.util.HashMap;
import java.util.Map;

/** * @Author: xjhqre * @DateTime: 2022/6/15 17:04 */
@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;
    }

}

1.3、在controller中创建登陆方法

创建login方法，路径：com/itheima/reggie/controller/EmployeeController.java

/** * 员工登录 * @param request * @param employee * @return */
@PostMapping("/login")
public R<Employee> login(HttpServletRequest request, @RequestBody Employee employee) {
    
    // 1. 将页面提交的密码password进行md5加密处理，相同的字符串经过MD5加密后的结果相同
    String password = employee.getPassword();
    password = DigestUtils.md5DigestAsHex(password.getBytes());

    // 2. 根据页面提交的用户名username查询数据库
    LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>();
    queryWrapper.eq(Employee::getUsername, employee.getUsername());
    Employee emp = employeeService.getOne(queryWrapper); // username字段唯一

    // 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); // 把从数据库中查到的emp存入R中
}

1.4、调试超时解决

修改request.js文件里的timeout参数，路径：backend/js/request.js

2、退出功能开发

点击退出按钮后，发送请求到后端，后端清除session中的用户id并返回success

2.1 创建退出方法

在EmployeeController中创建logout方法，路径：com/itheima/reggie/controller/EmployeeController.java

/** * 员工退出当前账号 * @param request * @return */
@PostMapping("/logout")
public R<String> logout(HttpServletRequest request) {
    
    request.getSession().removeAttribute("employee");
    return R.success("退出成功");
}

3、拦截未登录用户

若员工未登录则禁止访问index首页，返回到登陆页面。

实现方法：

1. 创建自定义过滤器LoginCheckFilter
2. 在启动类上加入注解@ServletComponentScan
3. 完善过滤器的处理逻辑

3.1、创建Filter

创建目录filter，在该目录下创建LoginCheckFilter类

在前端request.js文件中的响应拦截器是根据res.data.code和res.data.msg判断是否需要回到登陆页面，所以后端里的拦截器如果拦截了某个请求需要回写一个R传给前端作判断。

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;

/** * @Author: xjhqre * @DateTime: 2022/6/16 20:45 */
@Slf4j
@WebFilter(filterName = "loginCheckFilter", urlPatterns = "/*")
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();
        log.info("拦截请求：{}", requestURI);
        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;
        }

        // 4. 判断是否已经登陆，如果已经登陆则直接放行
        if (request.getSession().getAttribute("employee") != null) {
    
            log.info("用户已登陆，用户id为：{}", request.getSession().getAttribute("employee"));
            filterChain.doFilter(request, response);
            return;
        }

        // 5. 如果未登录则直接返回未登录结果
        log.info("用户未登录");
        response.getWriter().write(JSON.toJSONString(R.error("NOTLOGIN")));
    }

    /** * 匹配路径，检查本次请求是否需要放行 * @param urls * @param requestURI * @return */
    public boolean check(String[] urls, String requestURI) {
    
        for (String url : urls) {
    
            boolean match = PATH_MATCHER.match(url, requestURI);
            if (match) {
    
                return true;
            }
        }
        return false;
    }
}

3.2、在主启动类添加@ServletComponentScan

3.3、测试拦截器

首页地址：http://localhost:8080/backend/index.html

登陆地址：http://localhost:8080/backend/page/login/login.html