Vue3使用MD5加密實(shí)戰(zhàn)案例(清晰明了)
概述
最近在想做個(gè)cloud項(xiàng)目,gitee上找了個(gè)模板項(xiàng)目，前端使用到vue3 + typeScript、Element Plus、Vue Router、Pinia、Axios、i18n、Vite等技術(shù)，最近使用到vue3 MD5加密，順便學(xué)習(xí)一下，在此總結(jié)一下，若有不足之處，望大佬們可以指出。
vue3 安裝 ts-md5
注意： ts-md5 不是 js-md5
npm install --save ts-md5
局部
定義：
import { Md5 } from 'ts-md5';局部使用：
// 定義MD5對(duì)象
const md5:any = new Md5()
md5.appendAsciiStr('密碼')
const password = md5.end()
console.log('加密密碼：',password);案例
// 表單提交
const submitHandle = () => {
dataFormRef.value.validate((valid: boolean) => {
if (!valid) {
return false
}
// 定義MD5對(duì)象
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";
出現(xiàn)問題
意思是：
已聲明“md5”，但從未讀取其值。ts(6133)
無法找到模塊“js-md5”的聲明文件。“…/src/md5.js”隱式擁有 “any” 類型。
嘗試使用 npm i --save-dev @types/js-md5 (如果存在)，或者添加一個(gè)包含 declare module ‘js-md5’; 的新聲明(.d.ts)文件ts。
提示已經(jīng)提供了兩種方案。
方案一（沒使用過）
npm i --save-dev @types/js-md5
方案二
在目錄src中創(chuàng)建 shims.d.ts 文件，文件名可以自己定義，由于我這個(gè)已經(jīng)有 shims.d.ts 文件，直接在文件里面加聲明了。.d.ts 文件是可以放到src目錄下，或者根目錄都可以。
案例
配置完之后，就可以使用了。
// 表單提交
const submitHandle = () => {
dataFormRef.value.validate((valid: boolean) => {
if (!valid) {
return false
}
dataForm.password = md5(dataForm.password)
console.log('加密密碼：',dataForm.password);
})
}實(shí)現(xiàn)效果
總結(jié)
到此這篇關(guān)于Vue3使用MD5加密的文章就介紹到這了,更多相關(guān)Vue3使用MD5加密內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
setup+ref+reactive實(shí)現(xiàn)vue3響應(yīng)式功能
這篇文章介紹了通過setup+ref+reactive實(shí)現(xiàn)vue3響應(yīng)式功能，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
基于Vue3+IntersectionObserver實(shí)現(xiàn)高性能圖片懶加載
本文詳解 Vue3 中如何使用 IntersectionObserver API 實(shí)現(xiàn)圖片懶加載,核心優(yōu)勢在于進(jìn)入視口才加載圖片,可顯著提升首屏加載速度、節(jié)省帶寬資源、避免頁面卡頓,適合多圖列表場景,需要的朋友可以參考下2026-05-05
解決ant design vue中樹形控件defaultExpandAll設(shè)置無效的問題
這篇文章主要介紹了解決ant design vue中樹形控件defaultExpandAll設(shè)置無效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄
這篇文章主要介紹了vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
Vue3新特性之在Composition API中使用CSS Modules
這篇文章主要介紹了Vue3新特性之在Composition API中使用CSS Modules,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue3?+?MQTT實(shí)現(xiàn)前端與硬件設(shè)備直接通訊(附完整代碼解析)
MQTT作為一種低開銷、低帶寬占用的即時(shí)通訊協(xié)議,使其在物聯(lián)網(wǎng)、小型設(shè)備、移動(dòng)應(yīng)用等方面有著廣泛的應(yīng)用,這篇文章主要介紹了Vue3?+?MQTT實(shí)現(xiàn)前端與硬件設(shè)備直接通訊的相關(guān)資料,需要的朋友可以參考下2025-10-10
本文提供了如何將Vue3的靜態(tài)頁面集成到基于Vue2的若依項(xiàng)目中,并確保能夠訪問Vue2的接口,文中通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了Vue3自定義drag指令的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
關(guān)于Vue背景圖打包之后訪問路徑錯(cuò)誤問題的解決
本篇文章主要介紹了關(guān)于Vue背景圖打包之后訪問路徑錯(cuò)誤問題的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11