004 验证码注册

文章目录

- ResourcesConfig.java
- UserController.java
- User.java
- UserServiceImpl.java
- IUserService.java
- MsgUtils.java
- ServerResult.java
- FshopAppApplication.java
- ServletInitializer.java
- user.sql
- UserMapper.xml
- application.yaml
- login.html
- login.js
- index.html
- index.js
- pom.xml

ResourcesConfig.java


package com.fshop.config;

import com.fshop.interceptor.JwtInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.*;

@Configuration
@EnableWebMvc
public class ResourcesConfig implements WebMvcConfigurer {

    // 注册拦截器
    public void addInterceptors(InterceptorRegistry registry){

        registry.addInterceptor(new JwtInterceptor()).addPathPatterns("/**") //所有资源，包括静态资源
                // COMMON、CSS、JS、IMAGES
                .excludePathPatterns("/common/**")
                .excludePathPatterns("/css/**")
                .excludePathPatterns("/js/**")
                .excludePathPatterns("/images/**")
                // 首页
                .excludePathPatterns("/index.html")
                .excludePathPatterns("/index-slider.html")
                .excludePathPatterns("/favicon.png")
                // 登录
                .excludePathPatterns("/html/user/login.html")
                .excludePathPatterns("/user/login")
                .excludePathPatterns("/user/public-key")
                .excludePathPatterns("/user/register")
                .excludePathPatterns("/user/loginUserName")
                .excludePathPatterns("/html/user/login-pwd.html")
                .excludePathPatterns("/user/sendSmsCode")
                // 水果
                .excludePathPatterns("/html/fruit/**")
                .excludePathPatterns("/fruit/**")
                // 优惠券
                .excludePathPatterns("/html/coupon/**")
                // 评价（测试）
                .excludePathPatterns("/html/user/user-evaluate.html")
                .excludePathPatterns("/evaluate/**")
                // 支付（测试）
                .excludePathPatterns("/html/order/order-payment.html")
                .excludePathPatterns("/payment/**");

    }

    // 静态资源配置
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("/","classpath:webapp/");
        WebMvcConfigurer.super.addResourceHandlers(registry);
    }


}

UserController.java


package com.fshop.controller;

import com.fshop.common.R;
import com.fshop.dto.LoginUserDto;
import com.fshop.entity.User;
import com.fshop.rsa.RSAKeyPairGenerator;
import com.fshop.service.IUserService;
import com.fshop.util.JwtUtil;
import com.fshop.util.ServerResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;

/**
 * <p>
 * 用户表 前端控制器
 * </p>
 *
 * @author dev
 * @since 2024-04-23
 */
@RestController
@RequestMapping("/user")
public class UserController {


    @Autowired
    private IUserService userService;

    @GetMapping("{userId}")
    public User getById(@PathVariable("userId") Integer userId){
        return userService.getById(userId);
    }

    @PostMapping("login")
    public ServerResult login(User user){
        String userPasswordHash = user.getUserPasswordHash();
        String userPhone =  user.getUserPhone();
        // System.out.println("controller层"+userName+userPasswordHash);
        // System.out.println(result);
        return userService.login(userPhone,userPasswordHash);
    }

    // 用户名回显
    @GetMapping("loginUserName")
    public R<String> loginUserName(HttpServletRequest request){
        String token = request.getHeader("token");
        LoginUserDto loginUserDto = null;
        try {
            loginUserDto = JwtUtil.parseToken(token);
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
        if (loginUserDto != null){
            return R.ok("解析成功", loginUserDto.getUserName());
        }
        return R.error("解析失败");
    }


    @GetMapping("/public-key")
    public String getPublicKey() {
        // 返回Base64编码的公钥
        return RSAKeyPairGenerator.publickey64();
    }


    @PostMapping("register")
    public ServerResult register(@RequestParam String username, @RequestParam String password, @RequestParam String confirmPassword, @RequestParam String smsCode, @RequestParam String phoneNumber){





        //userService.sendSmsVerificationCode(phoneNumber); // 发送验证码
        // 实际应用中，验证码验证通常会在用户输入后进行，这里简化为连续操作
        return userService.register(username, password, confirmPassword, smsCode, phoneNumber);

    }



    @PostMapping("sendSmsCode")
    public ServerResult sendSmsCode(@RequestParam String phoneNumber) {
        // 调用service层的发送验证码方法
        if(userService.sendSmsVerificationCode(phoneNumber)){
            return ServerResult.smsSuccess("验证码发送成功");
        }
        return ServerResult.smsFail("验证码发送失败");

    }
}

User.java


package com.fshop.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;
import java.time.LocalDateTime;

/**
 * <p>
 * 用户表
 * </p>
 *
 * @author dev
 * @since 2024-04-23
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class User implements Serializable {

    private static final long serialVersionUID = 1L;

    /**
     * 用户ID
     */
    @TableId(value = "user_id", type = IdType.AUTO)
    private Integer userId;

    /**
     * 用户名
     */
    private String userName;

    /**
     * 用户密码，md5加密
     */
    private String userPasswordHash;

    /**
     * 头像URL
     */
    private String userAvatarUrl;

    /**
     * 手机号码
     */
    private String userPhone;

    /**
     * 用户状态：已注销0、已冻结1、已激活2
     */
    private Byte userStatus;

    /**
     * 版本
     */
    private Integer version;

    /**
     * 创建（注册）时间
     */
    private LocalDateTime userCreateTime;

    /**
     * 最近更新时间
     */
    private LocalDateTime updateTime;

    private String other1;

    private String other2;

}

UserServiceImpl.java


package com.fshop.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.fshop.entity.User;
import com.fshop.mapper.UserMapper;
import com.fshop.rsa.RSAKeyPairGenerator;
import com.fshop.service.IUserService;
import com.fshop.util.JwtUtil;
import com.fshop.util.MsgUtils;
import com.fshop.util.ServerResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.time.LocalDateTime;

/**
 * <p>
 * 用户表 服务实现类
 * </p>
 *
 * @author dev
 * @since 2024-04-23
 */
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {

    @Autowired
    private  UserMapper userMapper;

    private String generatedSmsCode = null;

    @Override
    public ServerResult login(String userPhone, String userPassword){



        try {
            System.out.println("seivice层");
            System.out.println("userpassBefore:"+userPassword);
            userPassword = RSAKeyPairGenerator.decrypt(userPassword);
            System.out.println("userpassAfter:"+userPassword);
        } catch (Exception e) {
            throw new RuntimeException(e);
        }

        QueryWrapper<User> wrapper = new QueryWrapper<>();
        wrapper.eq("user_phone",userPhone).eq("user_password_hash",userPassword);
        User user = userMapper.selectOne(wrapper);
        if(user != null){
            // System.out.println("service层user 登录");
            String token = null;
            try {
                token = JwtUtil.createToken(user.getUserId(),user.getUserName());
            } catch (Exception e) {
                throw new RuntimeException(e);
            }
            return ServerResult.loginSuccess(token);
        }
        return ServerResult.loginFail("用户登录失败");
    }







    public ServerResult register(String username, String password, String confirmPassword, String smsCode, String phoneNumber){

        QueryWrapper<User> wrapper = new QueryWrapper<>();
        wrapper.eq("user_phone",phoneNumber);
        if(userMapper.exists(wrapper)){
            return ServerResult.registerFail("手机号码已存在");
        }


        wrapper = new QueryWrapper<>();
        wrapper.eq("user_name",username);
        if(userMapper.exists(wrapper)){
            return ServerResult.registerFail("用户名已存在");
        }

        if (!password.equals(confirmPassword)) {
            return ServerResult.registerFail("两次输入密码不一致");
        }

        if (!verifySmsCode(smsCode, generatedSmsCode)) {
            return ServerResult.registerFail("验证码错误");
        }

        User user = new User();
        user.setUserName(username);
        user.setUserPasswordHash(password);
        user.setUserPhone(phoneNumber);
        user.setUserStatus((byte)1);
        user.setUserCreateTime(LocalDateTime.now());
        user.setUpdateTime(LocalDateTime.now());
        int rows = userMapper.insert(user);
        if(rows > 0){
            System.out.println("添加用户成功");
            return ServerResult.registerSuccess(user);
        }
        return ServerResult.registerFail(user);





    }




    @Override
    public boolean sendSmsVerificationCode(String phoneNumber) {
        generatedSmsCode = generateRandomSmsCode(); // 实际应用中应调用短信服务商API

        boolean isSend = MsgUtils.sendSmsVerificationCode(phoneNumber,generatedSmsCode,"您的验证码已用于注册，请勿泄露给他人。");
        System.out.println("SMS code sent to " + phoneNumber + ": " + generatedSmsCode);

        if (isSend){
            return true;
        }
        return false;


    }



    private String generateRandomSmsCode() {
        //return "123";
        return String.valueOf((int) (Math.random() * 9000 + 1000)); // 简化版验证码生成
    }




    //判断用户输入密码与生成密码是否一致
    @Override
    public boolean verifySmsCode(String smsCode, String expectedCode) {
        System.out.println("用户输入的密码:"+smsCode);
        System.out.println("生成的密码:"+expectedCode);
        return expectedCode != null && expectedCode.equals(smsCode);
    }

}

