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>