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

TimLiuDream · · 256 次点击 · 开始浏览    置顶

> 关注公众号【爱发白日梦的后端】分享技术干货、读书笔记、开源项目、实战经验、高效开发工具等,您的关注将是我的更新动力! ## 简介 [templ](https://github.com/a-h/templ "templ") 是一个在 Go 中编写 HTML 用户界面的语言。使用 templ,我们可以创建可呈现 HTML 片段的组件,并将它们组合起来创建屏幕、页面、文档或应用程序。 ## 安装 我们可以通过以下两种方式来安装 templ: ### go 安装 首先,我们需要安装 Go 1.20 或更高版本。然后,在命令行中运行以下命令: ```bash go install github.com/a-h/templ/cmd/templ@latest ``` ### 二进制安装 我们也可以从 [GitHub 的发布页](https://github.com/a-h/templ/releases/tag/v0.2.476 "GitHub 的发布页") 下载并安装二进制文件。 ## 创建简单的模板组件 让我们来创建一个简单的 templ 组件。 首先,我们需要创建一个新的 Go 项目。在命令行中执行以下命令: ```bash mkdir templDemo cd templDemo go mod init ``` 然后,我们创建一个包含组件的 `hello.templ` 文件。组件是一个函数,它包含 templ 元素、标记以及 `if`、`switch` 和 `for` 表达式。 ```html package main templ hello(name string) { <div>Hello, { name }</div> } ``` 接下来,我们执行 `templ generate` 命令生成 Go 代码。命令的输出如下: ```html 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`。 ```go func hello(name string) templ.Component { // ... } ``` 接下来,我们编写一个程序将组件渲染到 `stdout`。创建一个名为 `main.go` 的文件。 ```go package main import ( "context" "os" ) func main() { component := hello("Tim") component.Render(context.Background(), os.Stdout) } ``` 最后,我们执行以下命令来运行程序。程序会将组件的 HTML 输出到 `stdout`。 ```go go run main.go ``` 输出结果如下: ```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 处理器。 ```go 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) } ``` 运行程序后,我们可以在浏览器中访问相应的页面: ![](https://files.mdnice.com/user/38913/8e0ca32e-f31c-427e-9a50-94c4743cc349.png) ## 结束语 现在,我们已经介绍了如何使用 `templ` 在 Go 中编写 HTML 用户界面。templ 是一个成熟的工具,可以帮助我们快速构建 web 应用。

有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

256 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传