如何使用 templ 在 Go 中编写 HTML 用户界面?

简介

templ 是一个在 Go 中编写 HTML 用户界面的语言。使用 templ,我们可以创建可呈现 HTML 片段的组件,并将它们组合起来创建屏幕、页面、文档或应用程序。

安装

我们可以通过以下两种方式来安装 templ:

go 安装

首先,我们需要安装 Go 1.20 或更高版本。然后,在命令行中运行以下命令:

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

创建简单的模板组件

让我们来创建一个简单的 templ 组件。

首先,我们需要创建一个新的 Go 项目。在命令行中执行以下命令:

mkdir templDemo
cd templDemo
go mod init

然后,我们创建一个包含组件的 hello.templ 文件。组件是一个函数,它包含 templ 元素、标记以及 if、switch 和 for 表达式。

package main

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

接下来,我们执行 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 会生成一个名为 hello_templ.go 的文件,其中包含生成的 Go 代码。这个文件中包含一个名为 hello 的函数,它接受一个名为 name 的参数,并返回一个可渲染 HTML 的 templ.Component。

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

接下来,我们编写一个程序将组件渲染到 stdout。创建一个名为 main.go 的文件。

package main

import (
	"context"
	"os"
)

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

最后,我们执行以下命令来运行程序。程序会将组件的 HTML 输出到 stdout。

go run main.go

输出结果如下:

<div>Hello, Tim</div>

我们可以将任何实现 io.Writer 接口的类型传递给组件的渲染函数,而不仅仅是将 os.Stdout 传递进去。这意味着我们可以将输出写入文件、bytes.Buffer 或 HTTP 响应中。
通过这种方式,我们可以使用 templ 生成 HTML 文件,并将其作为静态内容托管在 S3 存储桶、Google Cloud Storage 中,或者将其用于生成 HTML 文件,然后通过转换流程转换为 PDF 或通过电子邮件发送。

运行第一个模板应用程序

让我们更新之前的应用程序,通过 HTTP 提供 HTML 页面,而不是将其写入终端。
首先,我们需要更新 main.go 文件。我们可以使用 templ.Handler 函数将 templ 组件作为标准的 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)
}

运行程序后,我们可以在浏览器中访问相应的页面:
在这里插入图片描述

结束语

现在,我们已经介绍了如何使用 templ 在 Go 中编写 HTML 用户界面。templ 是一个成熟的工具,可以帮助我们快速构建 web 应用。

相关推荐

  1. 如何Go编写Switch语句

    2024-03-13 08:08:04       55 阅读
  2. 如何Go编写

    2024-03-13 08:08:04       68 阅读
  3. 如何Go使用泛型

    2024-03-13 08:08:04       62 阅读
  4. 如何Go使用模板

    2024-03-13 08:08:04       50 阅读
  5. Go语言如何使用变量

    2024-03-13 08:08:04       27 阅读
  6. Ajax是什么?如何HTML5使用Ajax?

    2024-03-13 08:08:04       28 阅读
  7. 如何Go使用结构体标签

    2024-03-13 08:08:04       60 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-13 08:08:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-13 08:08:04       101 阅读
  3. 在Django里面运行非项目文件

    2024-03-13 08:08:04       82 阅读
  4. Python语言-面向对象

    2024-03-13 08:08:04       91 阅读

热门阅读

  1. @Insert注解是怎么用的?

    2024-03-13 08:08:04       51 阅读
  2. 构建轻量级CentOS Docker镜像的实战指南

    2024-03-13 08:08:04       42 阅读
  3. 微信小程序文字上下无缝轮播(滚动效果)

    2024-03-13 08:08:04       41 阅读
  4. R语言系列3——R语言数据可视化入门

    2024-03-13 08:08:04       44 阅读
  5. 微信小程序

    2024-03-13 08:08:04       44 阅读
  6. uniapp小程序上传oss

    2024-03-13 08:08:04       40 阅读
  7. Mac管理Ruby环境

    2024-03-13 08:08:04       45 阅读
  8. 贪心算法相关

    2024-03-13 08:08:04       43 阅读