React 太重、Svelte 太绕？Go + HTMX 全栈方案，连 LLM 都更容易看懂

<form hx-post="/plants/1/events" hx-target="#timeline">
  <input name="event_type" placeholder="浇水 / 换盆 / 施肥" />
  <textarea name="notes"></textarea>
  <button type="submit">记录</button>
</form>

<div id="timeline"><!-- 服务端返回的 HTML 会替换这里 --></div>

<input type="search" name="q"
       hx-get="/plants"
       hx-trigger="input changed delay:300ms"
       hx-target="#plant-list"
       hx-push-url="true" />

<div hx-get="/plants/1/timeline" hx-trigger="load">
  加载中...
</div>

<!-- 服务端返回的片段 -->
<span id="health-badge" hx-swap-oob="true">健康度：良好</span>
<div id="toast" hx-swap-oob="true">已更新</div>

func redirect(w http.ResponseWriter, r *http.Request, url string) {
	if r.Header.Get("HX-Request") == "true" {
		w.Header().Set("HX-Redirect", url)
		w.WriteHeader(http.StatusOK)
		return
	}
	http.Redirect(w, r, url, http.StatusSeeOther)
}

<div x-data="{ open: false }">
  <button @click="open = true">删除植物</button>
  <div x-show="open">
    <p>确定删除吗？</p>
    <button hx-delete="/plants/1">确认</button>
    <button @click="open = false">取消</button>
  </div>
</div>

package components

templ Timeline(entries []db.TimelineEntry) {
	<div id="timeline">
		for _, e := range entries {
			@EntryCard(e)
		}
	</div>
}

func (h *Handler) AddEvent(w http.ResponseWriter, r *http.Request) {
	entries, err := h.svc.AddEvent(r.Context(), r.PathValue("id"), r.FormValue("event_type"), r.FormValue("notes"))
	if err != nil {
		http.Error(w, "服务异常", http.StatusInternalServerError)
		return
	}
	components.Timeline(entries).Render(r.Context(), w)
}

-- name: ListTimeline :many
SELECT id, plant_id, event_type, notes, created_at
FROM timeline_entries
WHERE plant_id = $1
ORDER BY created_at DESC;

letsgo/
├── go.mod
├── main.go
└── templates/
    ├── layout.html
    └── partials.html

mkdir -p letsgo/templates && cd letsgo
# 把下面四个文件按路径保存后：
go run .
# 浏览器打开 http://localhost:8080

module letsgo

go 1.22.0

package main

import (
	"embed"
	"html/template"
	"log"
	"net/http"
	"strconv"
	"strings"
	"sync"
	"time"
)

//go:embed templates/*.html
var tplFS embed.FS

var tpl = template.Must(template.ParseFS(tplFS, "templates/*.html"))

// ---------- 数据层：内存存储，换成 sqlc + PostgreSQL 时只需替换这里 ----------

type Plant struct {
	ID     int
	Name   string
	Health string
}

type Entry struct {
	Type  string
	Notes string
	At    time.Time
}

type Store struct {
	mu      sync.RWMutex
	plants  []*Plant
	entries map[int][]Entry
}

func NewStore() *Store {
	return &Store{
		plants: []*Plant{
			{1, "薄荷", "良好"},
			{2, "罗勒", "一般"},
			{3, "多肉", "良好"},
		},
		entries: map[int][]Entry{
			1: {{"浇水", "早上浇了一杯水", time.Now().Add(-48 * time.Hour)}},
		},
	}
}

func (s *Store) Search(q string) []*Plant {
	s.mu.RLock()
	defer s.mu.RUnlock()
	var out []*Plant
	for _, p := range s.plants {
		if q == "" || strings.Contains(strings.ToLower(p.Name), strings.ToLower(q)) {
			c := *p
			out = append(out, &c)
		}
	}
	return out
}

func (s *Store) Get(id int) (*Plant, bool) {
	s.mu.RLock()
	defer s.mu.RUnlock()
	for _, p := range s.plants {
		if p.ID == id {
			c := *p
			return &c, true
		}
	}
	return nil, false
}

