Spring Boot与Angular全栈预约系统实战：环境搭建到联调部署

1. 项目概述与核心价值

最近在整理一个全栈预约系统的实战项目，这个项目挺有意思，它把后端Java Spring Boot和前端Angular给整合到了一起，形成了一个可以直接跑起来的完整应用。对于想从零开始学习全栈开发，或者想看看一个现代Web应用前后端如何协同工作的朋友来说，这个项目是个不错的“麻雀”，五脏俱全。我自己也花时间把它在本地环境跑通了，过程中踩了一些坑，也总结了不少经验。这篇文章，我就来详细拆解一下这个“DevSeniorCode-CursoFullStackReservas”项目，从环境准备、项目结构解析，到前后端如何分别启动、联调，以及在实际操作中可能遇到的问题和解决方案，我都会一一说明。我的目标是，即使你之前没有太多全栈开发经验，跟着这篇指南也能顺利地把这个预约系统跑起来，并且理解其背后的运作逻辑。

这个项目本质上是一个教学与实践相结合的资源包。它不仅仅提供了可运行的代码，更包含了课程材料，旨在引导学习者理解如何构建一个具备完整CRUD（增删改查）功能的预约管理系统。前端使用Angular构建用户界面，处理表单交互和数据展示；后端则依托Spring Boot提供RESTful API，处理业务逻辑和数据持久化。通过亲手配置和运行这个项目，你能直观地感受到前后端分离架构下，数据是如何通过HTTP请求在浏览器与服务器之间流动的。接下来，我们就从最基础的环境搭建开始。

2. 环境准备与工具链详解

在动手之前，确保你的开发环境准备妥当是成功的第一步。这个项目对工具链有明确的要求，但别担心，我会带你一步步安装和验证。

2.1 操作系统与基础要求

项目说明中提到Windows 10或更高版本，实际上，macOS和主流Linux发行版（如Ubuntu）同样可以运行，因为核心依赖（Java、Node.js）都是跨平台的。这里我以Windows环境为例进行说明，其他系统的朋友可以参考对应命令。

硬件方面，4GB空闲内存和500MB磁盘空间是最低要求。但根据我的经验，如果你想同时流畅地运行IDE（如IntelliJ IDEA或VS Code）、后端服务、前端服务以及数据库，8GB内存会更从容。CPU主频倒不是瓶颈，近几年的机器基本都达标。

注意：请确保你拥有管理员权限，以便安装软件。同时，一个稳定的网络连接至关重要，因为我们需要下载数百MB的安装包和项目依赖。

2.2 Java开发环境搭建

后端基于Spring Boot，所以Java SDK是必须的。项目建议使用JDK 25或更高版本，但目前（撰写本文时）Java的长期支持版本是JDK 21和JDK 17。Spring Boot 3.x版本通常与JDK 17+兼容性最好。为了避免版本冲突，我推荐安装JDK 21，它在性能和稳定性上都有很好的表现。

安装步骤：

1. 访问Oracle官网或更推荐的开源发行版网站，如 Adoptium 。在Adoptium上选择JDK 21，下载适用于你系统的安装程序（如Windows的.msi文件）。
2. 运行安装程序。关键一步是记住JDK的安装路径，默认通常是C:\Program Files\Eclipse Adoptium\jdk-21.0.x-hotspot。你也可以自定义路径，但不要包含中文或空格。
3. 配置环境变量。这是很多新手会卡住的地方。右键点击“此电脑”->“属性”->“高级系统设置”->“环境变量”。
   • 在“系统变量”部分，新建一个变量名为JAVA_HOME的变量，变量值就是你的JDK安装路径（例如C:\Program Files\Eclipse Adoptium\jdk-21.0.2-hotspot）。
   • 找到并编辑“系统变量”中的Path变量，点击“新建”，添加%JAVA_HOME%\bin。
4. 验证安装。打开一个新的命令提示符（CMD）或PowerShell，输入java -version。如果正确显示类似“openjdk version 21.0.2 ...”的信息，说明安装成功。如果提示“不是内部或外部命令”，请检查JAVA_HOME和Path设置是否正确，并确保重启了命令行窗口。

