ElementUI介绍

CGB2105-Day11

2105 专栏收录该内容
17 篇文章 26 订阅

1.ElementUI介绍

1.1 官网介绍

网址: https://element.eleme.cn/#/zh-CN/component/installation
在这里插入图片描述

1.1.1 CDN说明

在这里插入图片描述

1.1.2 ElementUI入门案例

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

  1. 页面效果
    在这里插入图片描述
  2. 标签结构体说明
    在这里插入图片描述
  3. JS引入过程
//1.从JS文件中引入组件
import {
  	Container
} from 'element-ui'

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

2. 用户登陆操作

2.1 user表设计

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

2.2 User对象说明

说明: 一张表对应一个User对象
在这里插入图片描述

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对象

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

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; //服务器返回的业务数据

<span class="token comment">//重载:  方法名称相同,参数不同</span>
<span class="token comment">//为了用户使用VO对象 更加的方便 重载一些方法 简化程序的调用</span>
<span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token class-name">SysResult</span> <span class="token function">fail</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">SysResult</span><span class="token punctuation">(</span><span class="token number">201</span><span class="token punctuation">,</span> <span class="token string">"业务执行失败"</span><span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">//1.不带参数的正确返回</span>
<span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token class-name">SysResult</span> <span class="token function">success</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">SysResult</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token string">"服务器处理成功"</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">//2.带返回值的正确返回  用户传递什么/返回值就是什么</span>
<span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token class-name">SysResult</span> <span class="token function">success</span><span class="token punctuation">(</span><span class="token class-name">Object</span> data<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">SysResult</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token string">"服务器处理成功"</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">//3.带返回值,携带提示信息</span>
<span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token class-name">SysResult</span> <span class="token function">success</span><span class="token punctuation">(</span><span class="token class-name">String</span> msg<span class="token punctuation">,</span><span class="token class-name">Object</span> data<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">SysResult</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> msg<span class="token punctuation">,</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

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介绍

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

核心算法:
知识回顾: 高中的函数!!!
什么是函数: 给定未知数x 经过函数计算 得到一个唯一的结果y
实质: MD5的本质就是hash算法!!! 在这里插入图片描述
流传的MD5可以被破解的原理: 就是将md5进行反向查询
在这里插入图片描述
md5 改进版: hash(明文+ 盐值) 了解

2.7.4 编辑UserController

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

 /**
     * 业务需求:用户登陆校验
     * 类型:POST
     * URL: /user/login
     * 参数: username/password json串 {username: "xxx", password: "xxx"}
     * 返回值: SysResult对象  data的String类型的信息 token
     * 用户名/密码 admin123/admin123456
     */
    @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();
        }
        return SysResult.success(token);
    }

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

2.7.5 编辑UserServiceImpl实现类

/**
     * 需求:
     *      1.根据用户名和密码查询数据库
     *      2.将密码进行加密处理 md5加密方式
     *      3.如果用户名和密码正确 返回token
     *      4 UUID: 每次生成的UUID几乎不重复.   重复概率 2^128/1
     *        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 uname="xxx" and ps="xx"
        //根据对象中不为null的属性充当where条件!!!!
        user.setPassword(md5Pass);
        QueryWrapper<User> queryWrapper = new QueryWrapper<>(user);
        //从数据库中获取结果
        User userDB = userMapper.selectOne(queryWrapper);
    <span class="token comment">//不能理解!! 面向对象的知识 理解不到位!!!</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>userDB <span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token comment">//用户名和密码错误 返回null</span>
        <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>    <span class="token comment">//业务流程结束</span>
    <span class="token punctuation">}</span>

    <span class="token comment">//如果程序执行到这一行,则数据用户的输入正确的. 返回token</span>
    <span class="token class-name">String</span> token <span class="token operator">=</span> UUID<span class="token punctuation">.</span><span class="token function">randomUUID</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
                    <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">"-"</span><span class="token punctuation">,</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> token<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

2.7.6 预习资料

京淘后台的开发文档

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值