Vue3 使用MD5加密(清晰明了)_vue3 md5加密,项目实战

100 阅读3分钟

md5.appendAsciiStr('密码') const password = md5.end() console.log('加密密码:',password);


### 案例



// 表单提交 const submitHandle = () => { dataFormRef.value.validate((valid: boolean) => { if (!valid) { return false } // 定义MD5对象 const md5:any = new Md5() md5.appendAsciiStr(dataForm.password) dataForm.password = md5.end() console.log('加密密码:',dataForm.password); useAccountScriptSubmitApi(dataForm).then(() => { ElMessage.success({ message: '操作成功', duration: 500, onClose: () => { visible.value = false emit('refreshDataList') } }) }) }) }


## vue3 安装 js-md5



npm install --save js-md5


### 局部


**定义:**



import md5 from "js-md5";


### 出现问题


![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a5157047a65245429ea3cba4974bfb66~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772624245&x-signature=UajR5M0K9y%2BsQ92Vbc7IPHMRfMU%3D)  
 意思是:  
 已声明“md5”,但从未读取其值。ts(6133)  
 无法找到模块“js-md5”的声明文件。“…/src/md5.js”隐式拥有 “any” 类型。  
 尝试使用 **npm i --save-dev @types/js-md5** (如果存在),或者**添加一个包含 declare module ‘js-md5’; 的新声明(.d.ts)文件ts**。


提示已经提供了两种方案。


### 方案一(没使用过)



npm i --save-dev @types/js-md5


### 方案二


在目录src中创建 shims.d.ts 文件,文件名可以自己定义,由于我这个已经有 shims.d.ts 文件,直接在文件里面加声明了。.d.ts 文件是可以放到src目录下,或者根目录都可以。  
 ![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d8aa4a0a94614aceb7ff610fc26cc91b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772624245&x-signature=4QlJEqgDjyLYWKltExPVkl2E3bs%3D)  
 ![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1726614552ea4b3c924d1fcd571a7fd1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772624245&x-signature=gSOny9C13mAUWkJ8p92gO5d%2FImU%3D)


### 案例


配置完之后,就可以使用了。



// 表单提交 const submitHandle = () => { dataFormRef.value.validate((valid: boolean) => { if (!valid) { return false } dataForm.password = md5(dataForm.password) console.log('加密密码:',dataForm.password); }) }


### 实现效果


![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/326325ff96e849d39cbc0829ce7a6ed5~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772624245&x-signature=m3wOBpFsSDtvqre6Dq8nmwaS8sc%3D)  
 创作不易,还望大佬给个赞支持支持,谢谢


### 文末

如果30岁以前,可以还不知道自己想去做什么的话,那30岁之后,真的觉得时间非常的宝贵,不能再浪费时间在一些碎片化的事情上,比如说看综艺,电视剧。一个人的黄金时间也就二,三十年,不能过得浑浑噩噩。所以花了基本上休息的时间,去不断的完善自己的知识体系,希望可以成为一个领域内的TOP。



同样是干到30岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。



**269页《前端大厂面试宝典》**

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。



![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/93a1c95d2020459e8aeaea65a97c6c84~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772624245&x-signature=NMsEs0W3aaX5q60w4S3Vx5noHuE%3D)



**前端面试题汇总**

![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1dd09abfceee4eceaac854a34fcf5c6b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772624245&x-signature=VrvFVZ1GnJDTPtIqhQP0qt6lOPk%3D)



**JavaScript**

![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/59f16a7f73ee4ef1816bb9d5641bcb85~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772624245&x-signature=KdMEc3v9KhydYZoc9KIPM3EIf%2BU%3D)
**开源分享:https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**