三阶段--day09-- ElementUI介绍 京淘项目用户登录前后端准备

目录

一 ElementUI介绍

1 官网介绍

 2 CDN说明

二  ElementUI入门案例

三 ElementUI 基本用法

四 用户登录

1 user表的设计

2 User对象说明

3 用户登录业务实现流程

4 业务接口文档

 5 系统返回值SysResult对象

6 编辑SysResult对象

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

7.1 页面url请求地址

7.2 前端JS分析

7.3 token的作用

7.4 MD5加密方式介绍

 7.4  编辑UserController

7.5 编辑UserServiceImpl实现类

​

7.6 测试登录效果

---

一 ElementUI介绍

1 官网介绍

网址: https://element.eleme.cn

 2 CDN说明

二  ElementUI入门案例

心法: ctrl+c + ctrl+v CV大法

1.页面效果

2. 标签结构体说明

3.JS引入过程

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

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

4.案例总结

ElementUI.vue

<template>
  <!-- template标签必须有根标签div -->
  <div>
    <h1>编辑html标签</h1>
    <!-- 案例1.页面布局 上下2部分 -->
    <!-- 知识点:
         1.el-container 代表一个组件
         2.关联组件名称 Container(组件对象由谁定义 UIJS)
         3.main.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.按钮 -->
<el-row>
  <!-- 组件名称:Button  -->
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

<!-- 案例3.日期 -->
<div class="block">
    <span class="demonstration">默认</span>
    <!-- 组件名称: DatePicker -->
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
  </div>
</template>

<script>
</script>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>

 element.js中引入标签和参数传递

import Vue from 'vue'
//引入组件,标签
import {
  Button,
  Form,
  FormItem,
  Input,
  Message,
  Container,
  Header,
  Main,
  Menu,
  Aside,
  Submenu,
  MenuItemGroup,
  MenuItem,
  Breadcrumb,
  BreadcrumbItem,
  Card,
  Row,
  Col,
  Table,
  TableColumn,
  Switch,
  Tooltip,
  Pagination,
  Dialog,
  MessageBox,
  Tag,
  Tree,
  Select,
  Option,
  Cascader,
	Alert,
  Tabs,
  TabPane,
  Steps,
  Step,
  CheckboxGroup,
  Checkbox,
  Upload,
  DatePicker

} from 'element-ui'
//实现父子组件的参数传递
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Main)
Vue.use(Aside)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Tree)
Vue.use(Select)
Vue.use(Option)
Vue.use(Cascader)
Vue.use(Alert)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Steps)
Vue.use(Step)
Vue.use(CheckboxGroup)
Vue.use(Checkbox)
Vue.use(Upload)
Vue.use(DatePicker)//实现日期参数传递

//将弹框组件挂载到Vue对象中 用户可以使用this关键字调用
Vue.prototype.$message = Message
//通过MessageBox函数定义 消息提示框
Vue.prototype.$confirm = MessageBox.confirm

 index.js导入组件ElementUI

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
import Welcome from '../components/Welcome.vue'
import User from '../components/user/user.vue'
//导入Element组件
import ElementUI from '../components/ElementUI.vue'
//使用路由机制
Vue.use(VueRouter)
//配置组件
const routes = [
  {path: '/', redirect: '/login'},
  {path: '/login', component: Login},
  {path: '/home', component: Home, redirect: '/welcome', children: [
    {path: '/welcome', component: Welcome},
    {path: '/user', component: User}
  ]},
  {path:'/elementUI',component: ElementUI}
]





const router = new VueRouter({
  routes
})

/**
 *设定路由导航守卫,当用户没有登陆时,不允许跳转其他页面
 * to: 要跳转的页面
 * form: 从哪里来的
 * next: next 是一个函数 next()表示放行   next("/login") 表示发起/login请求
 */
// router.beforeEach((to,from,next) => {
//     if(to.path === '/login') return next()
//     //获取用户页面token信息
//     let token = window.sessionStorage.getItem('token')
//     //如果token数据为null 则跳转到指定路径
//     if(!token) return next("/login")
//     next()
// })




export default router

APP.vue通过占位符展现到页面

<template>
  <div id="app">
    <h3>我是默认访问的页面</h3>
      <!-- 添加路由占位符-->
      <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: "app"
  }
</script>

<style>

</style>

最终页面效果:

三 ElementUI 基本用法

ElementUI.vue组件中编写:

<template>
  <div>
    <h1>elementUI工具</h1>
    <!-- 第一步:
         1.面包屑导航
     elementUI 提供的组件 Breadcrumb 和 Breadcrumb-Item
         2.引入组件到element.js , import引入组件,Vue.use使用
    -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">UI的页面</el-breadcrumb-item>
      <el-breadcrumb-item>ElementUI工具API</el-breadcrumb-item>
      <el-breadcrumb-item>入门案例</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 第二步:定义卡片视图 -->
    <el-card class = "hwCard">
      <!-- 4.栅格:将一行固定划分为24块 -->
      <el-row gutter="20">
        <el-col :span="8">
          <!--3.引入input框 -->
            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
        </el-col>
        <el-col :span="4">
           <el-button type="primary" round @click = "showDialog" >添加按钮</el-button>
        </el-col>
      </el-row>
      <!-- 5.按钮弹出框 -->
      <el-dialog
        title="弹出效果展现"
        :visible.sync="dialogVisible"
        width="50%">
        <!-- 6.表单提交 ref="为表单定义一个ID"
               model是elementUI中特定的属性,负责绑定数据
        -->
        <el-form ref="form" :model="addUser" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="addUser.username" type="username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="addUser.password" type= "password"></el-input>
          </el-form-item>
          </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
      </el-dialog>
