循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理
用户在系统登录后,一般会提供一个入口给当前用户更改当前的密码,其实更改密码操作是很简单的一个处理,不过本篇随笔主要是介绍结合前后端来实现这个操作,后端是基于ABP框架的,需要对密码的安全性进行一个设置,否则严格的密码规则非常不友好,毕竟我们系统很多情况下不需要那么复杂的密码规则。
1、ABP后端的密码设置和修改密码处理
//密码验证规则
services.Configure<IdentityOptions>(options =>
{
options.Password.RequireDigit = false;
options.Password.RequireLowercase = false;
options.Password.RequireNonAlphanumeric = false;
options.Password.RequireUppercase = false;
options.Password.RequiredLength = 6;
});
如果没有设置上面的操作,那么简单的密码修改,是无法通过ABP框架默认密码规则的检验的 。
如果嫌弃这样的密码规则太麻烦,那么设置了允许简单密码处理,那么一般符合6位密码都可以顺利通过了。
2、前端界面的处理和组件化操作
在管理系统中,一般在用户头像附近增加一些常用菜单,其中就包括修改密码的操作入口。
而往往我们还有其他地方,可能也需要增加对应的修改密码入口,如在用户管理的界面下。
也就是说,修改密码对话框符合组件重用的规则,在多处都可能使用到的。
那么,我们就需要把常用的界面封装层一个界面组件的方式,方便重用。
修改密码窗体作为一个组件进行开发,它的界面模板代码如下所示。
<template>
<el-dialog :title="$t('changepass.title')" :visible="isVisible" :modal-append-to-body="false" @close="close">
<el-form ref="form" :model="user" :rules="rules" label-width="160px">
<el-form-item :label="$t('changepass.oldpassword')" prop="oldPassword">
<el-input v-model="user.oldPassword" :placeholder="$t('changepass.oldpassword_tip')" type="password" />
</el-form-item>
<el-form-item :label="$t('changepass.newpassword')" prop="newPassword">
<el-input v-model="user.newPassword" :placeholder="$t('changepass.newpassword_tip')" type="password" />
</el-form-item>
<el-form-item :label="$t('changepass.confirmpassword')" prop="confirmPassword">
<el-input v-model="user.confirmPassword" :placeholder="$t('changepass.confirmpassword_tip')" type="password" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitChange">{{ $t('form.save') }}</el-button>
<el-button type="danger" @click="close">{{ $t('form.close') }}</el-button>
</el-form-item>
</el-form>
</el-dialog>
</template>
这里面使用到了多语言的设置,以便从对应的语言文件中读取对应的键值内容。
例如中文的zh.js里面部分内容如下所示。
切换到英文的话,自动通过多语言的函数,获取对应英文en.js的文件中的配置值。
其中修改密码的操作,是通过Api发起后端的数据处理,操作函数如下所示。
submitChange() {
var param = {
userId: getUserId(),
newPassword: this.user.newPassword,
currentPassword: this.user.oldPassword
}
// console.log(param) this.$refs['form'].validate(valid => {
if (valid) {
user.ChangePassword(param).then(data => {
if (data.result) {
this.msgSuccess('修改成功')
this.$emit('update:visible', false) // 更新
} else {
this.msgError('密码修改失败')
}
})
}
})
},
前端Api类的接口函数定义如下所示。
ABP后端接口的定义如下所示
修改密码成功后提示。
这样就顺利完成简单密码就可以修改的操作的了。
循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理的更多相关文章
- 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)
在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...
- 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储
在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...
- 循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理
在我们很多模块里面,都需要使用到一些诸如图片.Excel文件.PDF文件等附件的管理,一般我们倾向于把它独立为一个公用的附件管理模块,这样可以有效的统一管理附件的信息.本篇随笔介绍附件内容的管理,包括 ...
- 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用
在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...
- 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...
- 循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理
VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...
- 循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对 ...
- 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...
随机推荐
- jsp(java server pages):java服务器端的页面
jsp(java server pages):java服务器端的页面 JSP的执行过程1.浏览器输入一个jsp页面2.tomcat会接受*.jsp请求,将该请求发送到org.apache.jasper ...
- burp suite之Target(目标)
Target : 将攻击的目标,全部展现到Target下. Site map:站点地图 Scope: 范围 目录爬行: 复制所有子目录的链接 Spidor this host: 发送至Spidor选项 ...
- git的详细使用,项目创建到同步远程仓库,版本回退,忽略文件,分支创建,分支合并,分支名称修改,冲突解决,项目迁移
注意:此处省略git的安装 1..git的工作流程示意图: 2.本地仓库的初始化: 2.1 创建一个文件夹,如我创建的是:D:\gitdemo\shop 2.2 进入shop目录,鼠标右键,打开git ...
- IP地址的获取
//ip地址的获取:非原创,之前在其他地方看到,拿过来备份下: public static String getIPAddress(HttpServletRequest request) { Stri ...
- 编程源自生活:抽象 -> 生活中的洗头问题
设计背景: 我:头上的油揩给了手,手接触洗手液.洗手液伤头皮,这样头皮就不会和洗手液接触了. 具体执行过程描述: 1.手揩油 -> 2.取液体 3.->洗手 我:这是什么设计模式 ...
- Linux I2C驱动框架
Linux的I2C体系结构分为3个组成部分: I2C核心( i2c-core.c ): I2C核心提供了I2C总线驱动和设备驱动的注册.注销方法.I2C通信方法("algorithm&qu ...
- 对offsetof、 container_of宏和结构体的理解
offsetof 宏 #include<stdio.h> #define offsetoff(type, member) ((int)&((type*)0)->me ...
- Java知识系统回顾整理01基础03变量03字面值
一.字面值定义 创建一个Hero对象会用到new关键字,但是给一个基本类型变量赋值却不是用new. 因为基本类型是Java语言里的一种内置的特殊数据类型,并不是某个类的对象. 给基本类型的变量赋值的 ...
- 制作iconfont放到自己的公共组件库
我们公司的icon是UI提供svg,我们转成iconfont. 这里就不详细说明怎么制作svg,可以上网搜一下,https://www.iconfont.cn/help/detail?spm=a313 ...
- 2014年 实验二 B2C网上购物
实验二 B2C网上购物 [实验目的] ⑴.熟悉虚拟银行和网上支付的应用 ⑵.熟悉并掌握消费者B2C网上购物和商家的销售处理 [实验条件] ⑴.个人计算机一台 ⑵.计算机通过局域网形式接入互联网 (3) ...