在当今的 Web 开发领域，前后端分离已成为主流趋势。传统的全栈框架往往需要复杂的模板引擎来处理视图逻辑，而前端框架如 React、Vue 等虽然强大，但也带来了学习曲线陡峭、构建复杂等问题。本文将介绍一种轻量级的解决方案 —— 结合 Spring Boot 与 HTMX，实现高效、简洁的前后端分离开发。 # 为什么选择 SpringBoot 与 HTMX？ Spring Boot 是 Java 生态中最流行的应用开发框架之一，它提供了自动配置、嵌入式服务器等特性，让开发者可以快速搭建企业级应用。而 HTMX 是一个轻量级的 JavaScript 库，它允许你使用 HTML 属性直接与服务器进行 AJAX 通信，无需编写大量的 JavaScript 代码。这种组合既保留了传统 HTML 的简单性，又具备现代 Web 应用的交互性。 # 项目架构概述我们将构建一个简单的任务管理应用，采用前后端完全分离的架构： - 后端：Spring Boot REST API - 前端：纯 HTML + HTMX + doT.js + Tailwind CSS 这种架构使得前后端可以独立开发、测试和部署，同时保持高效的通信和良好的用户体验。 # 后端实现首先，让我们创建 SpringBoot 后端 ``` package com.example.taskmanager; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import java.util.ArrayList; import java.util.List; import java.util.UUID; @SpringBootApplication @RestController @RequestMapping("/api/tasks") public class TaskManagerApplication { // 内存中的任务存储 private List tasks = new ArrayList<>(); public static void main(String[] args) { SpringApplication.run(TaskManagerApplication.class, args); } // 任务模型 record Task(String id, String title, boolean completed) {} // 获取所有任务 @GetMapping public List getAllTasks() { return tasks; } // 创建新任务 @PostMapping public Task createTask(@RequestBody Task task) { Task newTask = new Task(UUID.randomUUID().toString(), task.title(), false); tasks.add(newTask); return newTask; } // 更新任务状态 @PutMapping("/{id}/toggle") public Task toggleTask(@PathVariable String id) { Task task = tasks.stream() .filter(t -> t.id().equals(id)) .findFirst() .orElseThrow(() -> new IllegalArgumentException("Task not found")); Task updatedTask = new Task(task.id(), task.title(), !task.completed()); tasks.remove(task); tasks.add(updatedTask); return updatedTask; } // 删除任务 @DeleteMapping("/{id}") public void deleteTask(@PathVariable String id) { tasks.removeIf(t -> t.id().equals(id)); } } ``` 这个后端实现了基本的 CRUD 操作：获取任务列表、创建新任务、切换任务状态和删除任务。为了方便演示和快速能够运行DEOM，所有数据都存储在内存中的 List 中。 # 前端实现接下来是前端部分，我们将使用 HTMX 来处理与后端的交互 ``` Task Manager

Task Manager

Simple task management with Spring Boot, HTMX and doT.js

Loading tasks...

``` 这个前端实现了完整的任务管理界面，包括： - 任务列表的展示和动态加载 - 添加新任务的表单 - 任务状态的切换 - 任务的删除功能所有这些功能都是通过 HTMX 的属性直接实现的，无需编写大量 JavaScript 代码。当用户执行操作时，HTMX 会自动发送 AJAX 请求到后端 API，并根据响应更新页面。 #### 前后端交互流程整个应用的交互流程如下： 1. 页面加载时，HTMX 发送 GET 请求到`/api/tasks`获取任务列表 1. 用户提交新任务表单时，HTMX 发送 POST 请求到`/api/tasks` 1. 后端创建新任务并返回，HTMX 将新任务添加到列表 1. 用户点击任务的完成状态时，HTMX 发送 PUT 请求到`/api/tasks/{id}/toggle` 1. 后端更新任务状态并返回，HTMX 更新任务列表 1. 用户删除任务时，HTMX 发送 DELETE 请求到`/api/tasks/{id}` 1. 后端删除任务，HTMX 从 DOM 中移除任务项 # 部署与运行要运行这个应用，你需要 ``` 1. 创建一个 Spring Boot 项目 2. 将上述后端代码复制到 src/main/java/com/example/taskmanager 目录 3. 将前端代码保存至 src/main/resources/static/index.html 4. 运行 Spring Boot 应用 5. 在浏览器中访问 http://localhost:8080/index.html ``` # 总结通过结合 Spring Boot 和 HTMX，我们实现了一个高效、简洁的前后端分离应用。这种架构既保留了 Spring Boot 强大的后端处理能力，又通过 HTMX 简化了前端开发，避免了复杂的前端框架和构建流程。对于中小型项目或者需要快速迭代的应用来说，这种组合是一个非常不错的选择。如果你正在寻找一种轻量级、高效的 Web 开发解决方案，不妨尝试一下 Spring Boot 与 HTMX 的组合。