【基于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要牢记
相关推荐
茉莉玫瑰花茶2 小时前
GO [ 方法 ]
开发语言·后端·golang
卷无止境2 小时前
ECharts:把数据变成故事的可视化利器
前端
Eric_见嘉2 小时前
在职前端 Skill 和 MCP 分享
前端·后端·agent
liangshanbo12152 小时前
面试题:如何优化 Webpack 的打包速度?
前端·webpack·node.js
wengad3 小时前
从 wangEditor 迁到 wangEditor-next
前端·javascript·vue.js
行者-全栈开发4 小时前
【前端/JS框架】CVE-2026-3854:GitHub Enterprise Server X-Stat注入XSS漏洞深度剖析与紧急修复指南
前端·javascript·github
数据库百宝箱4 小时前
rum&gin索引对比
java·数据库·gin
计算机魔术师5 小时前
AMD砸82亿买下李飞飞,这次不卖芯片卖什么?
前端
hzxpaipai5 小时前
杭州企业官网怎么建设?从策划到上线的5步建站方法
运维·服务器·前端·网络
怕浪猫5 小时前
2026年金九银十,我面了22个前端
前端·javascript·面试