旅游平台day02

1. 用户注册

  • 概述:

    常见的注册方式:邮箱注册、手机号注册、昵称注册、或者以上几种同时支持

    本项目仅仅支持手机号注册

  • 需求:

    项目启动后,访问regist.html进入注册页面

手机号校验

前后台都需要对手机号进行校验

  1. 前端校验:手机号码格式校验?使用正则表达式,需要使用js对手机格式进行合法性认证,验证不通过,页面提示,通过进入下一步校验
    第一位:1开头
    第二位:3 5 7 4 9 8
    长度:11为
    必须为数字
bash 复制代码
创建一个正则表达式来校验手机号码格式通常取决于特定国家的号码规则。
以国际通用的手机号码格式为例,通常手机号码是由国家代码(可选)、一个运营商的代码,
紧随着一个特定的号码序列组成的。
例如,对于中国的手机号码,通常是以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个)。
- `$` 表示字符串的结束。

这个正则表达式仅适用于中国的手机号码格式。
如果您需要校验其他国家的手机号码格式,正则表达式可能会有所不同,
需要根据该国的手机号码规则来调整。
  1. 后端校验:唯一性校验?是否已经注册?后端提供一个接口进行手机号码校验
    这个需求前端无法实现,需要后端查询数据库进行校验。
  • 接口设计:
bash 复制代码
请求地址:/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. 后端

    • 定义发送短信接口,收到请求后,向对应手机号发送短信

      实现步骤:

      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)

逻辑实现

细节优化

真实短信发送

相关推荐
开心工作室_kaic21 小时前
基于微信小程序的校园失物招领系统的设计与实现(论文+源码)_kaic
c语言·javascript·数据库·vue.js·c#·旅游·actionscript
程序员大金2 天前
基于SpringBoot+Vue+MySQL的旅游网站
javascript·vue.js·spring boot·后端·mysql·intellij-idea·旅游
小雨cc5566ru2 天前
Thinkphp/Laravel旅游景区预约系统的设计与实现
android·旅游
创客家4 天前
以旅游购物贸易方式报关出口的货物是什么意思
旅游
程序员大金4 天前
基于SpringBoot+Vue+MySQL的旅游管理系统
javascript·vue.js·spring boot·后端·mysql·mybatis·旅游
程序员阿龙4 天前
基于微信小程序的旅游助手的设计与实现(源码+定制+文档讲解)
微信小程序·小程序·旅游·移动应用开发·旅游信息化·在线预订·导航服务
小雨cc5566ru5 天前
Thinkphp/Laravel基于Vue的重庆旅游网站交互设计与实现
vue.js·laravel·旅游
计算机编程-吉哥5 天前
计算机毕业设计 基于Python的广东旅游数据分析系统的设计与实现 Python+Django+Vue Python爬虫 附源码 讲解 文档
大数据·python·数据分析·毕业设计·旅游·毕业论文·计算机毕业设计选题
计算机程序设计开发6 天前
基于Node.js+Express+MySQL+VUE实现的计算机毕业设计旅游推荐网站
vue.js·spring boot·课程设计·旅游·计算机毕设·计算机毕业设计
计算机学姐7 天前
基于SpringBoot+Vue的旅游攻略平台管理系统
java·vue.js·spring boot·后端·intellij-idea·mybatis·旅游