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时每次都要导入 

 

封装了一下

 使用时