三阶段Day09

1. 实现用户登录操作

1.1 编辑页面JS

1.1.1 属性绑定

1.编辑页面

 2.属性定义

 

1.2 Form表单校验

1.2.1 Form表单校验规则

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
2个核心属性: 1.rules 定义校验规则 2.prop 设定采用哪种校验方式.

1.2.2 校验规则实现

1.标识页面

 2.完成校验规则

 3.校验页面展现

 

1.3 重置按钮实现

1.3.1 官网API

说明: 通过resetFields的方法,实现表单数据的重置操作.

 

1.3.2 重置按钮

1. 添加点击事件

      2. 编辑点击事件

 

1.4 登录实现

1.4.1 添加事件

说明:为登录按钮添加点击事件

1.4.2 登录步骤

1.再次校验用户的数据是否有效
2.发起Ajax请求实现用户登录请求. username/password post请求
3.在后端服务器 通过username/password 进行数据的查询.
结果 1.有数据 用户名密码正确. 2.无数据 用户名或密码错误
4.后端将数据处理完成之后,返回特定的数据. 告知前端 数据处理情况(回执!!!)
status=200 代表操作成功!!! status=201 表示业务操作失败
5.前端通过JS判断服务器的回执. 如果状态码等于200 提示用户登录成功, 否则告知用户用户名或密码错误.
6.一般为了校验用户是否登录,会返回一个特殊的密钥-TOKEN(密文),如果没有密钥则需要重新登录.

1.4.3 页面校验API

 

1.4.4 用户登录接口文档

1.4.5 用户登录操作

1.4.6 前端请求路径URL地址

1.4.7 构建系统返回值SysResult对象

说明: 前后端在进行交互时需要有一种统一的方式进行返回, 规定在京淘项目后端采用SysResult对象进行统一返回
VO层说明: 前端获取服务器数据时 一般都通过VO层进行封装.

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class SysResult {

    private Integer status; //状态码信息
    private String msg;     //提示信息
    private Object data;    //封装业务数据

    public static SysResult fail(){
        return new SysResult(201, "服务器调用失败",null );
    }

    public static SysResult success(){
        return new SysResult(200, "业务执行成功", null);
    }

    /**
     * 1.方法要被别人调用!!!
     * 2.该方法被调用时 调用者负责参数的传递.
     * @param data
     * @return
     */
    public static SysResult success(Object data){
        return new SysResult(200, "业务执行成功", data);
    }

    public static SysResult success(String msg,Object data){
        return new SysResult(200, msg, data);
    }
}

 

1.4.8 关于UUID说明

说明: UUID是一个32位16进制的字符串,通常可以保证 每次生成的串都是唯一的.
补充A: 16进制取值区间 0-9 A-F 32个0~~~~~~32个F
问: UUID共有多少种可能性!!! (24)32= 2^128
3.4*10^38

1.4.9 编辑UserController

1.4.10 编辑UserService

/**
     * 说明: 根据用户名和密码判断数据是否有效
     * 步骤:
     *      1.将明文进行加密处理. md5加密/md5Hash/sha1
     *      2.根据加密后的数据查询数据库
     *      3.判断结果是否有效
     *          有值: 返回特定字符串token=123
     *          null: u/p 不正确  返回null
     * @param user
     * @return
     */
    @Override
    public String login(User user) {
        //1.获取原始密码
        String password = user.getPassword();
        //2.将密码进行加密处理
        String md5Str = DigestUtils.md5DigestAsHex(password.getBytes());
        //3.将密文传递给对象
        user.setPassword(md5Str); //username/password
        //根据对象中不为null的属性充当where条件
        QueryWrapper<User> queryWrapper = new QueryWrapper(user);
        //4.根据条件查询数据库
        User userDB = userMapper.selectOne(queryWrapper);
        //5.定义token数据 限定条件 token不能重复
        // UUID: 随机字符串 3.4*10^38 种可能性
        String uuid = UUID.randomUUID().toString()
                .replace("-","");
        return userDB==null?null:uuid;
    }