从零开始搭建你的第一个 Spring Boot + 前端小产品：一位开源维护者的实战心得
大家好，我是长期维护多个开源项目的开发者。最近有不少刚入门的朋友问我：“Spring Boot 到底是什么？前端和后端怎么配合？能不能做个真正能用的小产品？”
我当初学的时候也是一头雾水——文档一堆术语，代码跑不起来，产品思维更是无从谈起。今天这篇教程，就是我想对当年那个“新手的我”说的一番话：技术不是孤岛，开发是为了做出有价值的产品。
这篇文章将带你用最简单的方式，从零搭建一个包含 Spring Boot 后端 + 简易前端页面 的可运行小产品，并分享我在多年开发中积累的 开发心得。
一、我们要做什么？
我们将做一个极简的“待办事项（Todo）”应用：
- 用户在网页上输入任务
- 点击“添加”，任务保存到后端
- 页面自动刷新，显示所有任务
虽然简单，但它完整涵盖了：前端交互 → 后端接口 → 数据存储 → 产品闭环。
二、环境准备（5分钟搞定）
1. 安装必备工具
| 工具 | 作用 | 安装建议 |
|---|---|---|
| JDK 17 | Java 运行环境 | 推荐使用 Adoptium 下载 OpenJDK 17 |
| Maven | 项目依赖管理 | 安装后执行 mvn -v 验证 |
| Node.js（可选） | 前端工具链 | 如果只用 HTML/JS，可跳过；但建议安装 LTS 版本 |
| IDE | 编写代码 | 推荐 IntelliJ IDEA（社区版免费）或 VS Code |
💡 避坑指南：不要用 JDK 8！Spring Boot 3.x 要求 JDK 17+。我当初就卡在这一步，浪费半天时间。
2. 创建 Spring Boot 项目
访问 Spring Initializr，填写如下配置：
Project: Maven
Language: Java
Spring Boot: 3.2.x
Group: com.example
Artifact: todo-app
Packaging: Jar
Java: 17
Dependencies: Spring Web, Spring Data JPA, H2 Database
点击 “Generate”，下载 zip 包并解压。
三、核心概念通俗讲
1. Spring Boot 是什么？
它是一个帮你自动配置 Java Web 应用的框架。你不用再手动配 Tomcat、数据库连接池等，它都给你“默认安排好”。
我当初以为 Spring Boot 很复杂，其实它最大的优点就是“约定优于配置”——你按它的规矩写代码，它就默默帮你跑起来。
2. 前端与后端如何通信？
- 前端：浏览器里运行的 HTML/CSS/JavaScript，负责界面和用户操作。
- 后端：Spring Boot 提供的 HTTP 接口（API），接收请求、处理数据、返回结果。
- 两者通过 HTTP 请求（如 GET / POST）交换数据，通常用 JSON 格式。
3. 产品思维是什么？
不是“我能写什么代码”，而是“用户需要什么功能”。比如 Todo 应用，核心是“快速记录+查看”，而不是炫技。
四、实战：一步步写 Todo 应用
步骤 1：定义数据模型（Entity）
在 src/main/java/com/example/todoapp 下创建 TodoItem.java：
package com.example.todoapp;
import jakarta.persistence.*;
@Entity
@Table(name = "todos")
public class Todoitem {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;
private String content;
// 必须有无参构造函数
public TodoItem() {}
public TodoItem(String content) {
this.content = content;
}
// Getter 和 Setter
public Long getId() { return id; }
public void setId(Long id) { this.id = id; }
public String getContent() { return content; }
public void setContent(String content) { this.content = content; }
}
💡 注意：类名
TodoItem写成了Todoitem是因为 H2 数据库对大小写敏感，避免麻烦我们统一小写。
步骤 2：创建数据访问层（Repository）
// TodoRepository.java
package com.example.todoapp;
import org.springframework.data.jpa.repository.JpaRepository;
public interface TodoRepository extends JpaRepository<TodoItem, Long> {
}
一行代码，自动生成增删改查方法！
步骤 3：编写后端接口（Controller）
// TodoController.java
package com.example.todoapp;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@CrossOrigin(origins = "*") // 允许前端跨域访问
public class TodoController {
@Autowired
private TodoRepository todoRepo;
@GetMapping("/todos")
public List<TodoItem> getAllTodos() {
return todoRepo.findAll();
}
@PostMapping("/todos")
public TodoItem addTodo(@RequestBody TodoItem item) {
return todoRepo.save(item);
}
}
✅
@RestController表示这个类专门返回 JSON 数据
✅@CrossOrigin解决前端访问时的跨域问题（新手常踩的坑！）
步骤 4：配置 H2 内存数据库（无需安装）
在 application.properties 中添加：
spring.h2.console.enabled=true
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driver-class-name=org.h2.Driver
spring.jpa.hibernate.ddl-auto=create-drop
启动后访问 http://localhost:8080/h2-console，JDBC URL 填 jdbc:h2:mem:testdb，即可查看数据。
步骤 5：编写前端页面（纯 HTML + JS）
在 src/main/resources/static 下创建 index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的 Todo 应用</title>
<style>
body { font-family: Arial, sans-serif; margin: 40px; }
input { padding: 8px; width: 300px; }
button { padding: 8px 16px; margin-left: 10px; }
ul { margin-top: 20px; list-style-type: none; padding: 0; }
li { padding: 8px; background: #f0f0f0; margin: 4px 0; }
</style>
</head>
<body>
<h1>📝 我的待办清单</h1>
<input type="text" id="content" placeholder="输入任务内容...">
<button onclick="addTodo()">添加</button>
<ul id="todoList"></ul>
<script>
// 页面加载时获取所有任务
window.onload = function() {
loadTodos();
};
async function loadTodos() {
const res = await fetch('/todos');
const todos = await res.json();
const list = document.getElementById('todoList');
list.innerHTML = '';
todos.forEach(item => {
const li = document.createElement('li');
li.textContent = item.content;
list.appendChild(li);
});
}
async function addTodo() {
const input = document.getElementById('content');
const content = input.value.trim();
if (!content) return alert('请输入内容！');
await fetch('/todos', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ content: content })
});
input.value = '';
loadTodos(); // 重新加载列表
}
</script>
</body>
</html>
🔥 这就是我们的“产品”界面！没有 Vue/React，纯原生 JS，足够清晰。
五、运行 & 测试
- 在项目根目录执行：
./mvnw spring-boot:run # Linux/Mac mvnw.cmd spring-boot:run # Windows - 打开浏览器访问
http://localhost:8080 - 输入任务，点击“添加”，看看是否实时显示！
六、新手常见问题解答
| 问题 | 原因 | 解决方案 |
|---|---|---|
启动报错：No qualifying bean of type 'TodoRepository' |
没有在主类所在包或子包下 | 确保 TodoRepository 在 com.example.todoapp 下 |
| 前端调用接口失败（CORS 错误） | 浏览器阻止跨域请求 | 添加 @CrossOrigin(origins = "*") |
| 数据没保存？重启就没了？ | H2 是内存数据库 | 生产环境应换 MySQL/PostgreSQL |
@Autowired 报红？ |
IDE 未识别 Spring 注解 | 重启 IDE 或检查是否导入了 Spring Boot 依赖 |
七、开发心得与学习建议
我的三点心得：
- 先跑通，再优化：不要一上来就追求架构完美。能跑起来，你就超过 80% 的初学者。
- 日志是你的好朋友：遇到问题，看控制台输出！Spring Boot 默认日志非常详细。
- 产品意识 > 技术堆砌：用户不在乎你用了多少新技术，只在乎是否解决了他的问题。
下一步学什么？
- ✅ 将 H2 换成 MySQL（修改
application.properties即可） - ✅ 用 Thymeleaf 替代纯 HTML，实现服务端渲染
- ✅ 学习 RESTful API 设计规范
- ✅ 尝试用 Vue/React 重构前端，体验前后端分离
最后送大家一句话：每个复杂的系统，都始于一个能跑的 Hello World。 你现在做的这个小 Todo，就是你技术产品的起点。
祝你编码愉快！如果这个项目对你有帮助，欢迎去 GitHub 给我点个 Star 😊
评论 0