1. 用户注册
-
概述:
常见的注册方式:邮箱注册、手机号注册、昵称注册、或者以上几种同时支持
本项目仅仅支持手机号注册 -
需求:
项目启动后,访问regist.html进入注册页面
手机号校验
前后台都需要对手机号进行校验
- 前端校验:手机号码格式校验?使用正则表达式,需要使用js对手机格式进行合法性认证,验证不通过,页面提示,通过进入下一步校验
第一位:1开头
第二位:3 5 7 4 9 8
长度:11为
必须为数字
创建一个正则表达式来校验手机号码格式通常取决于特定国家的号码规则。
以国际通用的手机号码格式为例,通常手机号码是由国家代码(可选)、一个运营商的代码,
紧随着一个特定的号码序列组成的。
例如,对于中国的手机号码,通常是以13、14、15、16、17、18或19开头的11位数字。
一个简单的正则表达式,用于校验中国的手机号码格式,可以是:
^1[3-9]\d{9}$
这个正则表达式的解释:
- `^` 表示字符串的开始。
- `1` 表示手机号码以数字1开始。
- `[3-9]` 表示第二位数字可以是3到9中的任意一个。
- `\d{9}` 表示接下来是任意9个数字(`\d` 代表任意一个数字,`{9}` 指定这样的数字有9个)。
- `$` 表示字符串的结束。
这个正则表达式仅适用于中国的手机号码格式。
如果您需要校验其他国家的手机号码格式,正则表达式可能会有所不同,
需要根据该国的手机号码规则来调整。
- 后端校验:唯一性校验?是否已经注册?后端提供一个接口进行手机号码校验
这个需求前端无法实现,需要后端查询数据库进行校验。
- 接口设计:
请求地址:/users/phone/exists
请求方式:GET
请求参数:phone=手机号
返回类型:{code:200,msg:"success",data:true or false}
-
需求:基于手机号查询对象
-
编码:
controller层:
service层:
-
测试
-
接口联调:将后端接口与前端对接
register.js中手机号校验代码:
需要注意跨域问题
违背同源策略(协议、IP、端口号任意一个不同),产生跨域问题
解决待选方案:1. 客户端代理 2. 后端允许跨域
选择方案:后端允许跨域,需要在网关配置允许跨域
回忆在springboot如何配置跨域?
springboot跨域配置在springcloud中能否行得通?springcloud如何配置跨域?gateway跨域配置?
官方文档寻找。
配置跨域示例:
在网关的配置文件中完成允许跨域配置即可:
跨域问题解决:
- 跳转到注册页面
输入昵称、密码、重复密码,前端对这些进行非空、两次密码一致性校验
短信验证码
当用户填写完注册信息,单击获取验证码按钮时,需要发送验证码给之前验证通过的手机号。
-
前端:
- 点完获取验证码按钮后,调用后端接口实现发送短信功能
- 发送完短信后,立即禁用发送验证码按钮,不可点击
- 按钮文字变成倒计时,时间到了之后,再重新恢复点击按钮
-
后端
-
定义发送短信接口,收到请求后,向对应手机号发送短信
实现步骤:
1、验证手机合法性
2、生成验证码
3、将验证码保存起来->如何保存验证码?存哪里?
4、调用第三方发短信接口发送验证码->如何发?
5、响应前端验证码发送成功验证码存储方案:
业务需求:
- 效率高
- 时效性
- 跨服务共享
如果是单体项目,不涉及到跨服务访问,session最佳。
但是我们是分布式项目,涉及到跨服务访问,但是从性能角度来说,redis最合适。
如果对数据安全性要求高,那么优先考虑mysql。Redis存储验证码:
数据结构:
String:k-v,操作简单,redis中外部key数量增加,会导致redis整体性能受到影响。
Map:一个外部key,可以保存多个内部k-v键值对,可以避免外部key占用过多;但是会导致单个map对象数据量过大->大key,这样redis性能也会受到影响;map的时效性只能针对外部key,无法针对内部key做过期时间。
综上分析,String结构存储验证码最合适
key设计:唯一性、可读性、扩展性
验证码key:用户:场景:手机号 USERS:REGISTER:VERIFY_CODE:15518497712
验证码value:验证码的值
接口设计:
编码:
controller:
service:
验证码生成方法:
发送短信整体业务:
短信服务:阿里云短信服务
导入maven依赖
复制示例代码
稍微修改实例代码(access-key-id,access-key-secret)
-