關鍵詞：Spring Boot、Thymeleaf、RESTful API、前后端整合、用戶管理
? 功能概述
本文將為你提供一個完整的 Spring Boot + Thymeleaf + RESTful API 的前后端整合項目，實現以下功能：
| 模塊 | 功能 |
|---|---|
| 用戶管理 | 查看用戶列表、新增用戶、刪除用戶 |
| 后端接口 | 提供 JSON 格式的 RESTful API |
| 前端頁面 | 使用 Thymeleaf 渲染 HTML 頁面 |
| 數據持久化 | 使用 Spring Data JPA + H2 內存數據庫 |
📦 一、創建 Spring Boot 項目
1. 使用idea創建項目
選擇如下配置：
- Project: Maven
- Language: Java
- Spring Boot Version: 3.x（如 3.3）
- Dependencies:
- Spring Web
- Spring Data JPA
- Thymeleaf
- H2 Database (用于測試)
下載并解壓后導入 IDE（如 IntelliJ IDEA 或 Eclipse）。
📁 二、項目結構概覽
springboot-thymeleaf-restful/
├── src/
│ ├── main/
│ │ ├── java/
│ │ │ └── com/
│ │ │ └── example/
│ │ │ └── demo/
│ │ │ ├── DemoApplication.java
│ │ │ ├── controller/
│ │ │ │ └── UserController.java
│ │ │ ├── model/
│ │ │ │ └── User.java
│ │ │ ├── repository/
│ │ │ │ └── UserRepository.java
│ │ │ └── service/
│ │ │ └── UserService.java
│ │ └── resources/
│ │ ├── templates/
│ │ │ └── users.html
│ │ └── application.properties
└── pom.xml
🧱 三、添加依賴（pom.xml）
<dependencies><!-- Spring Web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- Spring Data JPA --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><!-- Thymeleaf --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!-- H2 Database --><dependency><groupId>com.h2database</groupId><artifactId>h2</artifactId><scope>runtime</scope></dependency><!-- 測試依賴 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency>
</dependencies>
🗃? 四、數據模型與數據庫操作
1. 實體類 User.java
package com.example.demo.model;import jakarta.persistence.*;@Entity
public class User {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;private String name;private String email;public User() {}public User(String name, String email) {this.name = name;this.email = email;}// Getter & Setter
}
2. Repository 接口 UserRepository.java
package com.example.demo.repository;import com.example.demo.model.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}
3. 服務層 UserService.java
package com.example.demo.service;import com.example.demo.model.User;
import com.example.demo.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class UserService {@Autowiredprivate UserRepository userRepository;public List<User> getAllUsers() {return userRepository.findAll();}public User saveUser(User user) {return userRepository.save(user);}public void deleteUserById(Long id) {userRepository.deleteById(id);}
}
🎛? 五、控制器 UserController.java
package com.example.demo.controller;import com.example.demo.model.User;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;import java.util.List;@Controller
@RequestMapping("/users")
public class UserController {@Autowiredprivate UserService userService;// 展示用戶頁面@GetMapping("")public String showUsers(Model model) {List<User> users = userService.getAllUsers();model.addAttribute("users", users);return "users";}// 新增用戶@PostMapping("/add")public String addUser(@ModelAttribute User user) {userService.saveUser(user);return "redirect:/users";}// 刪除用戶@GetMapping("/{id}/delete")public String deleteUser(@PathVariable Long id) {userService.deleteUserById(id);return "redirect:/users";}// 返回 JSON 格式的所有用戶（供外部調用）@GetMapping(path = "/api", produces = "application/json")@ResponseBodypublic List<User> getUsersJson() {return userService.getAllUsers();}
}
🖼? 六、前端頁面 templates/users.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>用戶管理</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4"><h2>用戶管理</h2><!-- 表單提交 --><form th:action="@{/users/add}" method="post"><div class="mb-3"><label for="name" class="form-label">姓名</label><input type="text" name="name" id="name" class="form-control" required /></div><div class="mb-3"><label for="email" class="form-label">郵箱</label><input type="email" name="email" id="email" class="form-control" required /></div><button type="submit" class="btn btn-primary">添加用戶</button></form><hr /><!-- 用戶列表 --><table class="table table-bordered mt-4"><thead><tr><th>ID</th><th>姓名</th><th>郵箱</th><th>操作</th></tr></thead><tbody><tr th:each="user : ${users}"><td th:text="${user.id}"></td><td th:text="${user.name}"></td><td th:text="${user.email}"></td><td><a th:href="@{/{id}/delete(id=${user.id})}" class="btn btn-danger btn-sm">刪除</a></td></tr></tbody></table>
</div>
</body>
</html>
?? 七、配置文件 application.properties
# H2 數據庫配置
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect# 開啟 H2 控制臺
spring.h2.console.enabled=true# Thymeleaf 緩存關閉（開發階段）
spring.thymeleaf.cache=false
?? 八、運行與測試
1. 啟動項目
運行 DemoApplication.java 中的 main() 方法啟動 Spring Boot 應用。
2. 訪問頁面
打開瀏覽器訪問：
http://localhost:8080/users
你會看到用戶管理頁面，可以：
- 添加用戶（提交表單）
- 查看用戶列表
- 刪除用戶
3. 調用 RESTful API
訪問 JSON 格式的用戶列表：
GET http://localhost:8080/users/api
返回結果類似：
[{"id":1,"name":"張三","email":"zhangsan@example.com"}
]
? 總結
| 技術點 | 內容 |
|---|---|
| Spring Boot 整合 Thymeleaf | 快速搭建前后端一體化應用 |
| RESTful API 設計 | 提供 JSON 接口供其他系統調用 |
| MVC 架構實踐 | 控制器、模型、視圖三層清晰分工 |
| 內存數據庫 H2 | 快速測試無需安裝數據庫 |
| 前后端共存 | 同時支持 HTML 頁面和 JSON 接口 |
