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>