func (s *Store) SetHealth(id int, level string) (*Plant, bool) {
	s.mu.Lock()
	defer s.mu.Unlock()
	for _, p := range s.plants {
		if p.ID == id {
			p.Health = level
			c := *p
			return &c, true
		}
	}
	return nil, false
}

func (s *Store) Delete(id int) {
	s.mu.Lock()
	defer s.mu.Unlock()
	for i, p := range s.plants {
		if p.ID == id {
			s.plants = append(s.plants[:i], s.plants[i+1:]...)
			return
		}
	}
}

func (s *Store) AddEntry(id int, e Entry) {
	s.mu.Lock()
	defer s.mu.Unlock()
	s.entries[id] = append([]Entry{e}, s.entries[id]...) // 新记录放最前面
}

func (s *Store) Entries(id int) []Entry {
	s.mu.RLock()
	defer s.mu.RUnlock()
	return append([]Entry(nil), s.entries[id]...)
}

// ---------- 传输层：HTTP handler ----------

type App struct{ store *Store }

func isHX(r *http.Request) bool { return r.Header.Get("HX-Request") == "true" }

func render(w http.ResponseWriter, name string, data any) {
	w.Header().Set("Content-Type", "text/html; charset=utf-8")
	if err := tpl.ExecuteTemplate(w, name, data); err != nil {
		log.Printf("render %s: %v", name, err)
	}
}

func plantID(r *http.Request) (int, bool) {
	id, err := strconv.Atoi(r.PathValue("id"))
	return id, err == nil
}

// 首页：完整页面
func (a *App) index(w http.ResponseWriter, r *http.Request) {
	render(w, "page", map[string]any{"Q": "", "Plants": a.store.Search("")})
}

// 搜索：同一个 URL，HTMX 请求返回片段，直接访问（刷新、分享链接）返回完整页面
func (a *App) search(w http.ResponseWriter, r *http.Request) {
	q := strings.TrimSpace(r.URL.Query().Get("q"))
	data := map[string]any{"Q": q, "Plants": a.store.Search(q)}
	w.Header().Add("Vary", "HX-Request") // 同一 URL 两种响应，告诉缓存区分对待
	if isHX(r) {
		render(w, "plant-list", data)
		return
	}
	render(w, "page", data)
}

// 详情面板（片段）
func (a *App) detail(w http.ResponseWriter, r *http.Request) {
	id, _ := plantID(r)
	p, ok := a.store.Get(id)
	if !ok {
		http.NotFound(w, r)
		return
	}
	render(w, "detail", p)
}

// 时间线：模拟一个慢查询，配合 hx-trigger="load" 懒加载
func (a *App) timeline(w http.ResponseWriter, r *http.Request) {
	id, _ := plantID(r)
	time.Sleep(600 * time.Millisecond)
	render(w, "timeline", map[string]any{"Entries": a.store.Entries(id)})
}

// 添加事件：成功返回时间线 + OOB 提示；失败用响应头改道到 #toast
func (a *App) addEvent(w http.ResponseWriter, r *http.Request) {
	id, _ := plantID(r)
	typ := strings.TrimSpace(r.FormValue("event_type"))
	if typ == "" {
		w.Header().Set("HX-Retarget", "#toast")
		w.Header().Set("HX-Reswap", "innerHTML")
		w.WriteHeader(http.StatusUnprocessableEntity)
		render(w, "error-text", "事件类型不能为空")
		return
	}
	a.store.AddEntry(id, Entry{Type: typ, Notes: strings.TrimSpace(r.FormValue("notes")), At: time.Now()})
	render(w, "timeline", map[string]any{"Entries": a.store.Entries(id)})
	render(w, "toast", "已记录：+"+typ)
}

