从零开始搭一个现代化前端项目，后端用 Spring Boot？我来手把手带你跑起来！

大家好，我是老张，985 计算机科班出身，目前在一家大厂做全栈开发。平时也在掘金写些入门教程，很多读者私信问我：“我想学现代 Web 开发，但不知道从哪下手？”“React 和 Spring Boot 到底怎么配合？”

我当初学的时候也是一头雾水——文档太专业、概念太多、环境配到崩溃。所以今天，我就用最朴实的语言、最完整的步骤，带你从零搭建一个前后端分离的现代化项目。不需要任何基础，只要你会用电脑、能装软件，就能跟着做完！

---

一、这个项目到底是什么？

我们要做的，是一个前端用 React 写页面，后端用 Spring Boot 提供数据接口的小应用。比如一个“待办事项列表”：

• 前端（React）负责显示任务、添加任务、打勾完成
• 后端（Spring Boot）负责把任务存到数据库、提供 API 给前端调用

这种架构叫 前后端分离，是现在企业级项目的标准做法。

💡 关键词解释

• React：一个 JavaScript 库，用来构建用户界面（比如网页上的按钮、列表）
• Spring Boot：一个 Java 框架，用来快速开发后端服务（比如处理请求、连数据库）
• 资源：指项目中所有文件——代码、图片、配置文件等，都是“资源”

---

二、环境准备：5 分钟装齐所有工具

别怕！我们只需要装三个东西：

工具	作用	安装方式
Node.js	运行 JavaScript（前端必备）	官网下载 LTS 版：https://nodejs.org
JDK 17+	运行 Java（后端必备）	推荐 Adoptium 的 Temurin 17
IDE	写代码的编辑器	前端用 VS Code，后端用 IntelliJ IDEA（社区版免费）

验证是否安装成功

打开终端（Windows 用 PowerShell，Mac 用 Terminal），依次输入：

node -v   # 应输出 v18.x 或更高
java -version  # 应输出 17 或更高

如果报错，请重新安装对应工具。

✅ 避坑指南：不要用旧版 Node（<16）或 JDK（<11），否则依赖会报错！

---

三、核心概念：3 分钟搞懂前后端怎么通信

想象你去餐厅点菜：

• 你（前端） 看菜单（页面），点一份宫保鸡丁（发起请求）
• 服务员（API） 把需求传给厨房（后端）
• 厨房（Spring Boot） 做好菜，让服务员端给你（返回数据）

在代码里，这个“点菜”动作就是 HTTP 请求，比如：

// 前端向后端要数据
fetch('http://localhost:8080/api/tasks')
  .then(res => res.json())
  .then(data => console.log(data));

后端则定义一个“接单口”：

// Spring Boot 中的控制器
@RestController
public class TaskController {
    @GetMapping("/api/tasks")
    public List<Task> getTasks() {
        return taskService.findAll();
    }
}

这就是前后端协作的基本逻辑！

---

四、实战：一步步搭建你的第一个项目

我们将分两步：先建后端（Spring Boot），再建前端（React）。

第一步：创建 Spring Boot 后端（提供 API）

1. 打开 Spring Initializr

2. 按如下配置：

   • Project: Maven
   • Language: Java
   • Spring Boot: 3.2.x
   • Group: com.example
   • Artifact: todo-backend
   • Dependencies: 添加 Spring Web, Spring Data JPA, H2 Database

3. 点击 Generate，下载 zip 包并解压

4. 用 IntelliJ IDEA 打开项目，等待 Maven 加载依赖（首次较慢）

5. 创建一个任务实体类 Task.java：

package com.example.todo_backend;

import jakarta.persistence.*;

@Entity
public class Task {
    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String title;
    private boolean completed;

    // 自动生成 getter/setter（IDEA 右键 → Generate）
}

6. 创建 Repository 接口：

package com.example.todo_backend;

import org.springframework.data.jpa.repository.JpaRepository;

public interface TaskRepository extends JpaRepository<Task, Long> {}

7. 创建 Controller 提供 API：

package com.example.todo_backend;

import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@CrossOrigin(origins = "http://localhost:3000") // 允许前端访问
public class TaskController {

    private final TaskRepository taskRepository;

    public TaskController(TaskRepository taskRepository) {
        this.taskRepository = taskRepository;
    }

    @GetMapping("/api/tasks")
    public List<Task> getAllTasks() {
        return taskRepository.findAll();
    }