2.3 Node.js与npm环境搭建

前端Angular项目依赖于Node.js和其包管理器npm。项目要求Node.js 24+，我建议安装最新的长期支持版本，比如Node.js 20.x或18.x，因为它们经过了更长时间的市场检验。Angular CLI对Node版本有要求，通常LTS版本都能很好支持。

安装步骤：

1. 访问Node.js官网，下载Windows安装程序（.msi）。同样，建议选择LTS版本。
2. 运行安装程序，基本上一路“Next”即可。安装程序会自动将Node.js和npm添加到系统路径。
3. 验证安装。打开新的命令行窗口，分别输入node -v和npm -v。两者都应返回版本号。

关于包管理器的选择：npm是随Node.js安装的默认包管理器。但在前端生态中，yarn或pnpm因为更快的速度和更好的依赖管理也颇受欢迎。这个项目使用npm install，我们就先用npm。如果你想尝试其他管理器，需要先全局安装它们（例如npm install -g yarn），然后在项目前端目录下使用yarn install代替npm install。

2.4 辅助工具推荐

• 代码编辑器/IDE：后端Java开发强烈推荐使用IntelliJ IDEA Community Edition（免费），它对Spring Boot的支持是顶级的。前端Angular开发可以用Visual Studio Code，轻量且插件生态丰富。当然，你也可以用VS Code处理全部，安装相应的Java和Spring Boot扩展包即可。
• 数据库：项目提到使用PostgreSQL。虽然Spring Boot启动时可能会内嵌一个H2数据库用于演示，但理解如何连接外部PostgreSQL是很好的实践。你可以选择安装 PostgreSQL 本地服务器，或者使用Docker来运行一个PostgreSQL容器，这样更干净，不会污染本地环境。
• Git：虽然项目提供了ZIP下载，但使用Git可以更方便地管理代码版本和后续更新。建议安装 Git for Windows ，并在命令行中使用git clone命令来获取项目代码，这比下载ZIP更专业。

3. 项目获取与结构深度解析

环境准备好了，接下来就是把项目拿到手，并看看它到底长什么样。理解项目结构是后续一切操作的基础。

3.1 获取项目代码的两种方式

原始指南提供了直接下载ZIP的链接。但作为一个开发者，我更推荐使用Git，这是行业标准做法。

方式一：使用Git克隆（推荐）

1. 在命令行中，导航到你希望存放项目的目录，例如C:\Projects。
2. 执行克隆命令。你需要使用正确的仓库URL。原始链接看起来像是一个直接下载链接，而非仓库地址。通常GitHub仓库的克隆地址格式为https://github.com/用户名/仓库名.git。根据项目标题，我们可以尝试：

   git clone https://github.com/Raunak3210/DevSeniorCode-CursoFullStackReservas.git

   如果这个仓库是公开的，命令会成功，并将整个项目（包括所有分支和历史记录）下载到本地的一个新文件夹中。
3. 如果上述地址不可用，你可能需要根据提供的ZIP文件中的信息，或者去GitHub上搜索确切的项目主页来获取克隆地址。

方式二：下载ZIP包（备用）如果Git方式行不通，就采用原始指南的方法：

1. 在浏览器中打开提供的下载链接。
2. 浏览器通常会直接开始下载一个ZIP文件，或者将你带到GitHub的文件页面。在GitHub页面上，寻找绿色的“Code”按钮，点击后选择“Download ZIP”。
3. 将ZIP文件解压到一个没有中文和空格的路径下，例如D:\DevProjects\reservation-app。

实操心得：使用Git克隆的优势在于，你可以轻松地切换到不同的分支（比如可能有main,develop分支），使用git pull获取更新，并且能更好地融入团队协作流程。ZIP包方式适合快速查看，但缺少了版本控制能力。

3.2 项目目录结构剖析

解压或克隆后，用你的代码编辑器打开项目根目录。一个典型的全栈项目结构会清晰地分离前后端。让我们来拆解一下：

