四.后台登录功能开发

后台登录功能开发

一、需求分析

（一）页面原型展示
找到项目资源 - 产品原型 > 瑞吉外卖后台（管理端）- 登录.html

点开登录.html页面
● 登录页面有两个文本框需要用户输入用户名和密码，客户端要进行非空校验，单击【登录】按钮之后，表单数据以JSON格式通过AJAX请求方式发送到后台，后台控制器要编写相应的处理函数，对提交的数据进行业务处理，然后将处理结果返回给前端。
● 不妨看一看login.html页面代码

Vue对象通过el属性绑定了id属性为login-app的div元素  Vue对象通过data()方法绑定JSON数据loginForm，通过computed绑定校验规则loginRules Vue对象通过methods绑定对登录表单数据进行处理的异步方法handleLoginv （二）登录页面展示 页面位置：项目/resources/backend/page/login/login.html ● 为什么Vue对象里要绑定这个用户登录数据呢？ ● 因为员工表employee里有一条数据：admin与123456（MD5加密之后就成了e10adc3949ba59abbe56e057f20f883e） 单击【登录】按钮，首先进行校验，如果校验通过，按钮标题就会变成登录中……，如果校验失败，按钮标题就依然是登录 （三）查看登录请求信息 按F12键进入浏览器的调试模式  ● ● 说明单击登录按钮通过客户端校验之后，请求的URL：http://localhost:8080/employee/login ● 后面我们会在雇员控制器里编写相应的处理函数login() @RestController // 交给Spring容器管理 @RequestMapping("/employee") public class EmployeeController {

@PostMapping("/login")
public R<Employee> login(HttpRequest request, @RequestBody Employee employee) {
    return null;
}

}
（四）数据模型 - 雇员表
查看雇员表结构

二、代码开发

● ORM（Object Relation Mapping）对象关系映射
● 雇员实体类（Employee）—— 雇员表（employee）
● 实体属性名采用驼峰命名法，关系字段名采用xml命名规范
● 如果关系字段名由多个单词用下划线连接，那么实体属性名与关系字段名就不一致，需要进行一个转换，但是这个转换工作不需要手工去操作，直接在应用属性文件（application.yml）里进行设置。
创建entity子包
在net.hw.entity包里创建雇员实体类 - Employee
package net.hw.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 // Lombok注解，注在类上，提供类的get、set、equals、hashCode、canEqual、toString方法
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; // 对应字段 - id_number

private Integer status;

private LocalDateTime createTime; // 对应字段 - create_time

private LocalDateTime updateTime; // 对应字段 - update_time

@TableField(fill = FieldFill.INSERT) // mybatis-plus注解，填充策略
private Long createUser; // 对应字段 - create_user

@TableField(fill = FieldFill.INSERT_UPDATE) // mybatis-plus注解，填充策略
private Long updateUser; // 对应字段 - update_user

}
● 参看博文《lombok的@Data注解(https://blog.csdn.net/qq_39900031/article/details/126376871)》
● 参看博文《mybatis-plus常用注解(https://blog.csdn.net/m0_61682705/article/details/125348601)》
（二）创建雇员映射器接口
创建mapper子包

在net.hw.mapper包里创建雇员映射器接口 - EmployeeMapper