上个小节我们用Swagger测试后端的Web方法，没什么问题，这节课咱们来完成前端的功能，上节课我们都看到了，在man.vue页面的导航区，鼠标悬停在用户信息上面会弹出菜单，菜单里面的选项就是我们要实现的功能。

一、给菜单选项添加点击事件

在main.vue页面找到导航区的弹出菜单，然后给菜单里面的两个选项添加点击事件。

<el-dropdown>
    <span class="el-dropdown-link">
        <img :src="photo" />
        {{ name }}
    </span>
    <template #dropdown>
        <el-dropdown-menu>
            <el-dropdown-item @click="updatePasswordHandle()">修改密码</el-dropdown-item>
            <el-dropdown-item @click="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
    </template>
</el-dropdown>

二、实现退出登陆

退出登陆相对比较简单，所以咱们先把logout()函数定义出来。

logout: function() {
    let that = this;
    that.$http('user/logout', 'GET', null, true, function(resp) {
        //退出登陆之后没有必要在storage中保存用户权限，所以删除permissions
        localStorage.removeItem('permissions');
        //跳转到登陆页面
        that.$router.push({ name: 'Login' });
    });
}

三、修改密码的流程

1. 熟悉 update-password.vue 页面

用户点击修改密码选项之后，系统会弹窗，让用户输入新的密码。这个弹窗是个自定义组件（update-password.vue），然后引入到main.vue页面里面。

<el-dialog title="提示" v-model="visible" width="25%">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
        <el-form-item label="原密码" prop="password">
            <el-input type="password" v-model="dataForm.password" size="medium" clearable />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
            <el-input type="password" v-model="dataForm.newPassword" size="medium" clearable />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
            <el-input type="password" v-model="dataForm.confirmPassword" size="medium" clearable />
        </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
            <el-button size="medium" @click="visible = false">取消</el-button>
            <el-button type="primary" size="medium" @click="dataFormSubmit">确定</el-button>
        </span>
    </template>
</el-dialog>

在模型层中声明了很多东西，有保存表单输入数据的dataForm，还有ElementUI的表单验证规则，以及自定义验证函数。

data() {
    const validateConfirmPassword = (rule, value, callback) => {
        if (value != this.dataForm.newPassword) {
            callback(new Error('两次输入的密码不一致'));
        } else {
            callback();
        }
    };

    return {
        visible: false,
        dataForm: {
            password: '',
            newPassword: '',
            confirmPassword: ''
        },
        dataRule: {
            password: [{ required: true, pattern: '^[a-zA-Z0-9]{6,20}$', message: '密码格式错误' }],
            newPassword: [{ required: true, pattern: '^[a-zA-Z0-9]{6,20}$', message: '密码格式错误' }],
            confirmPassword: [
                { required: true, pattern: '^[a-zA-Z0-9]{6,20}$', message: '密码格式错误' },
                { validator: validateConfirmPassword, trigger: 'blur' }
            ]
        }
    };
}

2. 声明相关函数

在update-password.vue页面中声明两个函数：init()和dataFormSubmit()。其中init()函数是用来初始化弹窗的，比如清空弹窗里面的表单控件遗留的数据。

init() {
    this.visible = true;  //显示弹窗
    //因为清空表单控件是异步的，所以把清空表单控件放在下次DOM更新循环中
    this.$nextTick(() => {
        this.$refs['dataForm'].resetFields();
    });
},

dataFormSubmit()函数是用来提交表单数据的，需要先执行表单验证，然后在发送Ajax请求。

dataFormSubmit: function() {
    let that = this;
    //前端表单验证
    this.$refs['dataForm'].validate(valid => {
        if (valid) {
            let data = { 
                password: that.dataForm.password,
                newPassword: that.dataForm.newPassword
            }
            that.$http('user/updatePassword', 'POST', data, true, resp => {
                if (resp.rows == 1) {
                    this.$message({
                        message: '密码修改成功',
                        type: 'success',
                        duration: 1200,
                    });
                    this.visible = false;
                } else {
                    this.$message({
                        message: '密码修改失败',
                        type: 'error',
                        duration: 1200,
                    });
                }
            });
        }
    });
}

3. 声明弹窗函数

在main.vue页面中，已经引用了弹窗页面，所以我们可以调用弹窗页面的各种变量和函数。

<template>
    ……
    <update-password v-if="updatePasswordVisible" ref="updatePassword"/>
    ……
</template>

<script>
……
import UpdatePassword from './update-password.vue';
……
export default {
    components: { UpdatePassword },
    ……
}
</script>

想要弹出update-password.vue页面，我们要在main.vue页面声明弹窗函数，这个函数就是菜单选项对应的点击事件回调函数updatePasswordHandle()，该函数调用弹窗页面的init()函数，清空表单控件，然后显示弹窗。

updatePasswordHandle: function() {
    this.updatePasswordVisible = true;
    this.$nextTick(() => {
        this.$refs.updatePassword.init();
    });
},