DevSeniorCode-CursoFullStackReservas/ ├── backend/ # Spring Boot后端项目 │ ├── src/ │ │ ├── main/ │ │ │ ├── java/com/example/reservation/ # Java源代码 │ │ │ │ ├── controller/ # REST API控制器 │ │ │ │ ├── model/ # 数据实体类（如Reservation） │ │ │ │ ├── repository/ # 数据访问层（Spring Data JPA接口） │ │ │ │ ├── service/ # 业务逻辑层 │ │ │ │ └── ReservationApplication.java # 主启动类 │ │ │ └── resources/ │ │ │ ├── application.properties # 主配置文件（数据库连接等） │ │ │ └── ... │ │ └── test/ # 单元测试代码 │ ├── pom.xml # Maven项目配置和依赖管理文件 │ └── target/ # 编译输出目录（运行后生成） ├── frontend/ # Angular前端项目 │ ├── src/ │ │ ├── app/ │ │ │ ├── components/ # Angular组件（如预约列表、表单） │ │ │ ├── services/ # 前端服务（用于调用后端API） │ │ │ ├── models/ # TypeScript接口/模型定义 │ │ │ └── app.module.ts # 根模块定义 │ │ ├── assets/ # 静态资源（图片、样式） │ │ ├── environments/ # 环境配置（开发/生产API地址） │ │ └── ... │ ├── angular.json # Angular工作区配置 │ ├── package.json # Node.js项目配置和前端依赖 │ └── tsconfig.json # TypeScript编译器配置 ├── documentation/ # 可能存在的课程材料或指南 └── README.md # 项目总说明文件

关键文件解读：

• backend/pom.xml：这是Maven的心脏。它定义了项目依赖的库，比如Spring Boot Starter Web、Spring Data JPA、PostgreSQL驱动等。打开它，你就能知道后端用了哪些技术。
• backend/src/main/resources/application.properties：Spring Boot的配置文件。在这里，你会找到数据库连接字符串（JDBC URL）、用户名、密码，以及服务器端口（默认为8080）等设置。第一次运行前，务必检查这里的数据库配置是否与你的本地环境匹配。
• frontend/package.json：前端项目的清单文件。列出了所有依赖的第三方库（如@angular/core,rxjs）和开发工具。npm install命令就是根据这个文件来下载所有依赖的。
• frontend/src/environments/environment.ts：这里通常定义了后端API的基础URL。默认可能是http://localhost:8080/api。确保这个地址与你的后端服务地址一致，否则前端无法连接到后端。

理解这个结构，你就能清楚地知道代码在哪里，配置在哪里，出了问题该从哪个文件查起。

4. 后端服务启动与核心配置

后端是数据的大脑，我们先把它启动起来。Spring Boot让这个过程变得非常简单，但细节决定成败。

4.1 依赖安装与项目构建

进入backend目录。如果你使用IntelliJ IDEA打开这个文件夹，它会自动识别为Maven项目并开始下载依赖（检查右下角进度条）。如果使用命令行，可以执行以下Maven命令来下载依赖并编译项目：

cd /path/to/your/project/backend mvn clean compile

mvn是Maven的命令行工具。clean会清理旧的编译输出，compile会编译源代码。如果这是你第一次运行，Maven会从中央仓库下载所有依赖项，这可能需要一些时间，取决于你的网速。

常见问题1：mvn命令未找到这意味着Maven没有安装在你的系统上，或者没有添加到Path环境变量。有两种解决方案：

1. 安装本地Maven：从Apache官网下载Maven，解压，并像配置JAVA_HOME一样，设置MAVEN_HOME并将其bin目录加入Path。
2. 使用IDE内置的Maven（推荐）：IntelliJ IDEA和VS Code（配合Java扩展）都集成了Maven。你可以在IDE的侧边栏找到Maven工具窗口，直接点击Lifecycle下的compile或install即可。IDE通常还会提供更友好的图形界面来管理依赖。

4.2 数据库配置与连接

在启动应用前，最关键的一步是配置数据库。查看application.properties文件，你可能会看到类似下面的配置：

