目录
1. ElementUI介绍
1.1官网介绍
网址:Element - The world's most popular Vue UI framework
1.1.1 CDN介绍
1.1.2 ElementUI入门案例
心法:ctrl+c ctrl+v cv大法
1.页面效果 --在jtadmin的app中访问如图网址
2,标签结构体说明
3.js引入过程
//1.从JS文件中引入组件
import {
Container
} from 'element-ui'
//2.实现父子组件参数传递.
Vue.use(Container)
2.后端代码及表设计
2.1 user用户表设计
1.id是主键自增
2.密码:加密后的密文
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 业务接口文档
说明:前后端交互的一个文档
2.5 系统返回值SysResult对象
关于SysResult对象的说明:该对象用来实现后端与前端业务的交互
业务执行正确 status=200 业务执行错误 status=201
交互层(VO);前后端交互的层级是VO层
2.6 编辑SysResult对象
根据用户不同的需求,实现VO对象的返回
@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);
}
//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.这样写的方法是不对的,重载方法,参数不要耦合!!!
/*public static SysResult success(String msg){
return new SysResult(200,msg,null)
}*/
}
2.7前端页面简析(调用流程!!!)
2.7.1 页面URL请求地址
2.7.2 前端js的分析
1.页面登录按钮
引入elementUI的一些使用方法,用cv复制教程的内容,完成项目的搭建
2.前端js分析
2.7.3 token的作用
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
问题:x2计算得到y3 正向加密过程
能否由y3确定 原来的数据是x2/x3?? 不可以,该函数无解
实质:MD5的本质就是hash算法!!!
特例:可以暴力破解,流传的MD5可以被破解的原理: 就是将md5进行反向查询
MD5改造:md5 改进版: hash(明文+ 盐值) 了解
2.7.5 编辑后端Usercontroller
业务要求:完成用户信息校验
/**
* 业务需求:用户登陆校验
* 类型: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);
}
2.7.6 编辑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);
//不能理解!! 面向对象的知识 理解不到位!!!
if(userDB == null){ //用户名和密码错误 返回null
return null; //业务流程结束
}
//如果程序执行到这一行,则数据用户的输入正确的. 返回token
String token = UUID.randomUUID().toString()
.replace("-","");
return token;
}