版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/oncemore520/article/details/87606799
刚开工,没有啥工作,有点闲,整理整理我去年做的一些功能点,
今天先整理去年cms做的一个重置密码的功能,也是刚刚进入这个公司做的
先添加一个用户,这个用户的邮箱是必填的,添加完后列表里就会显示这个用户,
在验证邮箱必填,且符合格式的时候,是这样做的:
<el-dialog title="添加用户" :visible.sync="dialogAddUserFormVisible" custom-class="el-dialog-md">
<el-form :model="addUserForm" :rules="rules" ref="addUserForm">
<el-form-item label="登录名" :label-width="dialogFormLabelWidth" prop="username">
<el-input v-model="addUserForm.username" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="中文名" :label-width="dialogFormLabelWidth" prop="nickname">
<el-input v-model="addUserForm.nickname" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="手机号" :label-width="dialogFormLabelWidth" prop="mobile">
<el-input v-model="addUserForm.mobile" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="邮箱" :label-width="dialogFormLabelWidth" prop="email">
<el-input v-model="addUserForm.email" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="说明" :label-width="dialogFormLabelWidth">
<el-input v-model="addUserForm.desc" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogAddUserFormVisible = false">取 消</el-button>
<el-button type="primary" @click="AddUserSubmit('addUserForm')" :loading="btnLoading">确 定</el-button>
</div>
</el-dialog>
1.rules是规则,需要定义
rules: {
mobile: [
{
validator: checkMobil,
required:true,
trigger: "blur"
}
],
email: [
{
required: true,
message: "请输入邮箱地址",
trigger: "change"
}
],
nickname:[{required:true, trigger: "blur"}],
username: [
{
required: true,
message: "请输入用户名",
trigger: "change"
}
]
},
2.prop属性对应规则中的属性
3.引入校验邮箱,手机号的正则表达式方法
记住这里千万不能有return方法,否则校验是不管用的。()
4.最后就是点击确定的时候
AddUserSubmit(formName) {
this.btnLoading = true;
this.$refs[formName].validate(valid => {
if (valid) {
addUser(this.addUserForm).then(response => {
if (response.code == 0) {
this.btnLoading = false;
this.dialogAddUserFormVisible = false;
message({
message: "添加用户成功,请查看您的邮箱进行设置密码",
type: "success"
});
this.fetchData();
} else {
this.btnLoading = false;
}
});
} else {
this.btnLoading = false;
let options = { message: "检查格式", type: "fail" };
message(options);
return false;
}
});
},
用户添加完成后, 列表上会显示,操作中会有重置密码功能。
默认密码是123456,这个后台会做校验
然后在前端界面上可以做重置密码的功能
changePassword(id) {
this.containerLoading = true;
sendEmail({
id: id
}).then(response => {
if (response.code == 0) {
this.containerLoading = false;
let options = {
message: "密码已发送到您的邮箱,请注意查收!",
type: "success"
};
message(options);
}
});
},
然后我登录我的163邮箱,就会给我发送这样一个邮件
http://cms2.test.jisucloud.cn/[email protected]&salt=41331992&ts=1550459383&sign=b1c75a8a4d33c2648583428e49088228
这个网址呢,就是我前端的修改密码的页面,这个页面是一个单独的页面,不依赖于登录态的
所以我需要设置白名单
const whiteList = ['/login','/password','/report/surveyReportNew','/report/moxieReport','/lookDetail']// no redirect whitelist
router.beforeEach((to, from, next) => {
NProgress.start() // start progress bar
if (getToken()) { // determine if there has token
/* has token*/
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
if (store.getters.name.length === 0) { // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetUserInfo').then(res => { // 拉取user_info
/**
* note: roles must be a array! such as:
* [
* {
* name:'pageview',
* services:['/user/info','/user/list'],
* children:[
* {
* name:'pageview',
* services:['/user/info','/user/list'],
* }
* ]
* }
* ]
* */
const roles = res.data.roles
const isAdmin = res.data.isAdmin
store.dispatch('GenerateRoutes', { isAdmin, roles }).then(() => { // 根据roles权限生成可访问的路由表
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
})
}).catch(() => {
store.dispatch('FedLogOut').then(() => {
Message.error('Verification failed, please login again')
next({ path: '/login' })
})
})
} else {
next()
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单,直接进入
next()
} else {
next('/login') // 否则全部重定向到登录页
NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
}
}
})
点击确定
这样就完成了,添加用户到修改密码的功能了。是不是很简单。