Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)

本文涉及的产品
云数据库 Tair(兼容Redis),内存型 2GB
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
简介: 这篇文章记录了在Vue中实现修改手机号和邮箱的大致流程,包括使用过滤器部分隐藏展示的手机号和邮箱,以及通过点击触发路由跳转的便捷方式。文章还描述了旧号码和新号码验证的界面实现,其中验证码由后端生成并通过弹窗展示给用户,未来可以接入真正的手机验证码接口。此外,还提供了修改邮箱的页面效果截图,并强调了学习是一个永无止境的过程。

将手机号信息全部暴露出来、不太好吧。适当的隐藏一部分、似乎更加合理

实现效果展示

在这里插入图片描述

1、实现过程

1.1 html部分

 <span class="zyz-button-span">{
  
  { phone | phoneFilter }}</span>
 <span class="zyz-button-span">{
  
  { mailbox | mailboxFileter }}</span>

2.2 data部分

这里可以将接口数据替换掉这个假数据

  data() {
    return {
      phone: "18372818931",
      mailbox: "2966429967@qq.com",
    };
  },

2.3 script

  filters: {
    //手机号过滤器
    phoneFilter(val) {
      let reg = /^(.{3}).*(.{4})$/;
      return val.replace(reg, "$1****$2");
    },

   //邮箱过滤器
    mailboxFileter(val) {
      let reg = /^(.{3}).*(.{9})$/;
      return val.replace(reg, "$1****$2");
    },
  },

2、过滤器的相关知识

2.1 概念

过滤器:

  • 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
  • 语法:
    1、注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
    2、使用过滤器:{ { xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注:

  • 1、过滤器也可以接收额外参数、多个过滤器也可以串联
  • 2、并没有改变原本的数据, 是产生新的对应的数据

2.2 更加详细的过滤器知识

Vue学习之--------Vue中过滤器(filters)的使用(代码实现)(2022/7/18):https://blog.csdn.net/weixin_43304253/article/details/125861539

相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore &nbsp; &nbsp; ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库&nbsp;ECS 实例和一台目标数据库&nbsp;RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&amp;RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
相关文章
|
2月前
|
JavaScript 数据安全/隐私保护
Vue中如何使用过滤器来隐藏手机号、邮箱等字符串的中间部分内容
这篇文章介绍了在Vue中如何使用过滤器来隐藏手机号和邮箱等字符串的中间部分内容,以提高隐私保护。文章展示了实现效果,并提供了实现过程的代码示例,包括HTML部分的绑定、data部分的数据定义和script部分的过滤器定义。文章还解释了过滤器的概念、语法和使用方式,并提供了一个外部链接供读者获取更加详细的过滤器知识。
|
2月前
|
存储 NoSQL Java
使用redis进行手机验证码的验证、每天只能发送三次验证码 (redis安装在虚拟机linux系统中)
该博客文章展示了如何在Linux虚拟机上使用Redis和Jedis客户端实现手机验证码的验证功能,包括验证码的生成、存储、验证以及限制每天发送次数的逻辑,并提供了测试结果截图。
使用redis进行手机验证码的验证、每天只能发送三次验证码 (redis安装在虚拟机linux系统中)
|
2月前
|
存储 监控 开发工具
Django 后端架构开发:手机与邮箱验证码接入、腾讯云短信SDK和网易邮箱
Django 后端架构开发:手机与邮箱验证码接入、腾讯云短信SDK和网易邮箱
35 0
|
2月前
【Azure 环境】中国区Azure B2C 是否支持手机验证码登录呢?
【Azure 环境】中国区Azure B2C 是否支持手机验证码登录呢?
|
4月前
|
网络协议 Android开发 数据安全/隐私保护
Android手机上使用Socks5全局代理-教程+软件
Android手机上使用Socks5全局代理-教程+软件
3274 2
|
5月前
|
监控 安全 Android开发
【新手必读】Airtest测试Android手机常见的设置问题
【新手必读】Airtest测试Android手机常见的设置问题
180 0
|
5月前
|
XML Java Android开发
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信)
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信)
336 0
|
5月前
|
Web App开发 前端开发 网络安全
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
【2月更文挑战第21天】前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
92 1
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
|
5月前
|
存储 数据库 Android开发
Android实现手机内存存储功能
Android实现手机内存存储功能
57 2
下一篇
无影云桌面