# 使用内嵌H2数据库（开发方便，数据断电丢失） spring.datasource.url=jdbc:h2:mem:testdb spring.datasource.driverClassName=org.h2.Driver spring.datasource.username=sa spring.datasource.password= spring.jpa.database-platform=org.hibernate.dialect.H2Dialect # 或者使用PostgreSQL # spring.datasource.url=jdbc:postgresql://localhost:5432/reservation_db # spring.datasource.username=postgres # spring.datasource.password=yourpassword # spring.jpa.database-platform=org.hibernate.dialect.PostgreSQLDialect

情况A：使用内嵌H2数据库如果配置是H2，那么恭喜你，启动最简单。Spring Boot会自动启动一个内存中的H2数据库，无需额外安装。但请注意，内存数据库在应用停止后数据会全部丢失，仅适用于演示和测试。

情况B：使用PostgreSQL（生产级实践）如果配置指向PostgreSQL，你需要先确保有一个运行中的PostgreSQL实例。

1. 启动PostgreSQL：如果你安装了PostgreSQL，通常可以通过系统服务启动，或者在命令行使用pg_ctl启动。更简单的方式是使用Docker：docker run --name some-postgres -e POSTGRES_PASSWORD=mysecretpassword -d -p 5432:5432 postgres。
2. 创建数据库：连接到PostgreSQL（使用psql命令行工具或pgAdmin图形工具），执行CREATE DATABASE reservation_db;。
3. 修改配置：将application.properties中的PostgreSQL配置取消注释，并填入正确的username、password和url（确认端口和数据库名）。同时，确保项目pom.xml中包含了PostgreSQL的依赖。

4.3 启动Spring Boot应用

配置好数据库后，就可以启动后端了。

通过命令行启动：在backend目录下，运行：

mvn spring-boot:run

这个命令会触发Maven的spring-boot插件，它会编译代码并启动内嵌的Tomcat服务器。控制台会输出大量日志，重点关注以下几行：

... Tomcat initialized with port(s): 8080 (http) ... Starting Servlet engine: [Apache Tomcat/...] ... Initializing Spring embedded WebApplicationContext ... Started ReservationApplication in 5.123 seconds (JVM running for 5.789)

看到最后一行Started ...，并且没有红色的错误日志，就说明启动成功了。

通过IDE启动：在IntelliJ IDEA中，找到主启动类（通常是ReservationApplication.java，里面有main方法和@SpringBootApplication注解），右键点击，选择“Run 'ReservationApplication.main()'”。VS Code类似，找到主类后点击运行按钮。

启动后，你可以打开浏览器，访问http://localhost:8080/actuator/health（如果项目引入了Spring Boot Actuator）或者http://localhost:8080/api/reservations（如果项目有暴露API），来验证服务是否正常响应。一个健康的服务会返回JSON格式的数据或状态信息。

5. 前端应用启动与联调

后端服务在8080端口跑起来后，我们再来启动前端。前端运行在独立的开发服务器上，默认使用4200端口。

5.1 安装前端依赖

进入frontend目录，这是所有前端操作的根目录。第一步永远是安装依赖：

cd /path/to/your/project/frontend npm install

这个命令会读取package.json，下载所有dependencies和devDependencies里列出的包到本地的node_modules文件夹。这个过程可能会比较长，因为Angular及其生态的包数量不少。请确保网络通畅。

踩坑记录：npm install有时会因网络问题失败，特别是某些包源在国内访问较慢。可以尝试以下方案：

1. 使用淘宝NPM镜像：npm config set registry https://registry.npmmirror.com，然后再运行npm install。
2. 如果某个特定包安装失败，可以尝试先清理缓存：npm cache clean --force，再重试。
3. 使用yarn或pnpm，它们有时在依赖解析和下载速度上更有优势。

5.2 配置API代理（解决跨域问题）

这是前后端联调中最关键的一步。前端运行在localhost:4200，后端运行在localhost:8080，浏览器出于安全考虑，会阻止这种不同端口的请求，这就是跨域问题。