</el-card>
  </div>
</template>

<script>
  //对外声明,当前组件的属性 export default,将组件交给VUE对象管理
 export default{
    data(){
      return{
       dialogVisible : false ,//true刷新页面就能弹出
       //form表单中数据有多个所以采用对象形式提交
       addUser:{
           username:'',
           password:''
       }
      }
    },
    methods:{
       //添加按钮点击事件
       showDialog(){
         //点击展现弹出窗
         this.dialogVisible = true
       }
    }

  }
</script>

<style lang="less" scoped="scoped">
.hwCard{
  width: 900px;
  height: 800px;
}
</style>

页面效果:

四 用户登录

1 user表的设计

打开sqlYog数据库找到库名为jt中的user表

1.ID 是主键自增
2.密码: 加密之后的密文 加密API
3.status 0-1 布尔类型值 0-false 1-true 启用还是禁用
4.创建时间/修改时间 每张表里需要单独定义 可以进行封装优化

2 User对象说明

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

package com.jt.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;

/**
 * @author 刘昱江
 * 时间 2021/2/2
 */
@TableName("user")//User对象与user表一一对应,注意大小写
@Data             //动态生成get/set方法
@Accessors(chain = true)//链式加载结构
public class User extends BasePojo{ //继承BasePojo是为了对有日期的表进行操作
    @TableId(type = IdType.AUTO)
    private Integer id;//ID主键自增
    private String username;
    private String password;
    private String phone;
    private String email;
    private Boolean status;
    @TableField(exist = false)  //该属性不存在
    private Role role;  //定义role角色数据
}

BaesePojo.java的作用:

package com.jt.pojo;

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

import java.io.Serializable;
import java.util.Date;

//pojo基类，完成2个任务，2个日期，实现序列化
@Data
@Accessors(chain=true)
public class BasePojo implements Serializable{
	@TableField(fill = FieldFill.INSERT)
	private Date created;	//表示入库时需要赋值
	@TableField(fill = FieldFill.INSERT_UPDATE)
	private Date updated;	//表示入库/更新时赋值.
}

3 用户登录业务实现流程

步骤1:用户输入完用户名和密码之后,点击登录按钮

步骤2:准备username/password数据,向后台服务器发送请求,请求类型:post类型

步骤3:后台服务器接收用户的请求参数 username/password

步骤4:根据用户名和密码查询数据库,结果:有数据用户名和密码正确 或者 用户名密码对不上就错误

步骤5:后端服务器应该返回一个业务回执,标识业务逻辑是否正确执行,

         假设:status 200 表示正确,而201表示失败

步骤6:前端服务器根据用户的200/201,提示用户操作成功或者失败

4 业务接口文档

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

 5 系统返回值SysResult对象

关于SysResult对象的说明:该对象用来实现 后端与前端业务的交互

业务执行正确 status=200,失败status=201

概念:前后端交互的层级 定义为VO层

6 编辑SysResult对象

在VO层创建SysResult类--对象

根据用户不同的需求,实现VO对象的返回

package com.jt.vo;

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

import java.io.Serializable;
/**SysResult封装*/
//作用:实现前后端交互
@Data
@Accessors(chain = true)
@NoArgsConstructor//无参构造
@AllArgsConstructor//全参构造
public class SysResult implements Serializable { //序列化是为了将对象转换为容易传输的格式
    private Integer status; //状态码信息200/201
    private String msg;     //服务器返回的提示信息
    private Object data;   //服务器返回的业务数据

    //方法重载,方法名相同,参数不同
    //为了用户使用VO对象更加方便,重载一些方法 简化程序的调用
    public static SysResult fail(){
        return new SysResult(201,"业务执行失败",null);
    }

    //3种正确返回的方式,根据用户需求返回
    //1.不带参数的正确返回
    public static SysResult success(){
        return new SysResult(200,"服务器处理成功",null);
    }

    //2.带返回值的正确返回 用户传递什么,返回值就是什么, String token!!!
    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);
    }
}

注意:系统误以为msg是data数据,最后传递的信息不是用户所想要的

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

7.1 页面url请求地址

网址信息

参数信息

7.2 前端JS分析

login.vue分析:

1.页面登录按钮

 2.前端js分析

7.3 token的作用

1)说明:

前端服务器:用户在进行登录操作时,输入用户名和密码.进行校验!将数据信息发送到后端服务器进行校验,查询数据库

假设:用户的用户名和密码正确!页面应该跳转到系统的首页" / home"--正确流程

