【基于GO的Web开发3】gin框架_HTML渲染

所属知识点:Gin 框架 HTML 渲染前置基础(Go 原生模板引擎)

一、概念:模板与渲染

模板可以理解为事先定义好的 HTML 文档文件。 模板渲染本质:文本替换操作,使用后端数据替换 HTML 文档中预先标记好的占位符。

二、Go 语言两套模板引擎标准库

  1. text/template:通用文本模板
  2. html/template:专门用于 HTML 文档,自带XSS 安全转义(Web 开发优先选用)

三、模板文件编写规则

  1. 后缀:通常为 .tmpl / .tpl,后缀名可自定义
  2. 编码:必须 UTF‑8
  3. 占位符语法:使用 {``{ }} 包裹要传入的数据
  4. 数据访问:
    • 简单数据:直接 {``{ . }}. 代表传给模板的全部数据
    • 结构体 / 复杂类型:{``{ .FieldName }}.+ 字段名访问成员
  5. 渲染规则:除{``{ }}包裹内容以外,其余文本原样输出

四、模板引擎使用三步骤

①定义模板文件 → ②解析模板文件 → ③模板渲染

1. 定义模板文件

新建.tmpl文件,按照模板语法编写 HTML 内容。 示例 hello.tmpl

html

预览

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Hello</title>
</head>
<body>
    <p>Hello {{ . }}</p>
</body>
</html>

2. 解析模板文件(获取模板对象)

go

运行

Go 复制代码
// 1.从字符串解析模板内容
func (t *Template) Parse(src string) (*Template, error)
// 2.解析一个/多个模板文件
func ParseFiles(filenames ...string) (*Template, error)
// 3.通配符批量解析匹配的文件
func ParseGlob(pattern string) (*Template, error)

拓展用法:先用New()创建空模板对象,再调用解析方法

go

运行

Go 复制代码
func New(name string) *Template

3. 模板渲染(填充数据输出)

go

运行

Go 复制代码
// 渲染当前模板对象
func (t *Template) Execute(wr io.Writer, data interface{}) error
// 指定模板名称渲染(多模板文件场景)
func (t *Template) ExecuteTemplate(wr io.Writer, name string, data interface{}) error
  • wr io.Writer:输出目标,Web 场景传入w http.ResponseWriter,直接响应浏览器
  • data:传给模板的数据,任意类型

五、完整原生 HTTP 示例代码

go

运行

Go 复制代码
package main

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

func sayHello(w http.ResponseWriter, r *http.Request){
	// 2. 解析模板
	t, err := template.ParseFiles("./hello.tmpl")
	if err != nil {
		fmt.Println("Parse template failed,err:%v", err)
		return
	}
	// 3. 渲染模板,传入字符串数据"小王子"
	err = t.Execute(w, "小王子")
	if err != nil {
		fmt.Println("render template failed,err:%v", err)
		return
	}
}

func main() {
	http.HandleFunc("/", sayHello)
	err := http.ListenAndServe(":9000", nil)
	if err != nil {
		fmt.Println("HTTP server start failed, err:%v", err)
		return
	}
}

六、思维导图速记口诀

plaintext

Go 复制代码
模板三步骤:定义→解析→渲染
占位双大括号,点号拿数据
html/template,防XSS要牢记
相关推荐
小徐_23337 小时前
wot-ui-cli 1.1.0 发布:支持 OpenCode、Antigravity,wot-ui 图标迁移不再靠猜
前端
__zRainy__8 小时前
Node.js Web 框架选型指南:从 Express 到 Hono 的全景对比
前端·node.js·express·koa·nestjs·egg·fastify
西瓜有点饿8 小时前
PostCSS 和 UnoCSS 的作用和区别
前端·postcss
伟大的兔神9 小时前
我做了一个本地优先的 AI 图片工作台:Loomora v1.0.0 正式发布
前端·javascript·vue.js
90后的晨仔10 小时前
uni-app项目 Vue3 状态管理 Pinia 完全指南:从概念到实战的深度解析
前端
90后的晨仔10 小时前
uni-app 在 iOS 平台跳转页面时移除底部安全区域的完整技术指南
前端
用户9385156350710 小时前
React + JWT 登录鉴权底层原理与工程化实践
前端·react.js
zww894911110 小时前
家政派单系统开发实战:架构设计与派单算法指南
前端·系统架构
fangzhanpeng16811 小时前
(前端)2.js变量作用域样例
开发语言·前端·javascript