【基于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要牢记
相关推荐
mayaairi1 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen2 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
码士集团小青2 小时前
从对标 Java 到对标 Go:Native AOT 的“无痛化“之路,走到哪一站了?
golang
风骏时光牛马2 小时前
AI源码分析:拆解模型底层实现逻辑
前端
IT_陈寒3 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端
右耳朵猫AI3 小时前
Go周刊2026W36 | Go 1.27.1 发布、TinyGo 0.42、HTTP/2 原生迁入 net/http、quic-go 0.62
redis·http·golang
乘风gg3 小时前
DeepSeek V4.1 Flash 来了,明天中午 Flash 降价 60%
前端·ai编程·claude
默_笙3 小时前
❗ 给金鱼装记忆(上):从白板到笔记本,AI 的短期记忆生存指南
前端·javascript
酷酷的逗逗乐3 小时前
前端转 Agent 开发 · 第五节:Memory 会话记忆
前端·程序员
掘金挖土4 小时前
前端手摸手跑路之 AI 应用开发(二)
前端·后端