但是,是否可以在浏览器中直接输入"/home"的地址进入系统首页,理论上是不允许此操作访问页面

2)解决方案:权限操作的雏形

后端服务器返回一个独一无二的 token数据,前端只要携带token,系统认为用户已经登录.跳转页面

3)总结:token是用来标识用户已经登录--使用权限登录

7.4 MD5加密方式介绍

MD5信息摘要算法（英语：MD5 Message-Digest Algorithm），一种被广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。MD5由美国密码学家罗纳德·李维斯特（Ronald Linn Rivest）设计，于1992年公开，用以取代MD4算法。这套算法的程序在 RFC 1321 标准中被加以规范。1996年后该算法被证实存在弱点，可以被加以破解，对于需要高度安全性的数据，专家一般建议改用其他算法，如SHA-2。2004年，证实MD5算法无法防止碰撞（collision），因此不适用于安全性认证，如SSL公开密钥认证或是数字签名等用途。

1)总结:

1. MD5信息摘要算法
2. 通常可以将数据进行MD5加密,生成"数字指纹",独一无二
3. 现阶段MD5的加密算法应用于各大网站中
4. md5加密之后,理论上无法由密文转化为明文,不可以反向编译
5. 破解的时间维度:30年左右或者3个月!!
6. 限定输入密码的次数!!!3-5次,再破解不了就锁定账户!

2)核心算法:

• 知识回顾:高中函数!!!!
• 什么是函数:给定未知数x,经过函数计算,得到一个唯一的结果y,但是由结果y能否推断它是由x函数表达式得到的呢?
• 不可以,因为一个结果可以有多个方法得到,叫作函数的无解
• 实质为md5的本质就是hash算法!!!

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

md5改进版: hash(明文+盐值)--(+盐值,相当于拿个棍子搅一搅),变得更加混乱,就更不能被破解了    

 7.4  编辑UserController

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

 package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import com.jt.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * @author 刘昱江
 * 时间 2021/5/11
 */
@RestController
@CrossOrigin
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

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

        return userService.findAll();
    }

    /*业务需求:用户登录校验
    *请求类型:post
    * url:/user/login
    * 参数:username/password 拿到的是JSON串,需要转成js对象,@RequestBody
    * 返回值:SysResult对象 data的String类型信息 名为token */
    @PostMapping("/login")
    public SysResult login(@RequestBody User user){
        System.out.println(user);
        //1.根据用户名和密码校验,返回token,在service层完成
        String token = userService.login(user);
         //2.token有值时说明业务正确,当为null时说明业务操作失败
        if (token == null){
            return SysResult.fail();
        }//不用加else也可以,较简洁
        return SysResult.success(token);
    }

}

7.5 编辑UserServiceImpl实现类

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import jdk.nashorn.internal.parser.Token;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.DigestUtils;

import java.util.List;
import java.util.UUID;

/**
 * @author 刘昱江
 * 时间 2021/5/11
 */
@Service
public class UserServiceImpl implements UserService{

    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> findAll() {
        return userMapper.selectList(null);
    }

    /*需求:
    * 1.根据用户名和密码查询数据库
    * 2.将密码进行加密处理,md5加密方式
    * 3.如果用户名和密码正确,则返回token
    * 4.生成独一无二的字符串UUID:每次生成的UUID几乎不重复,重复率2^128-1
    *   UUID格式: b809cd3e-f4fa-11eb-b396-52152e05da50
    * @param user 作用:在未来生成API文档时,有效果,一般是默认
    * @return*/
    @Override
    public String login(User user) {
        //1.将密码进行加密处理
        String password = user.getPassword();//此时拿到的是明文密码
        //2.对数据进行加密处理
        byte[] passByte = password.getBytes();
        String md5Pass = DigestUtils.md5DigestAsHex(passByte);
        //3.根据用户和密文查询数据库
        //SQL语句:select * from user where username = "xxx" and password = "xxx"
       //根据对象中不为null的属性充当where条件!!!
        user.setPassword(md5Pass);
        QueryWrapper<User> queryWrapper =
                new QueryWrapper<>(user);
       /* queryWrapper.eq("username", user.getUsername())
                    .eq("password", md5Pass);麻烦,可以简化*/
        //从数据库中获取结果
        User userDB = userMapper.selectOne(queryWrapper);
        //检查结果是否有效?
        if (userDB == null){//找不到用户名和密码,代表失败,返回空值null
            return null;//返回null给控制层的login方法的token,该业务流程结束
        }
        //如果程序执行到这一行,则数据用户输入正确,返回token
        //获得的UUID是有四个分割符隔开的,需要替换成空串,使UUID连在一起
        String token = UUID.randomUUID().toString()
                           .replace("-", "");
        return token;
    }
}

7.6 测试登录效果

重启项目服务器,在项目登录页面输入用户名和密码

1)密码输入错误时:

 2)输入正确密码时:会进入系统欢迎页面

四 登录问题解析

京淘后台的开发文档

正常登陆,但是不显示页面问题分析:

1.项目导入的路劲不正确

2.路由映射关系

3.路由导航守卫问题,没有放行