Angular CLI的开发服务器提供了代理功能来解决这个问题。你需要在frontend目录下创建一个名为proxy.conf.json的文件（如果项目没有自带）：

{ "/api": { "target": "http://localhost:8080", "secure": false, "changeOrigin": true, "logLevel": "debug" } }

这个配置的意思是：所有前端发往/api开头的请求，都会被开发服务器代理到http://localhost:8080。

然后，你需要修改angular.json文件，找到projects -> your-project-name -> architect -> serve -> options部分，添加代理配置：

"options": { "browserTarget": "your-project-name:build", "proxyConfig": "proxy.conf.json" }

5.3 启动Angular开发服务器

配置好代理后，就可以启动前端了：

ng serve --open

ng serve命令会启动一个开发服务器，并监听文件变化（热重载）。--open（或-o）参数会自动在默认浏览器中打开应用。

如果这是你第一次在项目中使用ng命令，可能会提示“ng不是内部或外部命令”。这是因为Angular CLI没有全局安装。你有两个选择：

1. 使用项目本地安装的CLI：npx ng serve --open。npx会执行项目node_modules下的可执行文件。
2. 全局安装Angular CLI：npm install -g @angular/cli，然后再运行ng serve --open。

启动成功后，浏览器会打开http://localhost:4200。如果页面正常显示，但数据加载失败（比如预约列表为空或报错），请打开浏览器的开发者工具（F12），切换到“Network”（网络）选项卡，查看对/api的请求是否被正确代理到了8080端口，以及响应状态码是否为200。

6. 应用功能体验与数据流追踪

当浏览器成功打开应用界面时，你的全栈环境就基本搭建完成了。现在，让我们实际操作一下，并理解背后发生了什么。

6.1 用户界面交互

一个典型的预约应用界面可能包含以下部分：

• 预约列表：以表格或卡片形式展示所有已有的预约记录。
• 创建预约表单：包含字段如客户姓名、预约时间、服务类型、联系方式等。
• 编辑与删除功能：每条预约记录旁可能有“编辑”和“删除”按钮。

你可以尝试点击“新建预约”按钮，填写表单并提交。提交后，列表应该会实时更新，显示出你刚创建的记录。同样，尝试编辑某条记录的信息，或者删除一条记录。

6.2 前后端数据流分析

当你点击“提交”按钮时，一个完整的数据流就发生了：

1. 前端（Angular组件）：表单组件收集用户输入的数据，将其封装成一个符合Reservation接口的TypeScript对象。
2. 前端服务层：一个Angular服务（例如ReservationService）被调用。这个服务中有一个方法，比如createReservation(reservation: Reservation)。
3. HTTP请求发出：该服务方法使用Angular的HttpClient模块，向相对路径/api/reservations发起一个POST请求，并将预约对象作为请求体（body）发送。
4. 代理拦截：由于我们配置了代理，这个发往http://localhost:4200/api/reservations的请求，被Angular开发服务器拦截，并转发到http://localhost:8080/api/reservations。
5. 后端接收（Spring Boot Controller）：在8080端口监听的Spring Boot应用，有一个被@RestController和@RequestMapping("/api/reservations")注解的ReservationController。它里面有一个被@PostMapping注解的方法，负责处理这个POST请求。
6. 后端处理：Controller方法接收请求体，Spring会自动将其反序列化为一个Java的Reservation实体对象。然后，Controller调用ReservationService（业务逻辑层），Service再调用ReservationRepository（数据访问层）。
7. 数据持久化：ReservationRepository是一个继承自Spring Data JPAJpaRepository的接口。调用其save()方法，JPA框架会自动生成SQL语句，将数据插入到配置的数据库（H2或PostgreSQL）中。
8. 响应返回：操作成功后，Controller方法通常会返回保存后的预约对象（带ID）或一个成功的状态信息，并设置HTTP状态码为201（Created）。
9. 前端接收响应：Angular的HttpClient接收到这个HTTP响应，将其反序列化为TypeScript对象。
10. UI更新：ReservationService将返回的数据通过Observable或Promise传递给组件。组件更新其数据模型，Angular的变更检测机制自动触发，视图（预约列表）随之更新。

