快捷導(dǎo)航

SpringBoot結(jié)合HTMX實(shí)現(xiàn)高效Web開發(fā)實(shí)戰(zhàn)

更新時(shí)間：2025年07月09日 08:13:21 作者：風(fēng)象南

在當(dāng)今的 Web 開發(fā)領(lǐng)域,前后端分離已成為主流趨勢,本文將介紹一種輕量級的解決方案,結(jié)合 Spring Boot 與 HTMX,實(shí)現(xiàn)高效簡潔的前后端分離開發(fā),感興趣的可以了解下

為什么選擇 SpringBoot 與 HTMX？

Spring Boot 是 Java 生態(tài)中最流行的應(yīng)用開發(fā)框架之一，它提供了自動(dòng)配置、嵌入式服務(wù)器等特性，讓開發(fā)者可以快速搭建企業(yè)級應(yīng)用。

而 HTMX 是一個(gè)輕量級的 JavaScript 庫，它允許你使用 HTML 屬性直接與服務(wù)器進(jìn)行 AJAX 通信，無需編寫大量的 JavaScript 代碼。

這種組合既保留了傳統(tǒng) HTML 的簡單性，又具備現(xiàn)代 Web 應(yīng)用的交互性。

項(xiàng)目架構(gòu)概述

我們將構(gòu)建一個(gè)簡單的任務(wù)管理應(yīng)用，采用前后端完全分離的架構(gòu)：

后端：Spring Boot REST API
前端：純 HTML + HTMX + doT.js + Tailwind CSS

這種架構(gòu)使得前后端可以獨(dú)立開發(fā)、測試和部署，同時(shí)保持高效的通信和良好的用戶體驗(yàn)。

后端實(shí)現(xiàn)

首先，讓我們創(chuàng)建 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 {

    // 內(nèi)存中的任務(wù)存儲(chǔ)
    private List<Task> tasks = new ArrayList<>();

    public static void main(String[] args) {
        SpringApplication.run(TaskManagerApplication.class, args);
    }

    // 任務(wù)模型
    record Task(String id, String title, boolean completed) {}

    // 獲取所有任務(wù)
    @GetMapping
    public List<Task> getAllTasks() {
        return tasks;
    }

    // 創(chuàng)建新任務(wù)
    @PostMapping
    public Task createTask(@RequestBody Task task) {
        Task newTask = new Task(UUID.randomUUID().toString(), task.title(), false);
        tasks.add(newTask);
        return newTask;
    }

    // 更新任務(wù)狀態(tài)
    @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;
    }

    // 刪除任務(wù)
    @DeleteMapping("/{id}")
    public void deleteTask(@PathVariable String id) {
        tasks.removeIf(t -> t.id().equals(id));
    }
}

這個(gè)后端實(shí)現(xiàn)了基本的 CRUD 操作：獲取任務(wù)列表、創(chuàng)建新任務(wù)、切換任務(wù)狀態(tài)和刪除任務(wù)。

為了方便演示和快速能夠運(yùn)行DEOM，所有數(shù)據(jù)都存儲(chǔ)在內(nèi)存中的 List 中。

前端實(shí)現(xiàn)

