上个小节我们用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();
});
},