实现注册手机号验证功能（springboot+vue家教平台项目）

一.功能概述

在开发过程中，我想到现在每个人都有自己独有的手机号，所以我想在注册过程中添加一下手机号验证功能，即检验当前输入的手机号是否存在于后端的数据库中。

二.思路介绍

前端

1. 手机号输入后实时验证：在用户输入手机号时，前端可以发送一个异步请求（如 axios 请求）到后端，查询该手机号是否已存在于数据库中。这可以通过 v-model 和 @input 事件监听来实现，当用户输入手机号时，触发该事件并发送请求。

2. 显示错误信息：如果后端返回的结果表明手机号已经注册过，前端会在页面上显示一条错误信息，提示用户该手机号已被注册，并阻止用户继续注册操作。

3. 提交注册表单：在用户点击注册按钮时，再次检查手机号是否存在，防止绕过前端验证。若手机号未被注册，继续执行注册流程。

后端

1. 手机号存在性检查接口：在后端，创建一个新的 API 接口，用于接收前端发送的手机号，并查询数据库中是否存在该手机号。接口应返回一个布尔值或带有信息的响应，表示该手机号是否已注册。

2. 注册接口验证：在现有的注册逻辑中，先调用上述手机号检查逻辑，确认手机号未被注册后，再继续完成注册流程。如果手机号已经存在，返回错误信息，告知前端注册失败。

接口交互

1. 前端发送 POST 请求到后端接口，传递手机号作为参数。
2. 后端查询数据库，检查该手机号是否存在。
3. 后端返回结果给前端，前端根据结果决定是否允许用户继续注册。

验证点

1. 实时验证：在用户输入时进行的验证，提供即时反馈。
2. 表单提交时验证：在最终提交注册时，进行一次更严格的检查，确保没有绕过前端的验证。

三.后端开发

1.mapper接口添加检验方法（根据输入的电话号返回信息，若数据不为0则代表该电话号已被注册）

User selectByPhone1(String userPhone);

2.mapper.xml实现sql语句：

<mapper namespace="com.example.mapper.UserMapper">
    <select id="selectByPhone1" resultType="com.example.entity.User">
        select * from user_view where user_phone=#{userPhone}
    </select>
</mapper>

3.Service接口中添加方法：

boolean checkPhoneRegistered(String userPhone);

4.ServiceImpl实现类实现该方法：

  @Override
    public boolean checkPhoneRegistered(String userPhone) {
        User user = userMapper.selectByPhone1(userPhone);
        /* if(user){return true;}
         else{return false;}*/
        return user != null;//这个返回比较好，相当于上面的if判断，同时简洁
    }

5.Controller中在原来注册的基础上进行电话号的验证：

@PostMapping("/register")
    public ResponseEntity<ApiResponse<?>> register(@RequestBody RegisterRequest registerRequest) {
        if(userService.checkPhoneRegistered(registerRequest.getPhone())){
            return ResponseEntity.status(400).body(ApiResponse.error("该手机号已被注册"));
        }
        int success = userService.insertUser2(registerRequest);
        if (success>0) {
            return ResponseEntity.ok(ApiResponse.success("注册成功",null));
        } else {
            return ResponseEntity.status(400).body(ApiResponse.error("注册失败"));
        }
    }

四.postman进行数据验证

先输入一次数据：

再次输入相同数据：

验证成功，现在进行前端界面的代码编写。

五.前端开发

在前端输入重复的手机号进行注册，会在下方报错：