Go語言使用templ實(shí)現(xiàn)編寫HTML用戶界面

更新時(shí)間：2023年12月22日 11:20:34 作者：愛發(fā)白日夢(mèng)的后端

templ是一個(gè)在 Go 中編寫 HTML 用戶界面的語言,使用 templ,我們可以創(chuàng)建可呈現(xiàn) HTML 片段的組件,下面就跟隨小編一起了解一下具體的實(shí)現(xiàn)方法吧

簡(jiǎn)介

templ是一個(gè)在 Go 中編寫 HTML 用戶界面的語言。使用 templ，我們可以創(chuàng)建可呈現(xiàn) HTML 片段的組件，并將它們組合起來創(chuàng)建屏幕、頁面、文檔或應(yīng)用程序。

安裝

我們可以通過以下兩種方式來安裝 templ：

go 安裝

首先，我們需要安裝 Go 1.20 或更高版本。然后，在命令行中運(yùn)行以下命令：

go install github.com/a-h/templ/cmd/templ@latest

二進(jìn)制安裝

我們也可以從 GitHub 的發(fā)布頁[2] 下載并安裝二進(jìn)制文件。

創(chuàng)建簡(jiǎn)單的模板組件

讓我們來創(chuàng)建一個(gè)簡(jiǎn)單的 templ 組件。

首先，我們需要?jiǎng)?chuàng)建一個(gè)新的 Go 項(xiàng)目。在命令行中執(zhí)行以下命令：

mkdir templDemo
cd templDemo
go mod init

然后，我們創(chuàng)建一個(gè)包含組件的 hello.templ 文件。組件是一個(gè)函數(shù)，它包含 templ 元素、標(biāo)記以及 if、switch 和 for 表達(dá)式。

package main

templ hello(name string) {
 <div>Hello, { name }</div>
}

接下來，我們執(zhí)行 templ generate 命令生成 Go 代碼。命令的輸出如下：

Processing path: templDemo
Generated code for "templDemo\\hello.templ" in 2.2127ms
Generated code for 1 templates with 0 errors in 2.7429ms

templ 會(huì)生成一個(gè)名為 hello_templ.go 的文件，其中包含生成的 Go 代碼。這個(gè)文件中包含一個(gè)名為 hello 的函數(shù)，它接受一個(gè)名為 name 的參數(shù)，并返回一個(gè)可渲染 HTML 的 templ.Component。

func hello(name string) templ.Component {
  // ...
}

接下來，我們編寫一個(gè)程序?qū)⒔M件渲染到 stdout。創(chuàng)建一個(gè)名為 main.go 的文件。

package main

import (
 "context"
 "os"
)

func main() {
 component := hello("Tim")
 component.Render(context.Background(), os.Stdout)
}

最后，我們執(zhí)行以下命令來運(yùn)行程序。程序會(huì)將組件的 HTML 輸出到 stdout。

go run main.go

輸出結(jié)果如下：

<div>Hello, Tim</div>

我們可以將任何實(shí)現(xiàn) io.Writer 接口的類型傳遞給組件的渲染函數(shù)，而不僅僅是將 os.Stdout 傳遞進(jìn)去。這意味著我們可以將輸出寫入文件、bytes.Buffer 或 HTTP 響應(yīng)中。

通過這種方式，我們可以使用 templ 生成 HTML 文件，并將其作為靜態(tài)內(nèi)容托管在 S3 存儲(chǔ)桶、Google Cloud Storage 中，或者將其用于生成 HTML 文件，然后通過轉(zhuǎn)換流程轉(zhuǎn)換為 PDF 或通過電子郵件發(fā)送。

運(yùn)行第一個(gè)模板應(yīng)用程序

讓我們更新之前的應(yīng)用程序，通過 HTTP 提供 HTML 頁面，而不是將其寫入終端。

首先，我們需要更新 main.go 文件。我們可以使用 templ.Handler 函數(shù)將 templ 組件作為標(biāo)準(zhǔn)的 HTTP 處理器。

package main

import (
 "fmt"
 "net/http"

 "github.com/a-h/templ"
)

func main() {
 component := hello("Tim")
 
 http.Handle("/", templ.Handler(component))

 fmt.Println("Listening on :3000")
 http.ListenAndServe(":3000", nil)
}

運(yùn)行程序后，我們可以在瀏覽器中訪問相應(yīng)的頁面：