企业官网建设流程全解析

前言

在当今这个快节奏的数字时代，用户体验已经成为产品成功的关键因素之一。传统的用户名密码登录方式，虽然安全可靠，但对于用户来说，注册流程繁琐、记忆密码困难，往往是用户流失的重灾区。

而手机号验证码登录，凭借其"即用即走"的便利性，已经成为主流应用的首选方案。不用注册、不用记密码、输入手机号收个验证码就能登录，体验简直不要太丝滑！

今天，我就带你从零搭建一个完整的验证码登录系统，使用 Spring Boot 3 + 阿里云短信服务，从后端 API 到前端页面，全流程实战！

项目概览

我们要实现的功能包括：

✅发送短信验证码- 通过阿里云短信服务发送 6 位验证码
✅验证码验证- 验证用户输入的验证码是否正确
✅用户注册- 新用户通过验证码完成注册
✅用户登录- 已注册用户通过验证码登录
✅精美界面- 提供登录、注册、首页三个页面

用户流程：
首页 → 登录/注册 → 输入手机号 → 收验证码 → 登录成功 → 返回首页

技术栈选择

工欲善其事，必先利其器。我们选择以下技术栈：

为什么选择这些技术？

1. Spring Boot 3：最新的 Spring 生态，支持 Java 17+，开发效率极高

2. 阿里云短信：国内最成熟的短信服务之一，稳定性有保障

3. H2：零配置嵌入式数据库，演示项目的不二之选

4. Thymeleaf：自然模板，前后端不分离的项目首选

第一步：项目初始化

1.1 创建 Maven 项目

首先，创建一个标准的 Spring Boot Maven 项目。pom.xml依赖如下：

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>3.2.5</version> </parent> <groupId>com.example</groupId> <artifactId>aliyun-sms-demo</artifactId> <version>1.0.0</version> <properties> <java.version>17</java.version> </properties> <dependencies> <!-- Web --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- 参数校验 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-validation</artifactId> </dependency> <!-- JPA --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <!-- H2 数据库 --> <dependency> <groupId>com.h2database</groupId> <artifactId>h2</artifactId> <scope>runtime</scope> </dependency> <!-- 模板引擎 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!-- 阿里云短信 SDK --> <dependency> <groupId>com.aliyun</groupId> <artifactId>dypnsapi20170525</artifactId> <version>1.2.3</version> </dependency> <!-- Lombok 减少样板代码 --> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> </dependencies> </project>

1.2 配置文件

创建application.yml配置文件：

server: port: 8080 spring: application: name: aliyun-sms-demo datasource: url: jdbc:h2:file:./data/smsdb driver-class-name: org.h2.Driver username: sa password: jpa: hibernate: ddl-auto: update show-sql: true thymeleaf: cache: false # 阿里云短信配置（替换为你自己的配置） aliyun: sms: access-key-id: 你的AccessKey ID access-key-secret: 你的AccessKey Secret endpoint: dypnsapi.aliyuncs.com sign-name: 你的短信签名 template-code: 你的模板编码 code-length: 6 code-expire-seconds: 300 send-interval-seconds: 60

第二步：核心代码实现

2.1 配置属性类

使用 Spring Boot 的@ConfigurationProperties将配置文件中的配置绑定到 Java 对象：

@Data @Component @ConfigurationProperties(prefix = "aliyun.sms") public class SmsProperties { private String accessKeyId; private String accessKeySecret; private String endpoint; private String signName; private String templateCode; private int codeLength = 6; private long codeExpireSeconds = 300; private long sendIntervalSeconds = 60; }

这样，我们就可以在代码中直接注入SmsProperties来获取配置，而不是到处写硬编码的配置值。

2.2 用户实体类

定义用户实体，对应数据库中的users表：

@Data @Entity @Table(name = "users") public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(unique = true, nullable = false) private String phone; @Column(nullable = false) private String nickname; private LocalDateTime createTime; private LocalDateTime lastLoginTime; @PrePersist protected void onCreate() { createTime = LocalDateTime.now(); } }

关键点：

• @Column(unique = true)：确保手机号唯一

• @PrePersist：在实体持久化前自动设置创建时间

• LocalDateTime：JDK 8+ 引入的现代日期时间 API