day11-ElementUI+SysResult对象+用户登陆

1.ElementUI

vue中elementUI是基于vue实现的一套不依赖业务的UI组件库，提供了丰富的PC端组件，减少用户对常用组件的封装，降低了开发的难易程度
网址: https://element.eleme.cn/#/zh-CN/component/installation

1.2 ElementUI入门

1.标签结构体说明

    <!--
      知识点:
        1.el-container 代表一个组件
        2.关联组件名称 Container (组件对象由谁定义 UIJS)
        3.mian.js 引入import './plugins/element.js'
        4.import {Container} from 'element-ui'
    -->
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>

2.JS引入过程

//1.从JS文件中引入组件
import {
  	Container
} from 'element-ui'

//2.实现父子组件参数传递.
Vue.use(Container)

3.效果

2. 用户登陆操作

2.1 user表设计

2.2 User对象说明

说明: 一张表对应一个User对象

@TableName("user")
@Data
@Accessors(chain = true)
public class User extends BasePojo{
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String username;
    private String password;
    private String phone;
    private String email;
    private Boolean status;

    @TableField(exist = false)  //下面属性不存在
    private Role role;  //定义role角色数据
}

2.3 用户登陆业务实现流程

步骤1: 用户输入完 用户名和密码之后,点击登录按钮
步骤2: 准备username/password数据 向后台服务器发送请求, 请求类型: post类型
步骤3: 后台服务器接收用户的请求参数 username/password
步骤4: 根据用户名和密码查询数据库 结果: 有数据 用户名和密码正确
| 没有结果 用户名和密码错误
步骤5: 后端服务器应该返回一个业务回执 标识业务逻辑是否正确执行
假设: status 200 正确, 201 表示失败
步骤6: 前端服务器根据用户的200/201 提示用户操作成功/操作失败.

2.4 业务接口文档

说明:一般做前后端交互时,必须有业务接口文档. 文档中详细阐述了业务需求/url地址/参数/返回值信息等要素.
前后端严格按照业务接口文档进行编码.

2.5 系统返回值SysResult对象

关于SysResult对象的说明: 该对象用来实现 后端与前端业务的交互.
业务执行正确 status=200 业务执行错误 status=201
概念: 前后端交互的层级 定义为 VO层

2.6 编辑SysResult对象

package com.jt.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

import java.io.Serializable;

//作用:实现前后端交互
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor

public class SysResult implements Serializable {//规范写法

    private Integer status; //状态码 200 201
    private String msg;     //服务器返回的提示信息
    private Object data;    //服务器返回的业务数据


        //new SysResult();
        //为了使用vo对象方便,重载一些方法简化调用
        //
        public static SysResult fail(){

            return new SysResult(201,"业务执行失败",null);
        }
        //1.不带参数的正确返回
        public static SysResult success(){
            return new SysResult(200,"服务器处理成功",null);
        }
        //2.带返回值的正确返回
        public static SysResult success(Object data){
            return new SysResult(200,"服务器处理成功",data);
        }

        //3.带返回值,携带提示信息
        public static SysResult success(String msg,Object data){
            return new SysResult(200,msg,data);
        }
        //4.没有只带msg成功的SysResult对象,会与Object data的参数对象,出现耦合

}

2.7 前端页面解析(调用流程!!!)

2.7.1 页面URL请求地址

2.7.2 前端JS分析

1.页面登陆按钮

2.前端JS分析

2.7.3 token的作用

说明: 前端服务器: 用户进行登陆操作时 输入用户名和密码进行校验!!!
将数据信息发送到后端服务器进行校验 查询数据库
假设: 用户用户名和密码正确!!! 页面应该跳转到系统的首页 “/home” 对
问题: 是否可以在浏览器中直接输入 “/home” 理论上不允许访问该页面!
解决方案:
后端服务器返回一个独一无二的 token数据, 前端只要携带token 认为该用户已经登陆.可以跳转页面.
权限操作雏形!!!
总结: token是用来标识用户已经登陆!!!

2.7.4 MD5介绍

总结:
1.MD5信息摘要算法
2.通常可以将数据进行MD5加密 生成 “数字指纹”
3.现阶段md5的加密的算法应用于各大网站中
4.md5加密之后 理论上来说 无法由密文转化为明文 不可以反向编译
5. 限定输入密码的次数!!! 3-5次 锁定账户!!!

核心算法:
知识回顾: 高中的函数!!!
什么是函数: 给定未知数x 经过函数计算 得到一个唯一的结果y
实质: MD5的本质就是hash算法!!!

流传的MD5可以被破解的原理: 就是将md5进行反向查询

2.7.4编辑UserController

业务要求: 完成用户信息校验,并且返回特定的token数据

@RestController
@CrossOrigin
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/hello")
    public List<User> hello(){

        return userService.findAll();
    }
   /**业务需求:用户需求:用户登录校验
    * url:/user/login
    * 类型:post
    * 返回值:  SysResult对象  data的String类型的信息 token
    * 参数: username/password  json串{username:"xxx", passsword:"xxx"}
    *
    * */
   @PostMapping("/login")
    public SysResult login(@RequestBody User user){
       //1.根据用户名和密码校验 返回token Service层中完成
       String token = userService.login(user);
        //2.token有值, 业务正确, null业务操作失败
       if(token ==null){
           return SysResult.fail();
       }
        return SysResult.success(token);
    }

}

2.7.5 编辑UserServiceImpl实现类

@RestController
@CrossOrigin
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/hello")
    public List<User> hello(){

        return userService.findAll();
    }
   /**业务需求:用户需求:用户登录校验
    * url:/user/login
    * 类型:post
    * 返回值:  SysResult对象  data的String类型的信息 token
    * 参数: username/password  json串{username:"xxx", passsword:"xxx"}
    *
    * */
   @PostMapping("/login")
    public SysResult login(@RequestBody User user){
       //1.根据用户名和密码校验 返回token Service层中完成
       String token = userService.login(user);
        //2.token有值, 业务正确, null业务操作失败
       if(token ==null){
           return SysResult.fail();
       }
        return SysResult.success(token);
    }

}