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);
    }

}