vue中修改密码页面的实现 - 懒人曲奇
vue中修改密码页面的实现
vue修改密码页面的实现
前情提要：这是我实习以来接到的第一个正式任务，就是帮同事半成品项目完善登录注册功能实现，添加修改密码页面，以及前后台交互。彼时我刚简单过了一遍js和vue，对上手的代码处于懵逼的状态，只能一点一点的努力。
这篇算是零基础上项目的一个记录。
1.heade页面添加修改页面下拉框
先改动组件，然后在methods里添加跳转功能
2.router页面（index.js）添加修改密码页面的路由
3.新建changepassword.vue页面
代码原出处：vue修改密码页面
<template> <div class="ChangePassword-wrap">
<div class="ms-title"></div>
<div class="ms-ChangePassword">
<el-tabs v-model="activeName" stretch type="card" >
<el-tab-pane label="修改密码" name="ChangePassword">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="username">
<template slot="prepend">
<li class="el-icon-user-solid"></li>
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input show-password
auto-complete="new-password" v-model="ruleForm.password" placeholder="password">
<template slot="prepend">
<li class="el-icon-lock"></li>
</template>
</el-input>
</el-form-item>
<el-form-item prop="newpassword">
<el-input show-password
auto-complete="new-newpassword" placeholder="newpassword" v-model="ruleForm.newpassword" >
<template slot="prepend">
<li class="el-icon-lock"></li>
</template>
</el-input>
</el-form-item>
<el-form-item prop="newpassword2">
<el-input show-password
auto-complete="new-newpassword2" placeholder="newpassword2" v-model="ruleForm.newpassword2" >
<template slot="prepend">
<li class="el-icon-lock"></li>
</template>
</el-input>
</el-form-item>
<div class="ChangePassword-btn">
<el-button type="primary" @click="onSubmit">保存</el-button>
</div>
<br>
<div class="ChangePassword-btn">
<el-button type="primary" @click="change">确定</el-button>
</div>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import Register from "./Register";
import request from "@/utils/request";
import axios from \'axios\';
import Cookie from "js-cookie"
export default {
components:{
Register
},
data: function(){
const validatePassword = (rule, value, callback) => {
if (!value) {
return callback(new Error(\'密码不能为空\'));
} else if(value.toString().length < 6){
callback(new Error(\'密码至少六位\'));
} else {
callback();
}
};
const validateNewPassword = (rule, value, callback) => {
if (!value) {
return callback(new Error(\'密码不能为空\'));
} else if (value === this.ruleForm.password) {
callback(new Error(\'新密码不能与原密码相同!\'))
}else if(value.toString().length < 6){
callback(new Error(\'密码至少六位\'));
} else {
callback();
}
};
const validateNewPassword2 = (rule, value, callback) => {
if (!value) {
return callback(new Error(\'密码不能为空\'));
} else if (value !== this.ruleForm.newpassword) {
callback(new Error(\'与新密码不一致!\'))
}else if(value.toString().length < 6){
callback(new Error(\'密码至少六位\'));
} else {
callback();
}
};
return {
activeName:\'ChangePassword\',
ruleForm: {
username:\'宣萱\',
password: \'123456\',
newpassword:\'654321\',
newpassword2:\'654321\'
},
rules: {
username: [
{ required: true, message: \'请输入用户名\', trigger: \'blur\' }
],
password: [
{ validator:validatePassword, required: true, trigger: \'blur\' }
],
newpassword: [
{ validator:validateNewPassword, required: true, trigger: \'blur\' }
],
newpassword2: [
{ validator:validateNewPassword2, required: true, trigger: \'blur\' }
],
}
}
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
onSubmit(formName) {
const params = {
password: this.ruleForm.password,
newPassword: this.ruleForm.newPassword,
}
},
change(){
this.$refs[\'ruleForm\'].validate((valid) => {
if (valid) {
let params = new URLSearchParams();
params.append("newPassword",this.ruleForm.newPassword);
params.append("password",this.ruleForm.password);
params.append("username",this.ruleForm.username);
request.post("http://10.203.71.146:8081/user/updatePassword",params).then(res => {
if (res.code == \'200\') {
this.$router.push(\'/login\'); //登录成功之后进行页面的跳转，跳转到主页
this.$message.success(\'修改成功！\')
} else {
this.$message.error(\'修改失败！\')
}
})
}
})
},
},
}
</script>
<style scoped>
.ChangePassword-wrap{
position: relative;
width:100%;
height:100%;
}
.ms-title{
position: absolute;
top:50%;
width:100%;
margin-top: -230px;
text-align: center;
font-size:30px;
color: #dd6161;
}
.ms-ChangePassword{
position: absolute;
left:50%;
top:50%;
width:300px;
/*height:200px;*/
margin:-150px 0 0 -190px;
padding:40px;
border-radius: 5px;
background: #ecb259;
}
.ChangePassword-btn{
text-align: center;
}
.ChangePassword-btn button{
width:100%;
height:36px;
}
.el-tabs__header {
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
发表于
2021-09-25 16:47
懒人曲奇
阅读(478)
评论(0)
编辑
收藏
举报
以上是 vue中修改密码页面的实现 - 懒人曲奇 的全部内容， 来源链接： utcz.com/z/374585.html
