Vue3 使用MD5加密（清晰明了）
创始人
2025-05-29 16:33:39

概述

最近在想做个cloud项目,gitee上找了个模板项目，前端使用到vue3 + typeScript、Element Plus、Vue Router、Pinia、Axios、i18n、Vite等技术，最近使用到vue3 MD5加密，顺便学习一下，在此总结一下，若有不足之处，望大佬们可以指出。

vue3 安装 ts-md5

注意： ts-md5 不是 js-md5

npm install --save ts-md5

局部

定义：

import { Md5 } from 'ts-md5';

局部使用：

// 定义MD5对象
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对象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 = falseemit('refreshDataList')}})})})
}

vue3 安装 js-md5

npm install --save js-md5

局部

定义：

import md5 from "js-md5";

出现问题

在这里插入图片描述
意思是：
已声明“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目录下，或者根目录都可以。
在这里插入图片描述
在这里插入图片描述

案例

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

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

实现效果

在这里插入图片描述
创作不易，还望大佬给个赞支持支持，谢谢

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：使用Idea编译Nacos源码,直接将Nacos当成一个服务启动_各种坑_避坑指南---SpringCloud工作笔记193

下一篇：STM32之IIC

相关内容

热门资讯

【iOS】—— ARC学习 ARC 文章目录ARC内存管理的思考方式自己生成的对象自己持有非自己生成的对象，自己也...
Hadoop_HDFS、Had... Hadoop_HDFS、Hadoop_MapReduce、Hadoop_Yarn 实践 (一) 前要...
Baumer工业相机堡盟相机如... 项目场景 Baumer工业相机堡盟相机是一种高性能、高质量的工业相机，可用于各种应用场...
spark第三章：工程化代码 系列文章目录 spark第一章：环境安装 spark第二章：sparkc...
音视频技术开发周刊 | 285 每周一期，纵览音视频技术领域的干货。新闻投稿：contribute...
方向导数与梯度 1 方向导数（二元为例） Σ：z=f(x,y)&...
【字符串】 string1.char str[]类型fgets(s,10000,stdin) cin.getli...
Xmind 2022 for ... XMind 2022 for Mac是一款优秀的思维导图软件，由XMind Ltd.公...
在 Ubuntu 中安装 DO... 了解如何在 Ubuntu 中安装 DOSBox，并配置它来玩旧式 DOS 游戏。DOS...
[图神经网络]图嵌入 将节点映射成D维向量主要有以下几种方法：         ①人工特征工程：...
我的 System Veril...  引言 本文简单介绍 SystemVerilog 的其他程序结构。 前文链接： 我的 ...
Vue2项目总结-电商后台管理... Vue2项目总结-电商后台管理系统 去年做的项目，拖了很久，总算是打起...
【业务安全-02】业务逻辑漏洞... 越权越权即越权查看被人的信息，又分为水平越权和垂直越权，但是两者的本质都...
面试了8家软件公司测试岗位，面... 包含的模块：本文分为十九个模块，分别是：软件测试 基础、l...
不要让ChatGPT成为你的智... 难处 我相信有部分人苦于政策，但是又没有途径，没法享受到chatGpt带...
Redis学习笔记 ---- ... 常见的有五种：String（字符串），Has...
Java实现十类排序算法对比展... Java实现排序算法 本代码展示了Java中常见的十种排序算法，并对每种算法的时间复杂...
SC8P1762E_汇编指令一... 控制类 NOP， 空操作 STOP， 进入休眠模式 CLR...
微信小程序实现图片上传（清晰版... 在wxml文件中添加一个按钮和一个image标签用于显示上传的图片 选择图片 在js文件中添加选择...
Maven打包子模块 项目结构1. project_01: 一个多模块的maven工程2. module_01: 工程pr...
Scala安装及设置查看源代码 文章目录一、安装Scala环境1.1、下载Scala1.2、配置scala环境变量1.3、测试是否安...
使用大规模数据注释和深度学习对... 使用大规模数据注释和深度学习对具有人类水平性能的组织图像进行全细胞分割摘要绪论Mesmer2.1Me...
【数据结构】TreeMap和T... 目录 1、TreeMap 1.1 TreeMap 的简介  1.2 TreeMap 的基本使用 2、...
Django之视图的使用 Django之视图的使用视图基本使用函数视图类视图视图与模板请求对象HttpRequest常见属性和...
零基础能学大数据吗？ 大数据入门不像学一门编程语言，自学一段时间就OK了。大数据是需要站在编程的基础上学习的...
OperatorChain设计 在JobGraph构建过程中，会将满足链化条件的StreamOperator连接在一起...
Phoenix整合phoeni... 首先我们添加上maven依赖,可以看到5.1.2 对应的hbase是2.4对吧 然后添加了依赖,...
【华为机试真题详解 Pytho... 文章目录 前言题目描述输入描述输出描述题目解析参考代码 前言 《华为机试真题详解》专栏含牛客网...
Scala---Array方法 Scala之Array的方法 文章目录Scala之Array的方法数组声明一个数组1.元素操作替换...
内存避障的前世今生 相关 《内存避障：一个内存乱序实例》 《内存避障的前世今生》 0 总结 单核下的指令...