通过浏览器的开发者工具“网络”面板，你可以清晰地看到步骤3到步骤9中发生的请求和响应，包括URL、方法、请求头、请求体和响应体。这是调试前后端交互最强大的工具。

7. 深度定制与扩展探索

成功运行基础项目后，你可能不满足于此，想要修改或添加功能。这里提供几个常见的扩展方向。

7.1 修改数据模型与API

假设你想给预约增加一个“备注”字段。

1. 后端：
   • 打开backend/src/main/java/.../model/Reservation.java实体类，添加一个字段：private String notes;，并生成其Getter和Setter方法。
   • 如果使用JPA，你可能需要更新数据库表。在开发阶段，可以设置spring.jpa.hibernate.ddl-auto=update，Hibernate会自动修改表结构。但对于生产环境，你需要编写数据库迁移脚本（如Flyway或Liquibase）。
   • 在Controller的@PostMapping和@PutMapping方法中，这个新字段会自动被接收。
2. 前端：
   • 打开frontend/src/app/models/reservation.model.ts（或类似文件），在Reservation接口中添加notes?: string;。
   • 在创建和编辑预约的组件HTML模板中，增加一个用于输入备注的文本框，并使用[(ngModel)]或响应式表单将其绑定到模型。
   • 在对应的组件TypeScript文件中，确保表单数据包含了notes属性。

7.2 添加新的业务功能

例如，添加一个“按日期筛选预约”的功能。

1. 后端：在ReservationController中新增一个方法，例如：

   @GetMapping("/search/findByDate") public List<Reservation> findByDate(@RequestParam LocalDate date) { return reservationService.findByDate(date); }

   然后在ReservationService和ReservationRepository中实现对应的逻辑。Repository层可以利用Spring Data JPA的查询方法派生功能，只需声明方法：List<Reservation> findByReservationDate(LocalDate date);。
2. 前端：在ReservationService中新增一个方法getReservationsByDate(date: string)，调用新的API端点/api/reservations/search/findByDate?date=...。在前端界面添加一个日期选择器，当其值变化时，调用这个新方法并更新列表。

7.3 容器化部署（Docker）

为了让应用更容易地在不同环境部署，可以将其Docker化。