    @PostMapping("/api/tasks")
    public Task createTask(@RequestBody Task task) {
        return taskRepository.save(task);
    }
}

8. 运行 TodoBackendApplication.java，看到日志 Tomcat started on port 8080 即成功！

🔍 测试 API：浏览器访问 http://localhost:8080/api/tasks，应返回 []（空列表）

---

第二步：创建 React 前端（展示页面）

1. 打开终端，执行：

npx create-react-app todo-frontend
cd todo-frontend
npm start

✨ npx 是 Node 自带的命令，无需全局安装 create-react-app

2. 浏览器自动打开 http://localhost:3000，看到 React 默认页面即成功

3. 修改 src/App.js，实现任务列表：

import { useState, useEffect } from 'react';

function App() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  // 页面加载时获取任务
  useEffect(() => {
    fetch('http://localhost:8080/api/tasks')
      .then(res => res.json())
      .then(data => setTasks(data));
  }, []);

  const addTask = () => {
    if (!newTask.trim()) return;
    fetch('http://localhost:8080/api/tasks', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title: newTask, completed: false })
    })
      .then(res => res.json())
      .then(task => {
        setTasks([...tasks, task]);
        setNewTask('');
      });
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>我的待办事项</h1>
      
      <div>
        <input 
          value={newTask}
          onChange={e => setNewTask(e.target.value)}
          placeholder="输入新任务"
          style={{ marginRight: '10px', padding: '5px' }}
        />
        <button onClick={addTask}>添加</button>
      </div>

      <ul style={{ marginTop: '20px' }}>
        {tasks.map(task => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

4. 保存后，页面自动刷新。现在你可以：
   • 输入任务名称
   • 点击“添加”
   • 新任务出现在列表中！

🎉 恭喜！你已经完成了第一个前后端联动的项目！

---

五、新手常问问题 & 解决方案

Q1：为什么前端访问后端报错 “CORS error”？

原因：浏览器出于安全限制，禁止跨域请求（前端 3000 端口访问后端 8080 端口）。
解决：后端加 @CrossOrigin(origins = "http://localhost:3000")（如上文所示），或配置全局 CORS。

---

Q2：启动 Spring Boot 时报错 “No qualifying bean of type…”？

原因：Spring 没找到依赖注入的对象。
解决：确保 TaskRepository 接口在主类（TodoBackendApplication）的子包下，否则需加 @EnableJpaRepositories 注解。

---

Q3：React 页面不更新，数据没显示？

原因：可能是状态没正确更新，或 API 地址写错。
排查步骤：

1. 打开浏览器开发者工具（F12）
2. 查看 Network 标签，确认请求是否发出
3. 检查 Console 是否有错误（比如 JSON 解析失败）

---

Q4：项目里的“资源”都放在哪？

资源类型	前端（React）	后端（Spring Boot）
代码	src/ 目录	src/main/java
静态文件（图片等）	public/	src/main/resources/static
配置文件	.env, package.json	application.properties

---

六、下一步学习建议

你已经迈出了关键一步！接下来可以：

1. 深入 React：学习组件化、状态管理（useState/useEffect 是基础）
2. 完善后端：加入数据库（如 MySQL 替换 H2）、用户认证
3. 部署上线：用 Vercel 部署前端，云服务器部署 Spring Boot
4. 学工具链：了解 Webpack、Babel、Maven 等构建工具的作用

💬 我的真心话：我当初学的时候，光是配环境就折腾了三天。但只要你坚持跑通第一个完整项目，后面的路会越走越顺。编程不是记住语法，而是学会解决问题的方法。

---

结语

今天我们从零搭建了一个 React + Spring Boot 的待办事项应用，涵盖了环境配置、核心概念、前后端联调等关键环节。虽然只是一个简单 demo，但它包含了现代 Web 开发的核心思想：前后端分离、API 通信、资源管理。

记住：每一个大神，都是从“Hello World”开始的。现在，你的项目已经跑起来了，接下来就是不断迭代、不断犯错、不断成长的过程。

如果你觉得这篇教程有帮助，欢迎点赞收藏！也欢迎在评论区留言你的问题，我会一一解答。下期我们聊聊《如何用 Ant Design 快速美化你的 React 项目》——让丑丑的待办列表秒变高颜值！

加油，未来的全栈工程师！🚀