美团项目 --- 注册、登录、退出4

❤ 项目源码 ❤
GitHub地址：https://github.com/Umbrella001/mtapp

一、注册界面的sendMail方法

sendMsg: function() {
      const self = this;
      let namePass;
      let emailPass;
      if (self.timerid) {
        return false;
      }
      /**
       * 使用elementUI提供的validateField拿到用户名和邮箱输入错误时的提示信息
       * 当namePass和emailPass都没有报错信息时,此时进行axios执行发送邮件的操作
       * 注意点：
       * ① 这里直接可以使用this.$axios引用而不需要每个实例的vue都import的原因在
       *    于nuxt.config.js中通过modules进行全局导出了axios
       * ② 注意对于用户名中有中文的话,要使用encodeURIComponent对中文转码
       */
      this.$refs["ruleForm"].validateField("name", (valid) => {
        namePass = valid;
      });
      self.statusMsg = "";
      if(namePass){
        return false;
      }
      this.$refs["ruleForm"].validateField("email", (valid) => {
        emailPass = valid;
      });
      if (!namePass && !emailPass) {
        self.$axios.post("/users/verify", {
            username: encodeURIComponent(self.ruleForm.name),
            email: self.ruleForm.email
          })
          .then(({ status, data }) => {
            if (status === 200 && data && data.code === 0) {
              let count = 60;
              self.statusMsg = `验证码已发送,剩余${count--}秒`;
              self.timerid = setInterval(function() {
                self.statusMsg = `验证码已发送,剩余${count--}秒`;
                if (count === 0) {
                  self.statusMsg = "";
                  clearInterval(self.timerid);
                }
              }, 1000);
            } else {
              self.statusMsg = data.msg;
            }
          });
      }

此时在页面点击发送验证码时，填写的邮箱会收到验证码邮件

二、注册界面中的 register方法

	/**
     * register注册登录
     * 通过element的validate拿到valid，如果改值为true则说明表单校验通过,进而进行跳转登录操作
     * 注意点：
     * ① 用户密码要使用crypto-js这个库进行MD5加密,crypto-js参考文档：https://www.npmjs.com/package/crypto-js
     * ② 注意要定时清空error的值
     */
    register: function() {
      let self = this;
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          self.$axios
            .post("/users/signup", {
              username: window.encodeURIComponent(self.ruleForm.name),
              password: CryptoJS.MD5(self.ruleForm.pwd).toString(),
              email: self.ruleForm.email,
              code: self.ruleForm.code
            })
            .then(({ status, data }) => {
              if (status === 200) {
                if (data && data.code === 0) {
                  location.href = "/login";
                } else {
                  self.error = data.msg;
                }
              } else {
                self.error = `服务器出错，错误码：${status}`;
              }
              setTimeout(function() {
                self.error = "";
              }, 1800);
            });
        }
      });
    }

然后实现的效果是这样的：
↓ 填写所需的表单信息之后，点击注册按钮，自动将用户名密码等相关信息写库，并且实行跳转；

三、登录界面逻辑login.vue

import CryptoJS from "crypto-js";
export default {
  data: () => {
    return {
      checked: "",
      username: "",
      password: "",
      error: ""
    };
  },
  layout: "blank",
  methods: {
    login: function() {
      let self = this;
      self.$axios.post("/users/signin", {
          username: window.encodeURIComponent(self.username),
          password: CryptoJS.MD5(self.password).toString()
        })
        .then(({ status, data }) => {
          if (status === 200) {
            if (data && data.code === 0) {
              location.href = "/";
            } else {
              self.error = data.msg;
            }
          } else {
            self.error = `服务器出错`;
          }
          setTimeout(function() {
            self.error = "";
          }, 1800);
        });
    }
  }
};

四、退出操作逻辑exit.vue

思路：使用koa的async await异步和nuxt的中间件middleware完成退出操作

/**
 * 使用中间件middleware完成退出的操作
 * 原因：因为用户点退出的时候并不是立即就改变这个页面的状态,此时应该使用中间件完成这个步骤
 * 步骤：用户点击 → 中间件开始 → axios退出路由执行执行开始 → axios退出路由执行结束 → 判断code执行跳转 → 中间件结束
 */
export default {
  layout: "blank",
  middleware: async ctx => {
    let { status, data } = await ctx.$axios.get("/users/exit");
    if (status === 200 && data && data.code === 0) {
      window.location.href = "/";
    }
  }
};

❤ 项目源码 ❤
GitHub地址：https://github.com/Umbrella001/mtapp