接下來是前端部分，我們將使用 HTMX 來處理與后端的交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link  rel="external nofollow"  rel="stylesheet">
    <script src="https://unpkg.com/htmx.org@1.9.6/dist/htmx.min.js"></script>
    <script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/olado/doT@master/doT.min.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        danger: '#EF4444',
                        dark: '#1F2937',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .task-item {
                @apply flex items-center justify-between p-4 mb-3 rounded-lg transition-all duration-300;
            }
            .task-item-complete {
                @apply bg-gray-100 text-gray-500 line-through;
            }
            .btn {
                @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90;
            }
            .btn-danger {
                @apply bg-danger text-white hover:bg-danger/90;
            }
            .btn-secondary {
                @apply bg-secondary text-white hover:bg-secondary/90;
            }
            .animate-fade-in {
                @apply opacity-0 transform translate-y-2;
                animation: fadeIn 0.3s ease-out forwards;
            }
            .animate-fade-out {
                @apply opacity-100 transform translate-y-0;
                animation: fadeOut 0.3s ease-in forwards;
            }
            @keyframes fadeIn {
                to { opacity: 1; transform: translateY(0); }
            }
            @keyframes fadeOut {
                to { opacity: 0; transform: translateY(-10px); }
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-dark">
<div class="max-w-3xl mx-auto px-4 py-8">
    <!-- 頁面標(biāo)題 -->
    <header class="text-center mb-8">
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-primary mb-2">Task Manager</h1>
        <p class="text-gray-600">Simple task management with Spring Boot, HTMX and doT.js</p>
    </header>

    <!-- 任務(wù)管理卡片 -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <!-- 任務(wù)表單 -->
        <form
                id="task-form"
                hx-post="/api/tasks"
                hx-target="#task-list"
                hx-ext="json-enc"
                hx-swap="none"
                hx-on="htmx:afterRequest:fetchTasks()"
                class="flex space-x-3"
        >
            <input
                    type="text"
                    name="title"
                    placeholder="Add a new task..."
                    required
                    class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
            >
            <button type="submit" class="btn btn-primary">
                <i class="fa fa-plus mr-2"></i> Add
            </button>
        </form>

        <!-- 任務(wù)列表容器 -->
        <div id="task-list" class="space-y-3 mt-4">
            <div class="text-center text-gray-500 py-8">
                <i class="fa fa-spinner fa-spin text-primary text-2xl mb-2"></i>
                <p>Loading tasks...</p>
            </div>
        </div>
    </div>

    <footer class="text-center text-gray-500 text-sm">
        <p>Spring Boot + HTMX + doT.js Task Manager</p>
    </footer>
</div>

<!-- doT.js 任務(wù)列表模板 -->
<script type="text/template" id="task-list-template">
    {{~ it.tasks:task:index }}
    <div class="task-item {{? task.completed}}task-item-complete{{?}} animate-fade-in" style="animation-delay: {{= index * 50}}ms">
        <div class="flex items-center space-x-3">
            <button
                    class="task-toggle-btn w-6 h-6 rounded-full border-2 flex items-center justify-center cursor-pointer transition-all
                    {{= task.completed ? 'bg-secondary border-secondary' : 'border-gray-300 hover:border-secondary hover:bg-secondary/10'}}
                    "
                    hx-put="/api/tasks/{{= task.id}}/toggle"
                    hx-target="closest .task-item"
                    hx-swap="none"
                    hx-on="htmx:afterRequest:fetchTasks()"
            >
                <i class="fa fa-check text-white text-xs"></i>
            </button>
            <span class="task-title font-medium">{{= task.title}}</span>
        </div>
        <button
                class="delete-task-btn text-gray-400 hover:text-danger transition-colors"
                hx-delete="/api/tasks/{{= task.id}}"
                hx-target="closest .task-item"
                hx-swap="delete"
                hx-confirm="Are you sure you want to delete this task?"
                hx-on="htmx:beforeRequest:this.closest('.task-item').classList.add('animate-fade-out')"
        >
            <i class="fa fa-trash-o text-lg"></i>
        </button>
    </div>
    {{~}}
    {{? it.tasks.length === 0 }}
    <div class="text-center text-gray-500 py-8">
        <i class="fa fa-check-circle text-secondary text-3xl mb-2"></i>
        <p>No tasks yet. Add your first task!</p>
    </div>
    {{?}}
</script>

<script>
    // 編譯 doT.js 模板
    const taskListTemplate = doT.template(document.getElementById('task-list-template').text);

    // 頁面加載后獲取任務(wù)列表
    document.addEventListener('DOMContentLoaded', fetchTasks);

    // 獲取任務(wù)列表
    function fetchTasks() {
        htmx.ajax('GET', '/api/tasks', {
            handler: function(d,xhr) {
                if (xhr.xhr.status === 200) {
                    try {
                        const tasks = JSON.parse(xhr.xhr.responseText);
                        renderTasks(tasks);
                    } catch (e) {
                        showError('Failed to parse tasks');
                    }
                } else {
                    showError('Failed to load tasks');
                }
            }
        });
    }

    // 渲染任務(wù)列表
    function renderTasks(tasks) {
        const taskList = document.getElementById('task-list');
        const html = taskListTemplate({ tasks });
        taskList.innerHTML = html;
        htmx.process(taskList);
    }

    // 顯示錯(cuò)誤信息
    function showError(message) {
        const taskList = document.getElementById('task-list');
        taskList.innerHTML = `
            <div class="text-center text-danger py-8">
                <i class="fa fa-exclamation-circle text-danger text-2xl mb-2"></i>
                <p>${message}</p>
            </div>
        `;
    }

    // 表單提交后清空輸入框
    document.getElementById('task-form').addEventListener('htmx:afterRequest', function() {
        this.reset();
    });
</script>
</body>
</html>

這個(gè)前端實(shí)現(xiàn)了完整的任務(wù)管理界面，包括：

任務(wù)列表的展示和動(dòng)態(tài)加載
添加新任務(wù)的表單
任務(wù)狀態(tài)的切換
任務(wù)的刪除功能

所有這些功能都是通過 HTMX 的屬性直接實(shí)現(xiàn)的，無需編寫大量 JavaScript 代碼。

當(dāng)用戶執(zhí)行操作時(shí)，HTMX 會(huì)自動(dòng)發(fā)送 AJAX 請求到后端 API，并根據(jù)響應(yīng)更新頁面。

前后端交互流程

整個(gè)應(yīng)用的交互流程如下：

頁面加載時(shí)，HTMX 發(fā)送 GET 請求到/api/tasks獲取任務(wù)列表
用戶提交新任務(wù)表單時(shí)，HTMX 發(fā)送 POST 請求到/api/tasks
后端創(chuàng)建新任務(wù)并返回，HTMX 將新任務(wù)添加到列表
用戶點(diǎn)擊任務(wù)的完成狀態(tài)時(shí)，HTMX 發(fā)送 PUT 請求到/api/tasks/{id}/toggle
后端更新任務(wù)狀態(tài)并返回，HTMX 更新任務(wù)列表
用戶刪除任務(wù)時(shí)，HTMX 發(fā)送 DELETE 請求到/api/tasks/{id}
后端刪除任務(wù)，HTMX 從 DOM 中移除任務(wù)項(xiàng)

部署與運(yùn)行

要運(yùn)行這個(gè)應(yīng)用，你需要

1. 創(chuàng)建一個(gè) Spring Boot 項(xiàng)目

2. 將上述后端代碼復(fù)制到 src/main/java/com/example/taskmanager 目錄

3. 將前端代碼保存至 src/main/resources/static/index.html

4. 運(yùn)行 Spring Boot 應(yīng)用

5. 在瀏覽器中訪問 http://localhost:8080/index.html

總結(jié)

通過結(jié)合 Spring Boot 和 HTMX，我們實(shí)現(xiàn)了一個(gè)高效、簡潔的前后端分離應(yīng)用。

這種架構(gòu)既保留了 Spring Boot 強(qiáng)大的后端處理能力，又通過 HTMX 簡化了前端開發(fā)，避免了復(fù)雜的前端框架和構(gòu)建流程。

對于中小型項(xiàng)目或者需要快速迭代的應(yīng)用來說，這種組合是一個(gè)非常不錯(cuò)的選擇。

如果你正在尋找一種輕量級、高效的 Web 開發(fā)解決方案，不妨嘗試一下 Spring Boot 與 HTMX 的組合。

到此這篇關(guān)于SpringBoot結(jié)合HTMX實(shí)現(xiàn)高效Web開發(fā)實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)SpringBoot Web開發(fā)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: