MD5加密和注册页面的编写

 MD5加密

1.导入包

npm install --save ts-md5

2.使用方式

import { Md5 } from 'ts-md5';
//md5加密后的密码
const md5Pwd=Md5.hashStr("123456").toUpperCase();

遇见的问题及用到的技术 

 

 

 

注册页面

register.vue代码

<template><div class="wapper"><el-card style="max-width: 480px"><template #header><div class="card-header"><span>欢迎登录</span></div></template><el-form ref="formRef" :model="FormData" :rules="rules" label-width="auto" status-icon> <el-form-item label="邮箱" prop="email"><el-input v-model="FormData.email" /></el-form-item><el-form-item label="电话" prop="tel"><el-input v-model="FormData.tel" /></el-form-item><el-form-item label="验证码" prop="code"><el-row :gutter="20"><el-col :span="15"> <el-input v-model="FormData.code" /></el-col><el-col :span="6"> <el-button type="primary" @click="sendCode">发送验证码</el-button></el-col></el-row></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="FormData.password" /></el-form-item><el-form-item label="确认密码" prop="password1"><el-input v-model="FormData.password1" /></el-form-item><el-form-item label="昵称" prop="nackName"><el-input v-model="FormData.nackName" /></el-form-item><el-form-item class="btn-box"><el-button type="primary" @click="submitForm(formRef)">注册</el-button><!-- 重置表单 --><el-button @click="resetForm(formRef)">重置</el-button></el-form-item></el-form><template #footer>已有账号,去登录 <span> </span><el-button type="success">登录</el-button></template></el-card></div></template><script setup lang="ts">
import { reactive,ref } from 'vue';
import { userApi } from '@/api/index';
import { ElMessage } from 'element-plus';
import {useRoute,useRouter} from 'vue-router';
import { Md5 } from 'ts-md5';const route = useRoute()
const router = useRouter()const formRef = ref()const FormData = reactive({tel: '',email: '',code:'',password: '',password1: '',nackName: '',})//表单验证规则,表单中的prop属性
const rules = reactive<any>({tel: [{ required: true, message: '请输入手机号', trigger: 'blur' },{ pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '手机号格式错误', trigger: 'blur' },],code: [{ required: true, message: '请输入验证码', trigger: 'blur' },{ pattern: /^\d{4}$/, message: '验证码为4位数字', trigger: 'blur' },],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ pattern: /^[a-zA-Z]\w{5,17}$/, message: '密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线)', trigger: 'blur' },],password1: [{ required: true, message: '请确认密码', trigger: 'blur' },{ pattern: /^[a-zA-Z]\w{5,17}$/, message: '密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线)', trigger: 'blur' },],email: [{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
})//发送手机验证码
const sendCode = () => {if (FormData.tel == "") {ElMessage.error("请输入手机号")return}userApi.sendCodeTel.call({tel:FormData.tel}).then((res: any) => {ElMessage.success("验证码发送成功")})
}//点击注册后调用的被抽出来的方法
const submitFormData = () => {if(FormData.password != FormData.password1){ElMessage.error("两次输入密码不一致")return}//使用MD5对密码进行加密const md5Pwd=Md5.hashStr(FormData.password).toUpperCase();//传入后端的参数let params = {tel: FormData.tel,email: FormData.email,password:md5Pwd ,nickName: FormData.nackName,code:FormData.code,}userApi.register.call(params).then((res: any) => {ElMessage.success("注册成功")router.push({ name: "login" })})console.log(FormData)}//点击注册按钮后
const submitForm = async (formEl: any) => {await formEl.validate((valid: any, fields: any) => {if (valid) {    //抽出来方法来数据提交后submitFormData()}})
}// 重置表单
const resetForm = (formEl: any) => {if (!formEl) returnformEl.resetFields()
}
</script><style>
.wapper {height: 100vh;background-color: antiquewhite;display: flex;justify-content: center;align-items: center;
}.btn-box {padding-left: 25%;
}
</style>

 路由

 

使用Api时每次都要导入 

 

封装了一下

 使用时

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/373999.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LLM 研究方向(一): LLM Prompts--p-tuning、LoRA

目录 1. prompt-tuning background 2. Prompt Tuning 模型介绍 2.1 2021 prefix-tuning 2.2 2021 P-tuning v1 2.3 2021 Parameter-efficient prompt tuning (PET) 2.4 2022 P-tuning v2 2.5 2019 Adapter ​2.6 2021 LoRA (Low-Rank Adaptation) 2.7 2024 DoRA (…

告别堆积,迎接清新:回收小程序,打造无废生活新选择

在快节奏的现代生活中&#xff0c;物质的丰富与便利似乎成为了我们日常的一部分&#xff0c;但随之而来的&#xff0c;是日益增长的废弃物堆积问题。街道边、社区里&#xff0c;甚至是我们的家中&#xff0c;废弃物品仿佛无孔不入&#xff0c;逐渐侵蚀着我们的生活空间与环境质…

研华运动控制卡在LabVIEW中的应用

在现代工业和科研领域中&#xff0c;精密运动控制系统的需求日益增加。这些系统广泛应用于自动化生产线、精密机械加工、机器人控制、光学仪器调试和实验室自动化设备等诸多领域。本文以研华公司的运动控制卡为例&#xff0c;详细介绍其在LabVIEW中的应用&#xff0c;展示如何通…

丑数问题,力扣264,坑点

丑数问题&#xff0c;力扣264&#xff0c;坑点 力扣链接 给你一个整数 n &#xff0c;请你找出并返回第 n 个 丑数 。 丑数 就是质因子只包含 2、3 和 5 的正整数。 示例 1&#xff1a; 输入&#xff1a;n 10 输出&#xff1a;12 解释&#xff1a;[1, 2, 3, 4, 5, 6, 8, 9, …

鸿蒙语言基础类库:【@ohos.util.TreeSet (非线性容器TreeSet)】

非线性容器TreeSet 说明&#xff1a; 本模块首批接口从API version 8开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。开发前请熟悉鸿蒙开发指导文档&#xff1a;gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 T…

MT3056 交换序列

思路&#xff1a; 与题目 MT3055 交换排列 类似 代码&#xff1a; #include <bits/stdc.h> using namespace std; const int N 1e4 10; int n, fa[N], b[N], d[N]; void init(int n) {for (int i 1; i < n; i)fa[i] i; } int find(int x) {return x fa[x] ?…

使用 MinIO 赢得 RAG 权利

人们常说&#xff0c;在人工智能时代&#xff0c;数据是你的护城河。为此&#xff0c;构建生产级 RAG 应用程序需要合适的数据基础架构来存储、版本控制、处理、评估和查询构成专有语料库的数据块。由于 MinIO 采用数据优先的 AI 方法&#xff0c;因此对于此类项目&#xff0c;…

搜维尔科技:【研究】Scalefit是一款可在工作场所自动处理3D姿势分析结果的软件

Scalefit是一款可在工作场所自动处理 3D 姿势分析结果的软件。这甚至可以在衡量员工的同时发生。然后&#xff0c;Scalefit 根据国际标准对姿势、压缩力和关节力矩进行分析和可视化。 3D姿势分析 如今&#xff0c;Xsens 技术可让您快速测量工作场所员工的态度。一套带有 17 个…

高考后暑假新选择:从AI聊天机器人开发入门IT领域

你好&#xff0c;我是三桥君 七月来临&#xff0c;各省高考分数已揭榜完成。而高考的完结并不意味着学习的结束&#xff0c;而是新旅程的开始。对于有志于踏入IT领域的高考少年们&#xff0c;这个假期是开启探索IT世界的绝佳时机。 不知道这些有志于踏入IT领域的高考少年们&…

对比学习和多模态任务

1. 对比学习 对比学习&#xff08;Contrastive Learning&#xff09;是一种自监督学习的方法&#xff0c;旨在通过比较数据表示空间中的不同样本来学习有用的特征表示。其核心思想是通过最大化同类样本之间的相似性&#xff08;或降低它们之间的距离&#xff09;&#xff0c;同…

香橙派5plus上跑云手机方案二 waydroid

前言 上篇文章香橙派5plus上跑云手机方案一 redroid(带硬件加速)说了怎么跑带GPU加速的redroid方案&#xff0c;这篇说下怎么在香橙派下使用Waydroid。 温馨提示 虽然能运行&#xff0c;但是体验下来只能用软件加速&#xff0c;无法使用GPU加速&#xff0c;所有会很卡。而且…

案例开发-日程管理-第一期

九 案例开发-日程管理-第一期 共7期 9.1 登录页及校验 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>.ht{text-align: center;color: cadetblue;font-family: 幼…

FPGA程序设计

在设计FPGA时&#xff0c;多运用模块化的思想取设计模块&#xff0c;将某一功能设计成module。 设计之前要先画一下模块设计图&#xff0c;列出输入输出接口&#xff0c;再进一步设计内部功能。 状态机要画图&#xff0c;确定每个状态和状态之间怎么切换。状态用localparam定…

IEC62056标准体系简介-4.IEC62056-53 COSEM应用层

为在通信介质中传输COSEM对象模型&#xff0c;IEC62056参照OSI参考模型&#xff0c;制定了简化的三层通信模型&#xff0c;包括应用层、数据链路层&#xff08;或中间协议层&#xff09;和物理层&#xff0c;如图6所示。COSEM应用层完成对COSEM对象的属性和方法的访问&#xff…

查看oracle ojdbc所支持的JDBC驱动版本

oracle jcbc驱动的下载地址参考&#xff1a;JDBC and UCP Downloads page 其实上文中对ojdbc所支持的JDBC驱动版本已经有说明了&#xff0c;不过&#xff0c;因为oracle的驱动包很多时间&#xff0c;都是在公司内部私服里上传维护的&#xff0c;上传的时候&#xff0c;可能又没…

skywalking-1-服务端安装

skywalking很优秀。 安装服务端 skywalking的服务端主要是aop服务&#xff0c;为了方便查看使用还需要安装ui。另外采集的数据我们肯定要存起来&#xff0c;这个数据库就直接用官方的banyandb。也就是aop、ui、banyandb都使用官方包。 我们的目的是快速使用和体验&#xff0c…

Java中的类与对象

一、类 定义&#xff1a;对具有相同特征的这一类事物所进行的抽象描述 比如&#xff1a;人类 二、对象&#xff08;实例&#xff09; 定义&#xff1a;实际存在的该类事物的具体个体 比如&#xff1a;张三 三、定义类 编程是对现实生活中事物的体现&#xff0c;是对现实…

大语言模型里的微调vs RAG vs 模板提示词

文章目录 介绍微调&#xff08;Fine-tuning&#xff09;定义优点&#xff1a;缺点&#xff1a;应用场景&#xff1a;技术细节 检索增强生成&#xff08;RAG&#xff0c;Retrieval-Augmented Generation&#xff09;定义优点&#xff1a;缺点&#xff1a;应用场景&#xff1a;技…

【Windows】实现窗口子类化(基于远程线程注入)

目录 前言 原理解释 完整项目 相关文献 文章出处链接&#xff1a;[https://blog.csdn.net/qq_59075481/article/details/140334106] 前言 众所周知&#xff0c;DLL 注入有多种用途&#xff0c;如热修补、日志记录、子类化等。本文重点介绍使用 DLL 注入对窗口进行子类化。…

vue3 antdv Modal通过设置内容里的容器的最小高度,让Modal能够适当的变高一些

1、当收款信息Collapse也折叠的时候&#xff0c;我们会发现Modal的高度也变成了很小。 2、我们希望高度稍微要高一些&#xff0c;这样感觉上面显示的Modal高度太小了&#xff0c;显示下面的效果。 3、初始的时候&#xff0c;想通过class或者style或者wrapClassName来实现&#…