瑞吉外卖(2) - 登录功能开发、测试验证

文章目录

  • 需求分析
    • 进入登录页面测试
      • 结论
    • 分析前端vue页面
  • 代码开发
    • 编写employee实体类
    • 创建整体包结构
      • 编写EmployeeMapper接口
      • 编写EmployeeService接口
      • 编写EmployeeServiceImpl实现类
      • 编写EmployeeController类
    • 返回结果类R(返回json数据给前端)
      • 编写R.java
    • 编写登录方法EmployeeController.java
      • 自我小结
  • 功能测试
    • debug调试
    • 修改js超时响应时间
      • 发现还是超时
      • 清楚浏览器缓存
      • 正常
    • 测试功能

需求分析

瑞吉外卖(2) - 登录功能开发、测试验证_第1张图片

进入登录页面测试

瑞吉外卖(2) - 登录功能开发、测试验证_第2张图片

尝试请求登录,访问到了employee/login

瑞吉外卖(2) - 登录功能开发、测试验证_第3张图片

并且返回的字符串是以json的格式

瑞吉外卖(2) - 登录功能开发、测试验证_第4张图片

结论

瑞吉外卖(2) - 登录功能开发、测试验证_第5张图片

员工表

瑞吉外卖(2) - 登录功能开发、测试验证_第6张图片

分析前端vue页面

  • 看不懂,听写重要的就行了

瑞吉外卖(2) - 登录功能开发、测试验证_第7张图片

代码开发

瑞吉外卖(2) - 登录功能开发、测试验证_第8张图片

编写employee实体类

package com.taotao.reggie.entity;

import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;

import java.time.LocalDateTime;

/**
 * create by 刘鸿涛
 * 2022/5/26 11:18
 */
@SuppressWarnings({"all"})
@Data
public class Employee {
    private static final long sericalVersionUID = 1L;
    private Long id;
    private String username;
    private String name;
    private String password;
    private String phone;
    private String sex;
    private String idNumber;    //身份证号码,Mysql字段为id_number,因为我们在yml文件中设置了映射,所以他能识别
    private Integer status;
    private LocalDateTime createTime;
    private LocalDateTime updateTime;
    @TableField(fill = FieldFill.INSERT)
    private Long createUser;

    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;
}

创建整体包结构

controller、mapper、server->impl

瑞吉外卖(2) - 登录功能开发、测试验证_第9张图片

瑞吉外卖(2) - 登录功能开发、测试验证_第10张图片

编写EmployeeMapper接口

package com.taotao.reggie.mapper;

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

/**
 * create by 刘鸿涛
 * 2022/5/26 12:18
 */
@SuppressWarnings({"all"})
//@Mapper在编译之后会生成相应的接口实现类
@Mapper
public interface EmployeeMapper extends BaseMapper<Employee> {

}

编写EmployeeService接口

package com.taotao.reggie.service;

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

/**
 * create by 刘鸿涛
 * 2022/5/26 12:19
 */
@SuppressWarnings({"all"})
public interface EmployeeService extends IService<Employee> {
}

编写EmployeeServiceImpl实现类

package com.taotao.reggie.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.taotao.reggie.entity.Employee;
import com.taotao.reggie.mapper.EmployeeMapper;
import com.taotao.reggie.service.EmployeeService;
import org.springframework.stereotype.Service;

import javax.websocket.server.ServerEndpoint;

/**
 * create by 刘鸿涛
 * 2022/5/26 12:20
 */
@SuppressWarnings({"all"})
@Service
//都是mybatisPlus提供的规范
public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper, Employee> implements EmployeeService {
    
}

编写EmployeeController类

package com.taotao.reggie.controller;

import com.taotao.reggie.service.EmployeeService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * create by 刘鸿涛
 * 2022/5/26 13:09
 */
@SuppressWarnings({"all"})
//日志
@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {
    //自动装配
    @Autowired
    private EmployeeService employeeService;
}

