09-28晨讲 -- ElementUI使用 + MD5+ BCryptPasswordEncoder

• 1. ElementUI
• • 1.1 介绍
  • 1.2 入门案例
  • 1.3 项目中使用vue
  • • 1.3.1前端页面
    • 1.3.2效果展示
  • 1.4 工程方式引入vue
  • • 1.4.1工程结构
    • 1.4.2起步
    • 1.4.3效果展示
• 2. MD5介绍
• 3. BCryptPasswordEncoder

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

首先需要引入组件(vue、elementui.js、elementui.css), 这里有两种方式, 先介绍第一种: 本地引入(通过标签), 此种方式可以在HTML页面中嵌入element 组件

注意: 通过此种方式引入, 默认不显示图标样式, 需另引入两个图标文件
项目结构如下:

第二种引入方式: 工程引入, 首先需要通过脚手架工具创建 VUE 工程, 创建好工程后, 安装 element-ui 插件

第一步: 需要在 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

} 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对象中 用户可以使用this关键字调用
Vue.prototype.$message = Message
//通过MessageBox函数定义 消息提示框
Vue.prototype.$confirm = MessageBox.confirm

第二步: 定义elementUI组件

第三步: 定义elementUI路由

第四步: 添加路由占位符

MD5信息摘要算法（英语：MD5 Message-Digest Algorithm），一种被广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。

	@Test
	void testMd5(){
	    //1.定义密码,盐
	    String password = "123456";
	    String salt = "www.tedu.cn";
	    //2.创建加密对象,对密码和盐进行不可逆hash加密
	    //md5算法对相同内容加密时都是相同的,并且不可逆
	    //md5算法对不同内容加密可能会出现相同结果吗?(可能,但几率很小)
	    String newPwd = DigestUtils.md5DigestAsHex((password + salt).getBytes());
	    //3.输出加密后的密码
	    System.out.println(newPwd);
	    System.out.println(newPwd.length());//32位
	    //说明:实际项目中md5盐要存储在数据库,登录时会基于用户名,将用户信息查询出来,
	    //并基于输入的密码和数据库查询出盐进行hash md5加密,再与数据库存储的密码进行
	    //比对,比对结果正确,则允许登录
	}

Spring Security 中的BCryptPasswordEncoder方法采用SHA-256 +随机盐+密钥对密码进行加密。SHA系列是Hash算法，不是加密算法，使用加密算法意味着可以解密（这个与编码/解码一样），但是采用Hash处理，其过程是不可逆的。

	@Test
    void testBCryptEncode(){
        String password = "123456";
        //2.定义加密对象
        BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
        //3.对密码进行加密(对密码基于随机盐进行hash不可逆加密)
        String newPwd = encoder.encode(password);
        System.out.println(newPwd);
        System.out.println(newPwd.length()); //60位
        //4.对密码进行匹配测试(匹配时底层会对密码再次进行加密)
        boolean flag = encoder.matches(password, newPwd);
        System.out.println("flag:" + flag); //true
    }