IUserService.java



package com.fshop.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.fshop.entity.User;
import com.fshop.util.ServerResult;

/**
 * <p>
 * 用户表 服务类
 * </p>
 *
 * @author dev
 * @since 2024-04-23
 */
public interface IUserService extends IService<User> {

    public ServerResult login(String userPhone, String userPassword);





    public ServerResult register(String username, String password, String confirmPassword, String smsCode, String phoneNumber);



    public boolean sendSmsVerificationCode(String phoneNumber);

    public boolean verifySmsCode(String smsCode, String expectedCode);




}

MsgUtils.java


package com.fshop.util;

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.NameValuePair;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.message.BasicNameValuePair;
import org.apache.http.util.EntityUtils;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;




public class MsgUtils {

    private static final String USER_NAME = ""; // 短信服务商提供的用户名
    private static final String KEY = ""; // 短信服务商提供的密钥
    private static final String URL = ""; // 短信服务商提供的API地址，注意这里应该是HTTPS，但示例中使用了HTTP

    // 假设HttpClient是线程安全的单例，或者您可以根据需要使用HttpClientBuilder来创建实例
    private static final HttpClient HTTP_CLIENT = HttpClients.createDefault();

    // 发送短信验证码的方法
    public static boolean sendSmsVerificationCode(String phoneNumber, String smsCode, String content) {

        System.out.println("Generated SMS code: " + smsCode);

        // 构造请求参数
        List<NameValuePair> params = new ArrayList<>();
        params.add(new BasicNameValuePair("user", USER_NAME));
        params.add(new BasicNameValuePair("key", KEY));
        params.add(new BasicNameValuePair("mobile", phoneNumber)); // 注意这里只发送一个手机号码
        params.add(new BasicNameValuePair("content","验证码是:"+smsCode+content));

        // 发送HTTP请求
        try {
            HttpPost httpPost = new HttpPost(URL);
            httpPost.setEntity(new UrlEncodedFormEntity(params, "UTF-8")); // 使用UTF-8编码
            HttpResponse response = HTTP_CLIENT.execute(httpPost);
            HttpEntity entity = response.getEntity();
            String responseBody = EntityUtils.toString(entity, "UTF-8"); // 假设响应也是UTF-8编码

            // 处理响应（这里只是简单地打印出来，实际应用中需要根据API的响应进行处理）
            System.out.println("Response from SMS API: " + responseBody);

            // 假设只要收到响应就认为发送成功（实际应根据响应内容判断）
            return true;
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }
    }

    // 主方法（如果需要的话，可以保留用于测试）
    public static void main(String[] args) throws Exception {
        String phoneNumber = ""; // 示例手机号码
        String smsCode = ""; // 生成的验证码
        String content = "您的验证码已用于注册，请勿泄露给他人。"; // 短信内容

        boolean success = sendSmsVerificationCode(phoneNumber, smsCode, content);
        if (success) {
            System.out.println("短信验证码发送成功！");
        } else {
            System.out.println("短信验证码发送失败。");
        }
    }
}

ServerResult.java


package com.fshop.util;


