element邮箱验证 vue邮箱验证码注册

学习内容：

vue + element 实现邮箱验证并注册用户

首先要创建一个用于输入邮箱和验证码的布局，接下来需要把邮箱输入框内的数据和验证码输入框内的数据绑定到data内，并绑定时间函数：

<el-form ref="form" :model="form" label-width="60px" size="mini">
        <el-form-item label="邮箱" class="em">
          <el-input v-model="form.email"></el-input>
          <el-button type="primary" @click="getCode">获取验证码</el-button>
        </el-form-item>
        <el-form-item label="验证码" class="cd">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">立即注册</el-button>
          <el-button @click="cancel">取消注册</el-button>
        </el-form-item>
      </el-form>

data() {
    return {
      form: {
        email: "",
        code: ""
      }
    };
  },

然后在methods中创建函数：
先创建获取验证码的函数：

getCode() {
      axios
        .get("url", {
          params: {
            email: this.form.email
          }
        })
        .then(() => {
          this.$message({
            message: "已发送验证码",
            type: "success"
          });
        })
        .catch(() => {
          this.$message({
            message: "请求超时，请检查网络连接",
            type: "error"
          });
        });
    },

这个函数的逻辑其实很简单，在输入框内输入数据后，data中相应的参数也被同时被赋值，然后点击“发送验证码“按钮，触发methods中的getCode函数，在getCode函数中，函数先获得data中的email参数的值，并将该参数传到后端，当请求成功后，后端接受到参数并向输入框内的邮箱发送验证码
接下来再在methods中创建另一个用于验证验证码并注册的函数：

submit() {
      const data = {
      	email: this.email
        code: this.code
      };
      axios
        .post("url", data)
        .then(res => {
          if ((res.data.code = '')) {
            this.$message({
              message: "验证码错误",
              type: "error"
            });
            return;
          } else {
            this.$router.push({ path: "/Login" });
            this.$message({
              message: "验证通过,注册成功",
              type: "success"
            });
          }
        })
        .catch(() => {
          this.$message({
            message: "请求超时，请检查网络连接",
            type: "error"
          });
        });
    },

这个函数将先获得绑定在data中两个输入框的数据，然后发送请求，并将这两个数据作为参数发送给后端，后端接受到数据后，先验证验证码是否正确，并返回一个字段给前端，前端根据后端要求判别验证的正确与否，当验证码错误时，后端会返回一个特殊的字段，前端根据这个字段报错，当验证码正确时，后端将用户名（这里我是用的用户名就是email，如果要单独设置，多加一个输入框并绑定然后一起传给后端就行)储存于数据库完成注册并返回另一个字段给前端，前端收到正确的字段后，提示注册成功并跳转路由