MD5加密和注册页面的编写

MD5加密

1.导入包

复制代码

npm install --save ts-md5

2.使用方式

复制代码

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

遇见的问题及用到的技术

注册页面

复制代码

<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) return
  formEl.resetFields()
}
</script>

<style>
.wapper {
  height: 100vh;
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-box {
  padding-left: 25%;
}
</style>

路由

使用Api时每次都要导入

封装了一下

使用时