返回结果类R(返回json数据给前端)

R:result

瑞吉外卖(2) - 登录功能开发、测试验证_第11张图片

编写R.java

package com.taotao.reggie.common;

import lombok.Data;

import java.util.HashMap;
import java.util.Map;
/**
 * create by 刘鸿涛
 * 2022/5/26 13:16
 */
@SuppressWarnings({"all"})
@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;
    }
}

编写登录方法EmployeeController.java

瑞吉外卖(2) - 登录功能开发、测试验证_第12张图片

package com.taotao.reggie.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.taotao.reggie.common.R;
import com.taotao.reggie.entity.Employee;
import com.taotao.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.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;

/**
 * create by 刘鸿涛
 * 2022/5/26 13:09
 */
@SuppressWarnings({"all"})
//日志
@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {
    //自动装配
    @Autowired
    private EmployeeService employeeService;

    /**
     * 员工登录
     * @param request
     * @param employee
     * @return
     */
    //这里因为前端是Post请求,所以我们PostMapping
    @PostMapping("/login")
    //因为返回结果统一用json格式,所以用了RequestBody注解
    //登录成功后HttpServletRequest接收session数据,方便getsession对象,获取当前登录用户
    public R<Employee> login(HttpServletRequest request, @RequestBody Employee employee){
        //1、将页面提交的密码password进行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);

        //3、如果没有查询到则返回登录失败结果
        if(emp == null){
            return R.error("登陆失败,没有此用户");
        }

        //4、密码比对,如果不一致则返回登录失败结果
        if(!emp.getPassword().equals(password)){
            return R.error("登陆失败,密码错误");
        }

        //5、查看员工状态,如果为已禁用状态,则返回员工已禁用结果6、登录成功,将员工id存入Session并返回登录成功结集
        if(emp.getStatus() == 0){
            return R.error("账号已禁用");
        }

        //6、登录成功,将员工id存入Session并返回登录成功结果
        request.getSession().setAttribute("employee",emp.getId());
        return R.success(emp);
    }
}

自我小结

1.注意返回结果为json,结果集R用于和前端数据交互
2.用户提交代码时进行md5加密传输,应该是防黑客拦截
3.根据username查询数据库,然后再通过password判断equals,都是调用结果集R.error方法,此方法传入String,如果成功调用结果集R.success,将员工id存入session并返回

功能测试

debug调试

断点位置

瑞吉外卖(2) - 登录功能开发、测试验证_第13张图片

错误密码登录

md5加密处理

瑞吉外卖(2) - 登录功能开发、测试验证_第14张图片

查询数据库,username能查到

瑞吉外卖(2) - 登录功能开发、测试验证_第15张图片

瑞吉外卖(2) - 登录功能开发、测试验证_第16张图片

破解数据库md5密码

瑞吉外卖(2) - 登录功能开发、测试验证_第17张图片

放行

瑞吉外卖(2) - 登录功能开发、测试验证_第18张图片

使用正确密码尝试,直接放行

瑞吉外卖(2) - 登录功能开发、测试验证_第19张图片

修改js超时响应时间

瑞吉外卖(2) - 登录功能开发、测试验证_第20张图片

发现还是超时

瑞吉外卖(2) - 登录功能开发、测试验证_第21张图片

清楚浏览器缓存

瑞吉外卖(2) - 登录功能开发、测试验证_第22张图片

正常

测试功能

用户名正确,密码错误

用户名错误,密码错误

用户名正确,密码正确

瑞吉外卖(2) - 登录功能开发、测试验证_第23张图片

用户status属性为0是,用户被禁用

瑞吉外卖(2) - 登录功能开发、测试验证_第24张图片

瑞吉外卖(2) - 登录功能开发、测试验证_第25张图片

你可能感兴趣的:(笔记,项目实操,成长阶段,vue.js,前端,javascript)