1. 后端Dockerfile：在backend目录创建Dockerfile，基于OpenJDK镜像，将打包好的JAR文件复制进去并运行。

   FROM openjdk:21-jdk-slim ARG JAR_FILE=target/*.jar COPY ${JAR_FILE} app.jar ENTRYPOINT ["java","-jar","/app.jar"]

   首先需要将后端打包：mvn clean package，生成JAR文件在target目录。
2. 前端Dockerfile：在frontend目录创建Dockerfile，使用Node镜像构建生产版本，再使用Nginx镜像提供服务。

   # 构建阶段 FROM node:20-alpine AS build WORKDIR /app COPY package*.json ./ RUN npm ci --only=production COPY . . RUN npm run build --prod # 运行阶段 FROM nginx:alpine COPY --from=build /app/dist/your-frontend-project-name /usr/share/nginx/html EXPOSE 80

   需要将your-frontend-project-name替换为angular.json中定义的outputPath。
3. 使用docker-compose编排：在项目根目录创建docker-compose.yml，定义后端服务、前端服务和数据库服务（如PostgreSQL），并配置它们之间的网络连接。

8. 常见问题排查与解决实录

在实际操作中，你几乎一定会遇到各种问题。下面是我在运行此类项目时遇到的一些典型问题及解决方法。

8.1 后端启动失败

问题：端口被占用

Web server failed to start. Port 8080 was already in use.

解决：

1. 找到占用端口的进程并停止它。在命令行运行：netstat -ano | findstr :8080，找到PID（进程ID）。然后运行taskkill /PID <PID> /F强制结束进程。
2. 或者，修改后端端口。在application.properties中添加：server.port=8081。

问题：数据库连接失败

Connection to localhost:5432 refused. Check that the hostname and port are correct and that the postmaster is accepting TCP/IP connections.

解决：

1. 确认PostgreSQL服务是否已启动。在Windows服务中查找“PostgreSQL”，确保其状态为“正在运行”。
2. 检查application.properties中的数据库URL、用户名和密码是否正确。
3. 确认PostgreSQL是否允许远程连接（对于localhost，通常是允许的）。检查postgresql.conf（监听地址）和pg_hba.conf（客户端认证）。

问题：缺少依赖或依赖冲突

ClassNotFoundException: ... 或 BeanCreationException: ...

解决：

1. 尝试清理并重新下载依赖：mvn clean install -U。-U参数强制更新快照依赖。
2. 检查pom.xml中的依赖版本是否兼容。特别是Spring Boot的父POM版本与各个Starter的版本。
3. 在IDE中，右键点击pom.xml，选择“Maven -> Reload project”，让IDE重新索引依赖。

8.2 前端启动或运行失败

问题：ng serve失败，提示Cannot find module '@angular/compiler-cli'解决：这通常是因为node_modules损坏或依赖未完整安装。删除frontend/node_modules文件夹和package-lock.json文件，然后重新运行npm install。

问题：页面能打开，但数据加载失败，控制台报跨域错误

Access to XMLHttpRequest at 'http://localhost:8080/api/reservations' from origin 'http://localhost:4200' has been blocked by CORS policy...

解决：

1. 首选方案：确保你已经正确配置了前端的代理（proxy.conf.json），并且ng serve命令使用了该配置。你的前端请求地址应该是/api/reservations，而不是http://localhost:8080/api/reservations。
2. 后端方案：如果不想用代理，可以在Spring Boot后端全局配置CORS。在配置类或主应用类中添加：

   @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**").allowedOrigins("http://localhost:4200"); } }; }

问题：页面样式错乱或功能异常解决：

1. 打开浏览器开发者工具，查看“Console”（控制台）是否有JavaScript错误。
2. 查看“Network”（网络）选项卡，确认所有静态资源（JS、CSS文件）是否都成功加载（状态码200）。
3. 如果是引入第三方UI库（如项目关键词中的Chakra UI），请确认其CSS或主题文件是否正确引入。

8.3 前后端联调问题

问题：前端发送请求，后端收到但返回400或500错误解决：

1. 检查请求体格式：在浏览器开发者工具的“Network”中，查看出错请求的“Payload”或“Request”标签，确认发送的JSON数据格式是否符合后端实体类的定义（字段名、数据类型）。例如，日期字段可能需要特定的格式（如yyyy-MM-dd）。
2. 查看后端日志：后端控制台会打印详细的错误堆栈信息。根据错误信息定位问题，可能是数据验证失败、数据库约束冲突等。
3. 使用API测试工具：在深入前端代码前，先用Postman或curl直接向后端API发送请求，排除前端代码逻辑的问题。

问题：修改了后端代码，但前端看不到变化解决：Spring Boot DevTools支持热重启，但修改Java代码后，需要重新编译和重启应用。IntelliJ IDEA在运行配置中勾选“Build project automatically”和“Register IDE actions”，可以在保存后自动触发重启。对于前端，ng serve默认支持热模块替换，修改TypeScript/HTML/CSS代码后，浏览器会自动刷新相关模块。

我个人在搭建这个项目的过程中，最大的体会是“耐心”和“细查日志”。全栈项目涉及环节多，任何一个环节的配置错误都可能导致整个流程失败。从环境变量、依赖版本、配置文件到网络代理，每一步都要仔细核对。当遇到问题时，不要慌张，按照“前端网络请求 -> 后端控制台日志 -> 数据库连接状态”这个链路，一层层地排查，问题总能定位。这个项目作为一个学习样板，其价值不仅在于运行起来，更在于你通过解决这些问题所积累的实战经验。当你能够自如地修改它的数据模型、添加新的API端点、并让前端与之协同工作时，你对全栈开发的理解就已经上了一个坚实的台阶。