Go中使用HTMX编写ToDo案例演示

在 Web 开发领域，简单性和效率是关键。这就是 HTMX 和 Go 的结合发挥作用的地方。HTMX 允许您直接在 HTML 中访问 AJAX、CSS Transitions、WebSockets 等，使您的前端开发更加简单。另一方面，Golang 以其后端开发的效率和简单性而闻名。在这篇博文中，我们将在前端使用 HTMX 并使用 Go 作为后端服务器来创建一个基本的 Todo 应用程序。

设置Go环境
首先，确保您的系统上安装了 Go。您可以从Go 官方网站下载。

安装后，为我们的项目创建一个新目录并初始化一个新的 Go 模块：

mkdir todo-app
cd todo-app
go mod init todo-app

创建 Go 服务器
我们的 Golang 服务器将处理 HTTP 请求。让我们首先创建一个名为

main.go

的文件

package main

import (
    "html/template"
    "log"
    "net/http"
)

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        tmpl, err := template.ParseFiles("index.html")
        if err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
            return
        }
        tmpl.Execute(w, nil)
    })

    log.Println("Starting server on :8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

此代码片段创建一个基本的 Web 服务器，该服务器侦听端口 8080 并提供index.html文件服务。

集成 HTMX
HTMX 是一个功能强大的工具，允许您直接从 HTML 访问现代浏览器功能。要使用 HTMX，您需要将其包含在 HTML 文件中。

在同一目录中创建一个名为index.html的文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo App</title>
    <script src="https://unpkg.com/htmx.org"></script>
</head>
<body>
    <h1>Todo App</h1>
    <!-- Todo List will be loaded here -->
    <div id="todo-list" hx-get="/todos" hx-trigger="load">
        Loading todos...
    </div>
</body>
</html>

此 HTML 文件包含 HTMX 并设置一个将填充我们的待办事项列表的 div。

建立待办事项清单
让我们添加列出、添加和删除待办事项的功能。我们首先在 Golang 代码中定义一个 Todo 结构体：

type Todo struct {
    ID    int
    Title string
    Done  bool
}

为简单起见，我们将待办事项存储在内存中：

var todos = []Todo{
    {1, "Learn Go", false},
    {2, "Build a Todo App", false},
}

现在，让我们创建用于列出、添加和删除待办事项的处理程序

全部列出

http.HandleFunc("/todos", func(w http.ResponseWriter, r *http.Request) {
    tmpl, err := template.ParseFiles("todos.html")
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }
    tmpl.Execute(w, todos)
})

添加待办事项

http.HandleFunc("/add-todo", func(w http.ResponseWriter, r *http.Request) {
    if r.Method == "POST" {
        title := r.FormValue("title")
        todos = append(todos, Todo{len(todos) + 1, title, false})
        http.Redirect(w, r, "/", http.StatusFound)
    }
})

删除所有

http.HandleFunc("/delete-todo", func(w http.ResponseWriter, r *http.Request) {
    if r.Method == "POST" {
        id, err := strconv.Atoi(r.FormValue("id"))
        if err != nil {
            http.Error(w, err.Error(), http.StatusBadRequest)
            return
        }
        // Delete todo from todos slice
        // ...
        http.Redirect(w, r, "/", http.StatusFound)
    }
})

使用 HTMX 的前端
在index.html中，使用 HTMX 来处理添加和删除待办事项：

<body>
    <!-- ... -->
    <form hx-post="/add-todo" hx-target="todo-list">
        <input type="text" name="title" required>
        <button type="submit">Add Todo</button>
    </form>

    <div id="todo-list" hx-get="/todos" hx-trigger="load">
        <!-- Todos will be loaded here -->
    </div>
</body>

每个待办事项都可以有一个删除按钮：

<!-- In todos.html -->
{{range .}}
    <div>
        <span>{{.Title}}</span>
        <form hx-post="/delete-todo" hx-target="todo-list">
            <input type="hidden" name="id" value="{{.ID}}">
            <button type="submit">Delete</button>
        </form>
    </div>
{{end}}

结论
我们使用 HTMX 和 Go 创建了一个基本的 Todo 应用程序。此设置演示了如何使用最少的 JavaScript 构建动态且高效的 Web 应用程序，利用前端 HTMX 的强大功能以及后端 Go 的简单性和性能。

请记住，这只是一个基本示例。对于生产应用程序，您需要更深入地考虑持久存储、输入验证和错误处理等方面。然而，这个示例是使用这些强大技术构建简单、动态 Web 应用程序的一个很好的起点。