一个简单的登录注册界面流程介绍

登录页面实现
其他页面的实现可以到github上克隆下来
login_interface
login_server

一、用户登录

1、密码登录
密码登录泳道图
流程:

  1. 用户输入密码;
  2. 表单使用正则验证用户名和密码格式;
  3. 点击登录,对密码进行加密,并发送登录验证请求;
  4. 后台验证用户登录信息是否正确;
  5. 正确则生成token返回至前端,否则提示用户名或密码错误。

2、忘记密码
忘记密码泳道图
流程:

  1. 输入手机号;
  2. 表单正则验证手机号格式;
  3. 点击获取验证码按钮;
  4. 后台验证手机号是否存在;
  5. 存在,则生成验证码,加密后保存在服务器session当中,否则提示手机号不存在;
  6. 获取到验证码并输入;
  7. 输入新密码;
  8. 点击修改密码,验证码和新密码加密,发送修改密码请求;
  9. 从服务器session里面取出验证码,进行手机号和验证码验证;
  10. 正确,则修改密码,否则,提示手机号或验证码错误;
  11. 修改成功,跳转至登录界面,否则,提示修改错误。

3、验证码登录
验证码登录泳道图
流程:

  1. 输入手机号;
  2. 表单验证手机号格式是否正确;
  3. 正确则进行下一步,错误则提示手机号格式错误;
  4. 点击获取验证码按钮;
  5. 后台验证手机号是否存在;
  6. 存在,则生成验证码,加密后保存在服务器session当中,否则提示手机号不存在;
  7. 获取到验证码并输入;
  8. 点击登录,对手机号和验证码进行格式验证,然后验证码加密,然后发送验证请求;
  9. 从服务器session里面取出验证码进行验证;
  10. 正确,则生成token返回至前端,否则,提示手机号或验证码错误。

二、用户注册

注册泳道图
流程:

  1. 输入注册信息;
  2. 表单正则验证注册信息格式;
  3. 点击注册,对密码进行加密,发送注册请求;
  4. 注册前需要验证用户是否已经注册;
  5. 注册成功,跳转至登录界面,否则,提示注册失败。

注册还涉及到对注册信息的脱敏,比如手机号,身份证号码等等这些信息的脱敏,但是这里我没有实现这个功能。

三、涉及技术

前端:react,antd,axios
后台:node.js,express
数据库:mysql

我这里介绍的只是登录注册的简单流程,真正复杂的登录注册里面还涉及到更多的知识。
如有问题,还请大家多多指教。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/68316.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Netflix 团队解决了 Linux 内核中的 FUSE 死锁

Laf 公众号已接入了 AI 绘画工具 Midjourney&#xff0c;可以让你轻松画出很多“大师”级的作品。同时还接入了 AI 聊天机器人&#xff0c;支持 GPT、Claude 以及 Laf 专有模型&#xff0c;可通过指令来随意切换模型。欢迎前来调戏&#x1f447; <<< 左右滑动见更多 &…

独家 | 我们都是AI免费的数据劳动力(附链接)

作者&#xff1a;Melissa Heikkil 翻译&#xff1a;李洪君 校对&#xff1a;王晓颖本文约1700字&#xff0c;建议阅读5分钟AI聊天机器人的回答听起来聪明、少涌现些有害又无意义的言论的秘诀&#xff0c;在于使用一种从人类反馈的强化学习技术。 ANNA SOROKINA 让AI聊天机器人的…

编程语言中,循环变量通常都用 i?你知道为什么吗?

01 前天&#xff0c;我在朋友圈发了一个问题&#xff1a; 为什么编程中&#xff0c;循环变量通常都是用 i ? 没想到&#xff0c;回复的人这么多&#xff01;要连翻好几页。 这个问题&#xff0c;有 2/3 的人回答正确&#xff0c;有少部分人知道&#xff0c;但是不太确定。 习惯…

我的ChatGPT学习笔记003

大家好啊&#xff0c;我是了不起&#xff01; 前一段时间ChatGPT突然火爆&#xff0c;大佬们纷纷下场。我也跟着努力学习&#xff0c;做了一些笔记。 下面将陆续放出笔记&#xff0c;共享给小伙伴们&#xff01;这是放出的第二篇&#xff0c;和小伙伴们与时俱进哈~~ 笔记三&…

【超详细】R语言实现各种数据可视化

文章目录 1 主成分分析可视化结果1.1 查看莺尾花数据集(前五行&#xff0c;前四列)1.2 使用莺尾花数据集进行主成分分析后可视化展示 2 圆环图绘制3 马赛克图绘制3.1 构造数据3.2 ggplot2包的geom_rect()函数绘制马赛克图3.3 vcd包的mosaic()函数绘制马赛克图3.4 graphics包的m…

☀️苏州程序大白一文教你学会微信小程序开发☀️《❤️记得收藏❤️》

☀️苏州程序大白一文教你学会微信小程序开发☀️《❤️记得收藏❤️》 目录 &#x1f3f3;️‍&#x1f308;开讲啦&#xff01;&#xff01;&#xff01;&#xff01;&#x1f3f3;️‍&#x1f308;苏州程序大白&#x1f3f3;️‍&#x1f308;&#x1f31f;博主介绍&#x…

老徐讲解小程序与微信第三方平台及微信官方的关系。

小程序服务器关系分析 小程序是微信官方根据前后端完全分离的思想创建的一套自己的前端框架。 后端部分&#xff0c;则一部分交给微信官方提供授权和鉴别身份的官方接口&#xff0c;而主要的业务逻辑接口则交给第三方开发平台完成。 也就是微信提供了单独的一个微信小程序服务…

微信小程序扫码报工案例分享

使用微信小程序结合PC端ERP完成工序扫码报工扫码出入库&#xff0c;可以实现生产管理全流程自动化作业&#xff0c;使生产效率比之前手工操作有了质的飞跃。 本案例背景介绍 这是一家生产二极管的电子生产企业&#xff0c;车间自动化生产设备多&#xff0c;生产连续性强。产品…

小程序获取头像试试水 02《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》

本系列教程是针对粉丝的变现教程&#xff0c;还不是粉丝的可以关注我并且到社区&#xff1a;https://bbs.csdn.net/topics/603436232 进行打卡&#xff0c;不是老粉的也可以获取最终的技术变现学习&#xff0c;最终还有详细的变现教程等你来。 前言 《 程序员变现指南之 微信…

llama.cpp Mac版本llama

骆驼.cpp 路线图/宣言/ ggml 纯C/C中LLaMA模型的推理 热点话题&#xff1a; 简单的网络聊天示例&#xff1a;#1998k-quants 现在支持 64 的超级块大小 super-block size of 64:&#xff1a;#2001新路线图&#xff1a; https: //github.com/users/ggerganov/projects/7Azure …

解决老板们的一大难题---如何监管微信聊天

如今&#xff0c;企业越来越希望能够监管员工微信。但是&#xff0c;到底应该监管员工微信的哪些内容呢&#xff1f; 员工在微信上进行的聊天记录、红包转账、删除联系人和聊天记录、消息中涉及敏感词汇、以及客户名片和重要客户名片的发送等行为&#xff0c;老板们都想要掌握…

万达酒店及度假村旗下“万达颐华”品牌第一家直营酒店正式开业

无锡2021年6月28日 /美通社/ -- 无锡万达颐华酒店&#xff0c;位于中国江苏省无锡市中山路218号&#xff0c;是万达酒店及度假村旗下“万达颐华”品牌的第一家直营酒店。无锡万达颐华酒店的前身&#xff0c;是无锡上世纪90年代最著名的高星级酒店 -- 无锡锦江大酒店。随着城市发…

滴滴与万达酒店签署战略合作 将推出会员权益互享

【TechWeb】8月7日消息&#xff0c;滴滴出行与万达酒店及度假村签署战略合作&#xff0c;此次合作将由礼橙专车、滴滴豪华车联合万达酒店&#xff0c;打通出行与酒店领域的资源和服务。在出行服务升级、会员权益互享、品牌联合营销等方面展开深度合作。 以往商旅用户安排行程时…

COMFORT 酒店丨万达酒店及度假村与腾讯微信签署战略合作协议 微信支付分功能酒旅行业率先落地万达酒店

近日&#xff0c;万达酒店及度假村与腾讯微信在北京万达文华酒店签署战略合作协议&#xff0c;双方以微信支付分功能在酒店旅游行业率先落地万达酒店为起点&#xff0c;将在共建“智慧酒店”、探索酒店行业创新场景等方面展开深度合作&#xff0c;致力为宾客提供高品质、“有温…

万达酒店及度假村旗下三大酒店品牌 荣膺迈点年度MBI国内高端酒店十大影响力品牌

中国,北京,2020年7月3日 —— 近日,迈点网、迈点研究院联合数百家全国主流媒体举办的“2019-2020旅游住宿业MBI颁奖盛典暨高峰论坛”在上海隆重召开。万达酒店及度假村旗下万达瑞华、万达文华、万达嘉华三大酒店品牌荣膺“年度旅游住宿业影响力品牌金航奖——MBI(迈点品牌指数)…

为什么说苏宁必买万达百货

在吃下万达百货之后&#xff0c;苏宁易购在全场景智慧零售的探索仍然挑战重重。后者收购前者的逻辑是什么?前者具备哪些可挖掘潜力?后者前者具有哪些想象空间?这都是本次收购行为的主要看点。 不买不行 苏宁易购收购万达百货的背后&#xff0c;或许可以从财报上看出些端倪。…

【报告分享】 2020中国男士美妆市场洞察报告-巨量算数(附下载)

摘要:随着中国新生代男性审美意识的提高&#xff0c;男性护肤意识增强&#xff0c;男士护理成为中国化妆品市场增势明显的品类之一。同时&#xff0c;2020年大批新锐男士护理品牌受到资本市场青睐&#xff0c;并在短视频平台获得爆发式关注&#xff0c;给整个男士美妆市场注入新…

【报告分享】 2020年中国本土及国际美妆护肤品牌及营销现状研究报告-艾瑞咨询(附下载)

摘要:通过定量问卷调研、定性消费者“一对一”深访、定性行业专家“一对一”访谈以及桌面研究四种研究方法&#xff0c;对国内美妆护肤市场的发展和现状进行梳理&#xff0c;并对中国美妆护肤消费者进行洞察研究&#xff0c;旨在了解国内美妆护肤市场营销现状、消费需求特征以及…

【报告分享】 美妆行业营销报告-从“她经济”到“TA经济“-WEIQ(附下载)

摘要:随着社会的发展和进步&#xff0c;女性在社会中的地位得到显著提高&#xff0c;在消费市场的角色也发生改变&#xff0c;渐渐从“奉献型消费”变成“悦己型消费”&#xff0c;“她经济”已然崛起。90后、00后女生年订单量占比过半&#xff0c;成新一代消费者中的主力军&am…

市场营销学数据分析【香奈儿包包在京东上的比价分析】

为了分析香奈儿成功的因素以及香奈儿在市场上的具体销售情况&#xff0c;博主自己写了一个程序用于爬取京东商城香奈儿包包的销售数量&#xff08;包括商品名称&#xff0c;价格&#xff0c;商品成交量&#xff0c;以及商品的店铺名称&#xff09;&#xff0c;然后对商品进行一…