十、Vue

您所在的位置：网站首页 › 怎么更改密码样式和密码 › 十、Vue

十、Vue

2024-07-13 14:00| 来源: 网络整理| 查看: 265

一、需求分析

当点击修改密码时，弹出修改密码框，向数据库中查询原密码，正确时才允许修改，修改完，点击确定时，更新密码。

二、创建修改密码模板

1.在头部组件里：

取消确定

2.在script标签里创建相应方法及数据：

在data里：

return { rules: { password: [ { required: true, message: "请输入原密码", trigger: "blur" }, { validator: validatePass, message: "原密码不正确", trigger: "blur" }, ], newPassword: [ { required: true, message: "请输入新密码", trigger: "blur" }, ], checkPassword: [ { required: true, message: "不能为空", trigger: "blur" }, { validator: checkpass, trigger: "blur" }, ], }, dialogFormVisible: false, form: { password: "", newPassword: "", checkPassword: "", }, };

在handleCommand里：

if (command == "a") { this.dialogFormVisible = true; } 3.添加 submitForm 方法, 提交修改密码表单 onSubmit(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert("验证通过"); } else { alert("验证不通过"); return false; } }); }, 现在完成：当点击修改密码时，弹出修改密码框，确认时弹出通过不通过。三、添加接口 1.添加原密码校验接口：

输入原密码，失去焦点后异步发送请求校验是否正确, 给服务接口传入用户id和密码：

// 校验原密码 router.post("/user/pwd", (req, res) => { // console.log(req.body) let data = req.body User.findOne({ _id: data.id, password: data.pwd }).then((data, err) => { if (err) { return res.status(500).json({ code: 3000, flag: false, message: "服务器后台错误" }) } if (!data) { return res.status(200).json({ "code": 4000, "flag": false, "message": "密码不正确" }) } return res.status(200).json({ "code": 2000, "flag": true, "message": "密码正确" }) }) }) 四、调用接口

1.新建 api\pwd.js 文件, 调用服务接口实现如下:

import request from "@/utils/request.js" export default { getPass(msg) { //校验原密码 return request({ url: "/user/pwd", method: "post", data: msg }) }, }

2.引入：

import pwd from "@/api/pwd.js";

3.在data里return上，写自定义校验规则，在失去焦点时，再去检查密码是否正确：

// 校验原密码 let validatePass = (rule, value, callback) => { let userdata = JSON.parse(localStorage.getItem("sms-user")); userdata.pwd = this.form.password; pwd.getPass(userdata).then((res) => { if (res.data.flag) { callback(); } else { callback(new Error(res.data.message)); } }); }; 五、检测新密码和确认密码一致性

1.在校验原密码下写：

// 检测新密码和确认密码一致性 let checkpass = (rule, value, callback) => { if (value == this.form.newPassword) { callback(); } else { callback(new Error("密码不一致")); } }; 六、点击确定时，更新密码。

1. 添加修改密码接口，点击确认, 将用户id和新密码提交给后台接口

// 修改密码（更新密码） router.put("/user/pwd", function(req, res) { let data = req.body User.findOne({ _id: data.id, }).then((data, err) => { if (err) { return res.status(500).json({ code: 3000, flag: false, message: "服务器后台错误" }) } if (!data) { return res.status(200).json({ "code": 4000, "flag": false, "message": "密码错误" }) } data.password = req.body.pwd //修改密码 User.findByIdAndUpdate(req.body.id, data).then((data, err) => { if (err) { return res.status(500).json({ code: 3000, flag: false, message: "服务器后台错误" }) } return res.status(200).json({ "code": 2000, "flag": true, "message": "修改密码成功" }) }) }) });

2. Api 调用接口：

update(msg) { //校验确认密码和新密码 return request({ url: "/user/pwd", method: "put", data: msg }) }

3.在方法里：

methods: { handleCommand(command) { if (command == "a") { this.dialogFormVisible = true; } else if (command == "b") { this.out() } }, out() {//退出登录 logout(localStorage.getItem("sms-token")) .then((res) => { let resArr = res.data; if (resArr.flag) { // 清除本地数据 localStorage.removeItem("sms-token"); localStorage.removeItem("sms-user"); this.$message({ showClose: true, message: resArr.message, type: "error", }); this.$router.push("/login"); //退出登录，让它回到登录页面 } else { this.$message({ showClose: true, message: resArr.message, type: "error", }); } }) .catch((err) => { console.log("err", err); }); }, onSubmit(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert("验证通过"); let userdata = JSON.parse(localStorage.getItem("sms-user")); userdata.pwd = this.form.newPassword; pwd.update(userdata).then((res) => { if (res.data.flag) { this.dialogFormVisible = false; this.out(); } }); } else { alert("验证不通过"); return false; } }); }, },

修改密码全部完成。

【本文地址】

十、Vue

十、Vue

今日新闻

推荐新闻