循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 循序渐进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 前端应用开发(1)--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用

循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理

循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理

循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理

循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制  

VUE+Element 前端应用开发框架功能介绍

循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用

循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理

循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理

循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)

循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

电商商品数据库的设计和功能界面的处理

循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理

循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31)--- 系统的日志管理,包括登录日志、接口访问日志、实体变化历史日志

循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理

循序渐进VUE+Element 前端应用开发(33)--- 邮件参数配置和模板邮件发送处理

使用代码生成工具快速开发ABP框架项目

使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理

使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

 

专注于代码生成工具、.Net/.NetCore 框架架构及软件开发,以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架等框架产品。
 转载请注明出处:撰写人:伍华聪  http://www.iqidi.com

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
2天前
|
XML JSON 缓存
探索后端开发中的RESTful API设计原则
【9月更文挑战第5天】在数字化时代的浪潮中,后端开发扮演着支撑整个互联网世界运行的基石角色。而作为连接前端与后端桥梁的RESTful API,其设计质量直接影响到应用的性能和用户体验。本文将深入探讨RESTful API的设计原则,通过浅显易懂的语言和实际代码示例,引导读者理解如何构建高效、易于维护的API。无论你是初学者还是有经验的开发者,这篇文章都将为你提供新的视角和思考。
|
1天前
|
存储 JavaScript 安全
深入浅出Node.js后端开发
【9月更文挑战第6天】在数字化浪潮中,后端开发作为技术架构的支柱,承载着数据存储、业务逻辑处理和用户交互等核心功能。Node.js,作为一个轻量级、高效的JavaScript运行环境,已经成为许多开发者的首选工具。本文将深入探讨Node.js的基础知识、实战应用以及面临的挑战,旨在为初学者和经验丰富的开发者提供一份全面的指南。从搭建开发环境到部署应用程序,我们将一步步揭示Node.js的魅力所在,同时也会触及性能优化和安全防护等高级话题。无论你是初涉后端开发的新手,还是希望深化对Node.js的理解,这篇文章都将是你的宝贵资源。
|
4天前
|
JavaScript API 数据库
深入理解Node.js事件循环及其在后端开发中的应用
【9月更文挑战第3天】本文将深入浅出地介绍Node.js的事件循环机制,探讨其非阻塞I/O模型和如何在后端开发中利用这一特性来处理高并发请求。通过实际的代码示例,我们将看到如何有效地使用异步操作来优化应用性能。文章旨在为读者揭示Node.js在后端开发中的核心优势和应用场景,帮助开发者更好地理解和运用事件循环来构建高性能的后端服务。
|
4天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第3天】本文将带你走进Node.js的世界,通过深入浅出的方式,让你了解Node.js的基本概念、特性以及如何在后端开发中应用。我们将从Node.js的安装开始,逐步深入到异步编程模型、事件驱动机制等核心概念,最后通过一个简单的Web服务器示例,让你对Node.js有一个全面的认识。无论你是前端开发者还是后端开发者,只要你对Node.js感兴趣,这篇文章都将为你打开一扇新的大门。
|
6天前
|
存储 关系型数据库 API
后端开发的艺术:从代码到云部署
在数字时代的浪潮中,后端开发如同一位默默无闻的艺术家,用代码绘制着互联网世界的底层画卷。本文将带你领略后端开发的奥秘,从基础的代码编写到复杂的云部署,每一步都是对技术深度与广度的挑战。我们将一起探索如何在变化莫测的技术海洋中找到自己的北极星,确保项目的成功和职业生涯的发展。无论你是初学者还是资深开发者,这篇文章都将为你提供新的视角和实用的技巧,让你的后端之旅更加精彩。
|
8天前
|
Java API 数据库
探索后端开发:从基础到进阶的旅程
【9月更文挑战第1天】 在数字化时代的浪潮中,后端开发扮演着至关重要的角色。它不仅是支撑现代网络应用的根基,也是连接用户与数据的桥梁。本文将带领读者从后端开发的基础知识出发,逐步深入到高级技能的掌握,最后探讨如何保持持续成长和适应不断变化的技术环境。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的指导和启发。
19 2
|
8天前
|
缓存 测试技术 API
探索后端开发:构建高效API的实用指南
【8月更文挑战第31天】 在数字化时代的浪潮中,API(应用程序编程接口)已成为连接不同软件和服务的关键纽带。本文旨在为开发者提供一个简明而深刻的指南,通过深入浅出的方式介绍如何构建高效、可扩展的后端API。我们将从基础概念开始,逐步深入到设计原则和最佳实践,最后通过一个实际的代码示例来演示这些理念的应用。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和灵感,帮助你在后端开发的道路上更进一步。
|
8天前
|
前端开发 Java Spring
Spring与Angular/React/Vue:当后端大佬遇上前端三杰,会擦出怎样的火花?一场技术的盛宴,你准备好了吗?
【8月更文挑战第31天】Spring框架与Angular、React、Vue等前端框架的集成是现代Web应用开发的核心。通过RESTful API、WebSocket及GraphQL等方式,Spring能与前端框架高效互动,提供快速且功能丰富的应用。RESTful API简单有效,适用于基本数据交互;WebSocket支持实时通信,适合聊天应用和数据监控;GraphQL则提供更精确的数据查询能力。开发者可根据需求选择合适的集成方式,提升用户体验和应用功能。
36 0
|
8天前
|
开发者 存储 API
Xamarin 云服务集成竟然如此强大,简化后端开发不再是梦,数据存储、用户认证、推送通知全搞定!
【8月更文挑战第31天】Xamarin 是一款强大的跨平台移动应用开发工具,通过与云服务集成,显著简化了后端开发。开发者无需自行搭建服务器,即可利用云服务提供的数据存储、用户认证、推送通知等功能,大幅减少数据库设计、服务器配置及 API 开发的时间成本。借助 Azure Mobile Apps 等云服务,Xamarin 可轻松实现数据存取操作,同时增强应用安全性与用户参与度,使开发者更专注于业务逻辑和用户体验,提升开发效率并降低成本。这种方式在快速发展的移动应用领域极具价值。
32 0
|
8天前
|
消息中间件 缓存 JavaScript
探索后端开发:从基础到进阶的实用指南
【8月更文挑战第31天】在数字时代的浪潮中,后端开发作为支撑互联网应用的核心力量,其重要性不言而喻。本文旨在通过深入浅出的方式,带领读者从后端开发的基础知识出发,逐步深入到进阶技巧与最佳实践。我们将一起探讨如何选择合适的编程语言、框架,以及如何设计高效、可扩展的后端系统。同时,通过实际代码示例,展示如何在真实世界中应用这些理论,确保读者能够将所学知识转化为解决实际问题的能力。无论你是初涉后端领域的新手,还是寻求进阶的开发者,这篇文章都将为你提供宝贵的指导和启示。