// 更新健康度：一次响应同时更新列表徽标、详情徽标和提示
func (a *App) setHealth(w http.ResponseWriter, r *http.Request) {
	id, _ := plantID(r)
	p, ok := a.store.SetHealth(id, r.FormValue("level"))
	if !ok {
		http.NotFound(w, r)
		return
	}
	render(w, "health-badge-oob", p)        // 列表里的徽标
	render(w, "health-badge-detail-oob", p) // 详情里的徽标
	render(w, "toast", p.Name+" 的健康度已更新为 "+p.Health)
}

func (a *App) delete(w http.ResponseWriter, r *http.Request) {
	id, _ := plantID(r)
	a.store.Delete(id)
	// 主体为空：目标 <li> 会被整个移除；同时用 OOB 更新提示
	render(w, "toast", "已删除")
}

// ---------- 登录过期演示：HX-Redirect ----------

func redirect(w http.ResponseWriter, r *http.Request, url string) {
	if isHX(r) {
		w.Header().Set("HX-Redirect", url) // 普通 302 会被 HTMX 当成“要塞进目标里的页面”
		w.WriteHeader(http.StatusOK)
		return
	}
	http.Redirect(w, r, url, http.StatusSeeOther)
}

func (a *App) secure(w http.ResponseWriter, r *http.Request) {
	if _, err := r.Cookie("session"); err != nil {
		redirect(w, r, "/login")
		return
	}
	render(w, "toast-inline", "🔓 你已登录，这是受保护的内容")
}

func (a *App) loginPage(w http.ResponseWriter, r *http.Request) { render(w, "login", nil) }

func (a *App) login(w http.ResponseWriter, r *http.Request) {
	http.SetCookie(w, &http.Cookie{Name: "session", Value: "demo", Path: "/", HttpOnly: true})
	http.Redirect(w, r, "/", http.StatusSeeOther)
}

func (a *App) logout(w http.ResponseWriter, r *http.Request) {
	http.SetCookie(w, &http.Cookie{Name: "session", Path: "/", MaxAge: -1})
	redirect(w, r, "/")
}

func main() {
	a := &App{store: NewStore()}
	mux := http.NewServeMux()
	mux.HandleFunc("GET /{$}", a.index)
	mux.HandleFunc("GET /plants", a.search)
	mux.HandleFunc("GET /plants/{id}", a.detail)
	mux.HandleFunc("GET /plants/{id}/timeline", a.timeline)
	mux.HandleFunc("POST /plants/{id}/events", a.addEvent)
	mux.HandleFunc("POST /plants/{id}/health", a.setHealth)
	mux.HandleFunc("DELETE /plants/{id}", a.delete)
	mux.HandleFunc("GET /secure", a.secure)
	mux.HandleFunc("GET /login", a.loginPage)
	mux.HandleFunc("POST /login", a.login)
	mux.HandleFunc("POST /logout", a.logout)

	log.Println("listening on http://localhost:8080")
	log.Fatal(http.ListenAndServe(":8080", mux))
}

