十、Vue--修改密码

一、需求分析

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

二、创建修改密码模板

1.在头部组件里：

<!-- 修改密码弹出框 --><el-dialog title="修改密码" :visible.sync="dialogFormVisible"><el-form :model="form" ref="pwdForm" :rules="rules"><el-form-item label="原密码" prop="password"><el-input v-model="form.password" autocomplete="off"></el-input></el-form-item><el-form-item label="新密码" prop="newPassword"><el-input v-model="form.newPassword" autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPassword"><el-input v-model="form.checkPassword" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="onSubmit('pwdForm')">确 定</el-button></div></el-dialog>

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// console.log(data.id, data.msg.id);User.findOne({_id: data.id,password: data.pwd}, (err, data) => {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.bodyUser.findOne({_id: data.id,// password: data.pwd}, (err, data) => {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, (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 找回密码_vue实现个人信息查看和密码修改功能
下面一段代码给大家介绍vue实现个人信息查看和密码修改功能,具体代码如下所述: //用了element组件,自己要加载和引入保存保存 //这些不要在意,这些是我们自定义的接口,用的时候就直接拿来了 ...
[网络安全自学篇] 四十五.病毒详解及批处理病毒原理分析（自启动、修改密码、定时关机、蓝屏、进程关闭）
这是作者的网络安全自学教程系列,主要是关于安全工具和实践操作的在线笔记,特分享出来与博友们学习,希望您们喜欢,一起进步.前文分享了Windows远程桌面服务漏洞(CVE-2019-0708),并详细讲 ...
webug 4.0 第二十二关越权修改密码
感谢webug团队一直以来的更新维护! webug是什么 WeBug名称定义为"我们的漏洞"靶场环境基础环境是基于PHP/mysql制作搭建而成,中级环境与高级环境分别都是由互联网 ...
实现修改密码的功能（Vue+elementUI）
<el-dialog title="重置密码" width="30%" :visible.sync=" ...
修改密码逻辑修复建议_一项更改以修复技术
修改密码逻辑修复建议 Put a Friendly Bot Between You and the Evil Bots 在您和邪恶的机器人之间放一个友好的机器人 Movies like The Soc ...
病毒详解及批处理病毒制作：自启动、修改密码、定时关机、蓝屏、进程关闭...
[编者按]病毒这个不速之客让人谈之色变,它像一个藏在斗篷侠下的黑衣人,被"光顾"的人就会倒霉.本文为作者的网络安全自学教程系列文章之一,将讲解简单的病毒原理知识,并通过批处理代码制 ...
修改密码问题_修改密码
修改密码问题 As I'm writing this, most of us are stuck around the house due to Covid-19. If you're quarant ...
mysql8.0免安装版修改密码_登陆失败--Mysql8.0免安装版本数据库配置问题修改密码--重建USER账户...
在此先感谢论坛博客的各位大佬,因为实在是查了太多资料,连我自己究竟是在哪里拼拼凑凑出解决办法的过程都差不多快模糊了,第一次安装数据库,花了3天终于搞定了,博主的很多教程都是旧版本的指令,根本无法运行. ...
【2019.3】Mysql8.0免安装版本数据库配置问题修改密码
在此先感谢论坛博客的各位大佬,因为实在是查了太多资料,连我自己究竟是在哪里拼拼凑凑出解决办法的过程都差不多快模糊了,第一次安装数据库,花了3天终于搞定了,博主的很多教程都是旧版本的指令,根本无法运行. ...
为svn服务增加自助修改密码功能
为svn服务增加自助修改密码功能在维护svn服务的过程中,为用户创建了帐号密码,因svn服务原本没有提供修改密码的功能,所以用户如果觉得自己的密码不合适,要修改,则必须通过svn管理员进行修改. ...

十、Vue--修改密码

一、需求分析

二、创建修改密码模板

3.添加 submitForm 方法, 提交修改密码表单

现在完成：当点击修改密码时，弹出修改密码框，确认时弹出通过不通过。

三、添加接口

1.添加原密码校验接口：

四、调用接口

五、检测新密码和确认密码一致性

六、点击确定时，更新密码。

十、Vue--修改密码相关推荐

最新文章

热门文章

十、Vue--修改密码

一、需求分析

二、创建修改密码模板

3.添加 submitForm 方法, 提交修改密码表单

现在完成：当点击修改密码时，弹出修改密码框，确认时弹出通过不通过。

三、 添加接口

1.添加原密码校验接口 ：

四、调用接口

五、检测新密码和确认密码一致性

六、点击确定时，更新密码。

十、Vue--修改密码相关推荐

最新文章

热门文章

三、添加接口

1.添加原密码校验接口：