❤ 项目源码 ❤
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