Reggie外卖项目 —— 移动端小程序之手机验证码登录

最新推荐文章于 2025-02-07 13:48:31 发布

原创

最新推荐文章于 2025-02-07 13:48:31 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #java #前端 #SpringBoot #mybatis-plus

23、手机验证码登录

23.1、需求分析

1、为了方便用户登录，移动端通常都会提供通过手机验证码登录的功能。

2、手机验证码登录的优点：

方便快捷，无需注册，直接登录
使用短信验证码作为登录凭证，无需记忆密码
安全

3、登录流程：

输入手机号码>获取验证码>输入验证码>点击登录>登录成功

注意：通过手机验证码登录，手机号是区分不同用户的标识。

23.2、数据模型

通过手机验证码登录时，涉及的表为user表，即用户表。结构如下：

在这里插入图片描述

23.3、代码开发

23.3.1、梳理交互过程

在开发代码之前，需要梳理一下登录时前端页面和服务端的交互过程：

1、在登录页面（front/page/login.html）输入手机号，点击【获取验证码】按钮，页面发送ajax请求，在服务端调用短信服务API给指定的手机号发送验证码短信。

2、在登录页面输入验证码，点击【登录】按钮，发送ajax请求，在服务端处理登录请求

开发手机验证码登录功能，其实就是在服务端编写代码去处理前端页面发送的这2次请求即可。

23.3.2、准备工作

在开发业务功能前，先将需要用到的类和接口基本结构创建好：

实体类User

/**
 * 用户信息
 */
@Data
public class User implements Serializable {
     
     
    private static final long serialVersionUID = 1L;

    private Long id;

    //姓名
    private String name;

    //手机号
    private String phone;

    //性别 0 女 1 男
    private String sex;

    //身份证号
    private String idNumber;

    //头像
    private String avatar;

    //状态 0:禁用，1:正常
    private Integer status;
}

Mapper接口UserMapper

@Mapper
public interface UserMapper extends BaseMapper<User> {
     
     
}

业务层接口Userservice

public interface UserService extends IService<User> {
     
     
}

业务层实现类UserServiceImpl

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
     
     
}

控制层UserController

@RestController
@RequestMapping("/user")
@Slf4j
public class UserController {
     
     

    @Autowired
    private UserService userService;
}

工具类SMSUtils、validateCodeUtils

【SMSUtils.java】

/**
 * 短信发送工具类
 */
public class SMSUtils {
     
     

   /**
    * 发送短信
    * @param signName 签名
    * @param templateCode 模板
    * @param phoneNumbers 手机号
    * @param param 参数
    */
   public