{{define "page"}}<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Let's Go 植物记录</title>
  <!-- 让 422 响应也参与替换，这样表单校验错误可以直接显示 -->
  <meta name="htmx-config" content='{"responseHandling":[{"code":"204","swap":false},{"code":"[23]..","swap":true},{"code":"422","swap":true},{"code":"[45]..","swap":false,"error":true}]}'>
  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
  <style>
    body{font-family:system-ui,sans-serif;max-width:640px;margin:2rem auto;padding:0 1rem;line-height:1.6}
    [x-cloak]{display:none!important}
    ul{padding-left:1.2rem} li{margin:.4rem 0}
    .badge{padding:.1rem .5rem;border-radius:999px;font-size:.85rem;background:#e5e7eb}
    .良好{background:#bbf7d0}.一般{background:#fde68a}.枯萎{background:#fecaca}
    #toast{min-height:1.5rem;color:#065f46;margin:.5rem 0}
    .err{color:#b91c1c}
    input,textarea,button{font:inherit;margin:.15rem 0}
    .htmx-request{opacity:.5}
  </style>
</head>
<body>
  <h1>🌱 Let's Go 植物记录</h1>
  <div id="toast"></div>

  <input type="search" name="q" value="{{.Q}}" placeholder="搜索植物，比如：薄荷"
         hx-get="/plants"
         hx-trigger="input changed delay:300ms, search"
         hx-target="#plant-list"
         hx-push-url="true">

  <div id="plant-list">{{template "plant-list" .}}</div>

  <div id="detail"></div>

  <hr>
  <button hx-get="/secure" hx-target="#secure-result">模拟：请求受保护内容</button>
  <span id="secure-result"></span>
</body>
</html>{{end}}

{{define "plant-list"}}<ul>
{{range .Plants}}{{template "plant-item" .}}
{{else}}<li>没有找到匹配的植物</li>
{{end}}</ul>{{end}}

{{define "plant-item"}}<li id="plant-{{.ID}}">
  <strong>{{.Name}}</strong> {{template "health-badge" .}}
  <button hx-get="/plants/{{.ID}}" hx-target="#detail">查看</button>
  <span x-data="{ open: false }">
    <button x-show="!open" @click="open = true">删除</button>
    <span x-show="open" x-cloak>
      确定删除？
      <button hx-delete="/plants/{{.ID}}" hx-target="#plant-{{.ID}}" hx-swap="outerHTML">确认</button>
      <button @click="open = false">取消</button>
    </span>
  </span>
</li>{{end}}

{{define "health-badge"}}<span id="health-{{.ID}}" class="badge {{.Health}}">{{.Health}}</span>{{end}}

{{define "health-badge-oob"}}<span id="health-{{.ID}}" class="badge {{.Health}}" hx-swap-oob="true">{{.Health}}</span>{{end}}

{{define "health-badge-detail-oob"}}<span id="detail-health-{{.ID}}" class="badge {{.Health}}" hx-swap-oob="true">{{.Health}}</span>{{end}}

{{define "toast"}}<div id="toast" hx-swap-oob="true">{{.}}</div>{{end}}

{{define "error-text"}}<span class="err">{{.}}</span>{{end}}

{{define "toast-inline"}}{{.}}{{end}}

{{define "detail"}}<section>
  <h2>{{.Name}} <span id="detail-health-{{.ID}}" class="badge {{.Health}}">{{.Health}}</span></h2>
  <div>
    <button hx-post="/plants/{{.ID}}/health" hx-vals='{"level":"良好"}' hx-swap="none">标记：良好</button>
    <button hx-post="/plants/{{.ID}}/health" hx-vals='{"level":"一般"}' hx-swap="none">标记：一般</button>
    <button hx-post="/plants/{{.ID}}/health" hx-vals='{"level":"枯萎"}' hx-swap="none">标记：枯萎</button>
  </div>
  <form hx-post="/plants/{{.ID}}/events" hx-target="#timeline"
        hx-on::after-request="if (event.detail.successful) this.reset()">
    <input name="event_type" placeholder="事件类型：浇水 / 换盆 / 施肥">
    <br>
    <textarea name="notes" placeholder="备注（可选）" rows="2" cols="40"></textarea>
    <br>
    <button type="submit">记录</button>
  </form>
  <h3>时间线</h3>
  <div id="timeline" hx-get="/plants/{{.ID}}/timeline" hx-trigger="load">加载中……</div>
</section>{{end}}

{{define "timeline"}}<ul>
{{range .Entries}}<li>{{.At.Format "01-02 15:04"}} · <strong>{{.Type}}</strong>{{if .Notes}}：{{.Notes}}{{end}}</li>
{{else}}<li>还没有记录</li>
{{end}}</ul>{{end}}

{{define "login"}}<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>登录</title></head>
<body style="font-family:system-ui;max-width:420px;margin:3rem auto">
  <h1>请先登录</h1>
  <p>（演示：点击按钮即写入 session Cookie）</p>
  <form method="post" action="/login"><button type="submit">登录</button></form>
</body></html>{{end}}