import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class ServerResult {
    private int code;
    private String msg;

    private Object data;



    public static ServerResult getSuccess(Object data){
        return new ServerResult(200,"查询成功",data);
    }

    public static ServerResult getFail(Object data){
        return new ServerResult(201,"查询失败",data);
    }


    /**
     * 添加、删除、修改的成功
     * @param data
     * @return
     */

    public static ServerResult updateSuccess(Object data){
        return new ServerResult(200,"处理成功",data);
    }


    /**
     * 添加、删除、修改的失败
     * @param data
     * @return
     */
    public static ServerResult updateFail(Object data){
        return new ServerResult(201,"处理失败",data);
    }


    public static ServerResult loginSuccess(Object data){
        return new ServerResult(200,"登录成功",data);
    }

    public static ServerResult loginFail(Object data){
        return new ServerResult(201,"登录失败",data);
    }



    public static ServerResult registerSuccess(Object data){
        return new ServerResult(200,"注册成功",data);
    }

    public static ServerResult registerFail(Object data){
        return new ServerResult(201,"注册失败",data);
    }


    public static ServerResult smsSuccess(Object data){
        return new ServerResult(200,"发送验证码成功",data);
    }

    public static ServerResult smsFail(Object data){
        return new ServerResult(201,"发送验证码失败",data);
    }


}

FshopAppApplication.java


package com.fshop;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.fshop.mapper")
public class FshopAppApplication {

    public static void main(String[] args) {
        SpringApplication.run(FshopAppApplication.class, args);
    }

}

ServletInitializer.java


package com.fshop;

import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

public class ServletInitializer extends SpringBootServletInitializer {

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(FshopAppApplication.class);
    }

}

user.sql


DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `user_id` int(0) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '用户ID',
  `user_name` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '用户名',
  `user_password_hash` char(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '用户密码，加密',
  `user_avatar_url` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '头像URL',
  `user_phone` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '手机号码',
  `user_status` tinyint(0) NOT NULL COMMENT '用户状态：已注销0、已冻结1、已激活2',
  `version` int(0) UNSIGNED NOT NULL DEFAULT 1 COMMENT '版本',
  `user_create_time` datetime(0) NOT NULL COMMENT '创建（注册）时间',
  `update_time` datetime(0) NOT NULL COMMENT '最近更新时间',
  `other1` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `other2` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  PRIMARY KEY (`user_id`) USING BTREE,
  UNIQUE INDEX `user_name`(`user_name`) USING BTREE,
  UNIQUE INDEX `user_phone`(`user_phone`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci COMMENT = '用户表' ROW_FORMAT = Dynamic;

UserMapper.xml


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.fshop.mapper.UserMapper">

</mapper>

application.yaml


server:
  port: 8080
  servlet:
    context-path: /fshop
spring:
  datasource:
    druid:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://localhost:3306/dict?useSSL=true&useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
      username: root
      password: 123456
      initial-size: 5 # 初始化连接池大小
      max-active: 20  # 最大连接数
      min-idle: 10    # 最小连接数
      max-wait: 60000 # 超时等待时间
      min-evictable-idle-time-millis: 600000  # 连接在连接池中的最小生存时间
      max-evictable-idle-time-millis: 900000  # 连接在连接池中的最大生存时间
      time-between-eviction-runs-millis: 2000 # 配置间隔多久进行一次检测，检测需要关闭的空闲连接
      test-while-idle: true # 从连接池中获取连接时，当连接空闲时间大于timeBetweenEvictionRunsMillis时检查连接有效性
      phy-max-use-count: 1000 # 配置一个连接最大使用次数，避免长时间使用相同连接造成服务器端负载不均衡




logging:
  file:
    name: logs/fshop.log
  level:
    com.fshop: info

login.html


<!-- 登录 -->
<!DOCTYPE html>
<html lang="ch">
<head>
  <meta charset="UTF-8">
  <title>登陆注册</title>
  <script src="../../common/jquery-3.3.1.min.js"></script>
  <script src="../../common/jquery.form.js"></script>
  <script src="../../js/user/jsencrypt.min.js"></script>
</head>
<body>
  <div class="content">


    <div class="form sign-in">
      <h2 class="h2">欢迎回来,果友们！</h2><br/>
      <label>
        <span>电话</span>
        <input type="phone" id="L_phone" />
      </label>
      <label>
        <span>密码</span>
        <input type="password" id="L_pwd"/>
      </label>

      <button type="button" class="submit" id="submit" >登 录</button>

      <a class="login_fg_a" href="../user/login-pwd.html">忘记密码？</a>
    </div>


    <div class="sub-cont">


      <div class="img">
        <div class="img__text m--up">
          <h1>还未注册？</h1>
          <p>立即注册，尝果味人生。</p>
        </div>
        <div class="img__text m--in">
          <h2>已有帐号？</h2>
          <p>好久不见了！快进入果粒世界。</p>
        </div>
        <div class="img__btn">
          <span class="m--up">注 册</span>
          <span class="m--in">登 录</span>
        </div>
      </div>


          <div class="form sign-up">
            <h2>立即注册,果友们！</h2>
              <label>
                <span>用户名</span>
               <input type="text"  id="R_user"/>
             </label>

            <label>
              <span>手机号码</span>
              <input type="text"  id="R_number"/>
            </label>

            <label>
                 <span>密码</span>
                 <input type="password" id="R_passwors"/>
            </label>

            <label>
                <span>确认密码</span>
            <input type="password" id="R_tpwd"/>
            </label>

            <label class="label">
              <span class="span">短信验证码</span><br>
              
              <span><input type="text" class="L_note" id="R_pin"/> </span>
              
              <button class="L_but" type="button" id="getVerificationCode">获取验证码</button>
      
            </label>
            
            <a href="" class="mml">
             <button type="button" class="submit" id="submitR" >注 册</button>
            </a>
            
        </div>


     </div>
</div>

  <script src="../../js/user/login.js"></script>
</body>
   
</html>

login.js




document.querySelector('.img__btn').addEventListener('click', function() {
    document.querySelector('.content').classList.toggle('s--signup')
})






$(document).ready(function() {
    // 当DOM加载完成后执行此函数
    $.ajax({
        url: 'http://localhost:8080/fshop/user/public-key', // 假设这是返回公钥的API端点
        type: 'GET',
        dataType: 'text', // 明确指定期望接收的数据类型为文本
        success: function(publicKeyData) {
            // publicKeyData现在包含从服务器获取的公钥数据，可能是Base64编码的字符串
            console.log(publicKeyData);
            // 你可以将其解码并存储在某个变量中以备后用
            //var publicKey = atob(publicKeyData); // 如果publicKeyData是Base64编码的
            var publicKey = publicKeyData;
            // 现在你可以将publicKey存储在一个全局变量中，以便在页面的其他地方使用
            window.publicKey = publicKey;

            // 如果你需要在页面加载后立即使用公钥进行某些操作，可以在这里添加代码
            // ...
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // 处理错误情况
            console.error("获取公钥时发生错误: " + textStatus, errorThrown);
        }
    });
});



// function btn(){
//     window.location.href = '../index.html';
//   }

    $("#submit").click(function (){
        let encrypt = new JSEncrypt();
        encrypt.setPublicKey(window.publicKey);
        console.log(window.publicKey);



    let userphone = $('#L_phone').val();
    let password = $('#L_pwd').val();

        // 使用公钥加密密码
        let encryptedPassword = encrypt.encrypt(password);


    console.log(userphone);
    console.log(password);
    console.log(encryptedPassword);

    let formData = {
    userPhone: userphone,
    userPasswordHash: encryptedPassword
};
    //let formDataSerialized = $.param(formData);

    $.ajax({
    url: 'http://localhost:8080/fshop/user/login', //
    type: 'POST',
    data: formData,
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8', // 直接发送对象
    success: function(result) {
    console.log(result)
    if(result.code ==200){
    localStorage.setItem("token",result.data);  // 1.保存token
    window.location.href = "../../index.html";
}else{
    // $(".login_tip").text(result.data);
}
},
    error: function() {
    // $('#response').text('Error occurred: ' + error);
    // 在此处处理 AJAX 请求错误。
}
});


});



$("#submitR").click(function (event){
    event.preventDefault();

//$(document).on('click', '#submitR', function() {

    let username = $('#R_user').val();
    let userphone = $('#R_number').val();
    let password = $('#R_passwors').val();
    let confirmpassword = $('#R_tpwd').val();
    let pin = $('#R_pin').val();

    let formData = {
        username: username,
        password: password,
        confirmPassword: confirmpassword,
        smsCode: pin, // 与控制层方法参数保持一致
        phoneNumber: userphone // 假设userphone是电话号码
    };




    $.ajax({
        url: 'http://localhost:8080/fshop/user/register', //
        type: 'POST',
        data: $.param(formData), // 使用$.param()来格式化数据为x-www-form-urlencoded,
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8', // 直接发送对象
        dataType: 'json',
        success: function(result) {
                console.log(result);

            if (result && typeof result === 'object' && result.code) {
                // 检查状态码，确定请求是否成功
                if (result.code === 200) {
                    // 注册成功处理逻辑
                    window.location.href = "../../index.html";
                    console.log("注册成功！");
                } else if (result.code === 201 && result.data != null) {
                    // 注册失败，给出相应提示
                    if (typeof result.data === 'string') { // 确保 result.data 是字符串
                        if (result.data === "手机号码已存在") {
                            console.log("1");
                            alert("手机号码已存在，可直接登录。");
                        } else if (result.data === "用户名已存在") {
                            console.log("2");
                            alert("用户名已存在，换个用户名");
                        } else if (result.data === "两次输入密码不一致") {
                            console.log("3");
                            alert("两次输入密码不一致");
                        } else {
                            // 其他未知错误
                            alert("注册失败：" + result.data);
                        }
                    } else {
                        // 如果 result.data 不是字符串，给出错误提示
                        alert("注册失败，返回的数据格式不正确。");
                    }
                } else {
                    // 处理其他状态码或 result.data 为空的情况
                    alert("注册过程中发生未知错误");
                }
            }else {
                // 如果 result 不是对象或没有 code 属性，给出错误提示
                alert("未收到有效的响应数据。");
            }
            },
        error: function() {
            console.log("没有响应，，，")
            // $('#response').text('Error occurred: ' + error);
            // 在此处处理 AJAX 请求错误。
        }
    });


});








// 处理获取验证码按钮的点击事件
$("#getVerificationCode").click(function(event) {
    event.preventDefault();
    let userphone = $('#R_number').val();
    if (!userphone) {
        alert("请输入手机号码！");
        return;
    }
    // 发送AJAX请求到后端以获取验证码（这里假设后端有一个API来处理这个请求）
    $.ajax({
        url: 'http://localhost:8080/fshop/user/sendSmsCode', // 假设的发送验证码API端点
        type: 'POST',
        data: { phoneNumber: userphone },
        success: function(response) {
            if (response.code === 200) {
                alert("验证码已发送，请注意查收！");
            } else {
                alert("发送验证码失败：" + response.message);
            }
        },
        error: function() {
            alert("发送验证码请求失败！");
        }
    });
});

index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>果粒优选</title>



    <script src="./common/jquery-3.3.1.min.js"></script>
    <script src="./common/vue.js"></script>
    <script src="./common/element-ui/lib/index.js"></script>


</head>

<body>
    <div id="app">
        <!-- 顶部工具栏 -->
        <div id="tool-nav">
            <div class="center clearfix">
                <ul class="fl">
                    <li class="tool-nav-li"><span>欢迎来到果粒优选！</span></li>
                    <li class="tool-nav-li enable-click">
                        <a id="login-if" href="./html/user/login.html">登录/注册</a>
                    </li>
                </ul>

            </div>
        </div>


    </div>

</body>
<script type="text/javascript" src="./js/index.js"></script>
<script>
    
</script>
</html>

index.js





let token = localStorage.getItem('token');

console.log(token);

let loginIf = document.getElementById('login-if');

if (token != null && token !== '') {
    // 已经登陆，在工具栏显示用户名
    $.ajax({
        url: '/fshop/user/loginUserName',
        type: 'GET',
        headers: {'token': token},
        success: function (result) {
            if (result.code === 1) {
                loginIf.innerText = result.data;
                //loginIf.setAttribute('href', './html/user/user-evaluate.html');
            }
        }
    });
}

pom.xml


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.6</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <groupId>com.fshop</groupId>
    <artifactId>fshop-app</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>fshop-app</name>
    <description>fshop-app</description>

    <packaging>war</packaging>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>

        <!--短信-->
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.13</version>
        </dependency>

        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpcore</artifactId>
            <version>4.4.15</version>
        </dependency>


        <!-- SPRINGBOOT -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- JDBC -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.33</version>
        </dependency>
        <!-- MYBATIS PLUS -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
        <!-- DRUID -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.9</version>
        </dependency>


        <!--REDIS-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>

        <!-- JWT -->
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
            <version>0.9.1</version>
        </dependency>

        <!-- ALIPAY -->
        <dependency>
            <groupId>com.alipay.sdk</groupId>
            <artifactId>alipay-sdk-java</artifactId>
            <version>4.39.58.ALL</version>
        </dependency>

        <!-- LOMBOK -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.7.6</version>
            </plugin>
        </plugins>
    </build>

</project>