当前位置： 首页 > news >正文

【Golang】——Gin 框架中的模板渲染详解

news 文章来源：https://blog.csdn.net/weixin_73901614/article/details/143836624 2024/11/30 11:36:43

Gin 框架支持动态网页开发，能够通过模板渲染结合数据生成动态页面。在这篇文章中，我们将一步步学习如何在 Gin 框架中配置模板、渲染动态数据，并结合静态资源文件创建一个功能完整的动态网站。

文章目录

    • 1. 什么是模板渲染？
      • 1.1 概念介绍
      • 1.2 Gin 中的模板渲染
    • 2. Gin 模板渲染基础
      • 2.1 配置模板引擎
        • 示例代码
        • 说明
      • 2.2 创建模板文件
        • 模板语法说明
      • 2.3 使用 `LoadHTMLFiles` 方法
    • 3. 模板渲染进阶
      • 3.1 条件判断
        • 示例模板
        • 示例数据
      • 3.2 循环处理
        • 示例模板
        • 示例数据
      • 3.3 嵌套模板
        • 基础模板 `layout.html`
        • 子模板 `home.html`
        • 渲染嵌套模板
    • 4. 静态文件的处理
      • 4.1 配置静态文件服务
      • 4.2 在模板中引用静态文件
        • 示例静态文件
    • 5. 实战：简易博客项目
      • 5.1 项目结构
      • 5.2 完整代码
    • 6. 总结

在这里插入图片描述

1. 什么是模板渲染？

1.1 概念介绍

模板渲染是一种动态生成 HTML 页面的技术。通过模板文件和动态数据的结合，Web 应用可以为每个用户生成不同的内容。模板渲染的主要作用包括：

  • 数据与视图分离：HTML 文件专注于页面结构和样式，动态数据由代码逻辑控制。
  • 代码复用：通过模板复用页面组件（如导航栏、页脚等）。
  • 维护便利：HTML 和业务逻辑分开，降低了代码维护的复杂性。

1.2 Gin 中的模板渲染

Gin 使用 Go 标准库 html/template 提供模板功能。html/template 是一套基于 HTML 的安全模板引擎，避免了常见的跨站脚本攻击 (XSS)。

2. Gin 模板渲染基础

2.1 配置模板引擎

在 Gin 框架中，模板引擎的配置通过以下步骤完成：

  1. 加载模板文件。
  2. 在路由中使用 c.HTML() 渲染模板。
示例代码
package mainimport "github.com/gin-gonic/gin"func main() {r := gin.Default()// 1. 加载模板文件r.LoadHTMLGlob("templates/*")// 2. 定义路由r.GET("/", func(c *gin.Context) {c.HTML(200, "index.html", gin.H{"Title": "Gin 模板示例","Message": "欢迎来到 Gin 的世界！",})})// 3. 启动服务器r.Run(":8080")
}
说明
  • LoadHTMLGlob("templates/*")：加载 templates 文件夹下的所有 .html 文件。
  • c.HTML(200, "index.html", gin.H{"key": "value"})：渲染模板，传递键值对形式的数据。

2.2 创建模板文件

在项目根目录下创建 templates/index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{{ .Title }}</title>
</head>
<body><h1>{{ .Message }}</h1>
</body>
</html>
模板语法说明
  1. {{ .变量名 }}：用于输出变量值。
  2. 模板中的 .变量名 对应 gin.H 中的键。

运行程序后，访问 http://localhost:8080，浏览器将显示模板渲染的内容。

2.3 使用 LoadHTMLFiles 方法

LoadHTMLFiles 用于加载指定的模板文件，而不是整个目录：

r.LoadHTMLFiles("templates/index.html", "templates/about.html")

适用于模板文件较少且明确的情况。

3. 模板渲染进阶

Gin 模板渲染支持条件判断、循环、嵌套等功能。下面逐一讲解这些功能的实现方式。

3.1 条件判断

条件判断通过 {{ if }} 实现，可以搭配 {{ else }} 或 {{ else if }}。

示例模板
<h1>{{ .Title }}</h1>
{{ if .IsAdmin }}
<p>欢迎，管理员！</p>
{{ else }}
<p>欢迎，普通用户！</p>
{{ end }}
示例数据
c.HTML(200, "index.html", gin.H{"Title": "条件判断示例","IsAdmin": true,
})

当 IsAdmin 为 true 时，显示“欢迎，管理员！”。

3.2 循环处理

通过 {{ range }} 遍历数组或切片：

示例模板
<ul>{{ range .Items }}<li>{{ . }}</li>{{ end }}
</ul>
示例数据
c.HTML(200, "index.html", gin.H{"Items": []string{"苹果", "香蕉", "橙子"},
})

渲染结果为：

<ul><li>苹果</li><li>香蕉</li><li>橙子</li>
</ul>

3.3 嵌套模板

嵌套模板允许你将页面分为多个组件，例如公共的头部和尾部。

基础模板 layout.html
<!DOCTYPE html>
<html lang="en">
<head><title>{{ .Title }}</title>
</head>
<body><header>公共头部</header>{{ template "content" . }}<footer>公共尾部</footer>
</body>
</html>
子模板 home.html
{{ define "content" }}
<h1>{{ .Message }}</h1>
{{ end }}
渲染嵌套模板
r.GET("/", func(c *gin.Context) {c.HTML(200, "layout.html", gin.H{"Title": "嵌套模板示例","Message": "欢迎使用嵌套模板！",})
})

模板 layout.html 会自动嵌入子模板内容。

4. 静态文件的处理

4.1 配置静态文件服务

静态文件（如 CSS、JS、图片）通过 Static() 方法加载：

r.Static("/static", "./static")

此代码将项目中的 static 文件夹映射到 URL 路径 /static。

4.2 在模板中引用静态文件

<link rel="stylesheet" href="/static/style.css">
<script src="/static/app.js"></script>
示例静态文件

static/style.css：

body {font-family: Arial, sans-serif;background-color: #f5f5f5;
}

在这里插入图片描述

5. 实战：简易博客项目

5.1 项目结构

├── main.go
├── static
│   └── style.css
├── templates
│   ├── layout.html
│   ├── home.html
│   ├── post.html

5.2 完整代码

package mainimport ("github.com/gin-gonic/gin"
)type Post struct {ID      intTitle   stringContent string
}var posts = []Post{{1, "第一篇博客", "这是第一篇博客内容。"},{2, "第二篇博客", "这是第二篇博客内容。"},
}func main() {r := gin.Default()// 配置模板和静态文件r.LoadHTMLGlob("templates/*")r.Static("/static", "./static")// 首页路由r.GET("/", func(c *gin.Context) {c.HTML(200, "layout.html", gin.H{"Title": "首页","Posts": posts,})})// 文章详情路由r.GET("/post/:id", func(c *gin.Context) {id := c.Param("id")for _, post := range posts {if string(post.ID) == id {c.HTML(200, "layout.html", gin.H{"Title":   post.Title,"Content": post.Content,})return}}c.String(404, "文章未找到")})r.Run(":8080")
}

运行后访问 http://localhost:8080，你将看到一个支持文章列表和详情页的简单博客。

6. 总结

本篇博客从模板渲染的基础配置，到嵌套模板、静态文件服务，以及完整项目实战，全面展示了 Gin 框架在动态网页开发中的强大能力。下一篇，我们将学习表单处理与数据绑定，进一步丰富你的 Web 应用开发技能。

相关文章：

【Golang】——Gin 框架中的模板渲染详解

Gin 框架支持动态网页开发&#xff0c;能够通过模板渲染结合数据生成动态页面。在这篇文章中&#xff0c;我们将一步步学习如何在 Gin 框架中配置模板、渲染动态数据&#xff0c;并结合静态资源文件创建一个功能完整的动态网站。 文章目录 1. 什么是模板渲染&#xff1f;1.1 概…...

编程日记 2024/11/19 2:22:58

CSS:导航栏三角箭头

用CSS实现导航流程图的样式。可根据自己的需求进行修改&#xff0c;代码精略的写了一下。 注&#xff1a;场景一和场景二在分辨率比较低的情况下会有一个1px的缝隙不太优雅&#xff0c;自行处理。有个方法是直接在每个外面包一个DIV&#xff0c;用动态样式设置底色。 场景一、…...

编程日记 2024/11/19 2:15:51

onlyoffice Command service(命令服务)使用示例

一、说明 文档在这里&#xff1a;https://api.onlyoffice.com/docs/docs-api/additional-api/command-service/ 命令服务提供有几个简单的接口封装。也提供了前端和后端同时操作文档的可能。 二、正文 命令服务地址&#xff1a;https://documentserver/coauthoring/Com…...

编程日记 2024/11/19 2:12:49

QSS 设置bug

问题描述&#xff1a; 在QWidget上add 一个QLabel&#xff0c;但是死活不生效 原因&#xff1a; c 主程序如下&#xff1a; QWidget* LOGO new QWidget(logo_wnd);LOGO->setFixedSize(logo_width, 41);LOGO->setObjectName("TittltLogo");QVBoxLayout* tit…...

编程日记 2024/11/19 2:08:43

交换排序——快速排序

交换排序——快速排序 7.7 交换排序——快速排序快速排序概念c语言的库函数qsort快速排序框架quickSort 7.7 交换排序——快速排序 快速排序概念 快速排序是Hoare于1962年提出的一种二叉树结构的交换排序方法&#xff08;下文简称快排&#xff09;&#xff0c;其基本思想为&a…...

编程日记 2024/11/19 2:05:39

nodejs入门（1）：nodejs的前后端分离

一、引言 我关注nodejs还是从前几年做了的一个电力大数据展示系统开始的&#xff0c;当然&#xff0c;我肯定是很多年的计算机基础的&#xff0c;万变不离其宗。 现在web网站都流行所谓的前后端结构&#xff0c;不知不觉我也开始受到这个影响&#xff0c;以前都是前端直接操作…...

编程日记 2024/11/19 2:03:37

笔记｜M芯片MAC (arm64) docker上使用 export / import / commit 构建amd64镜像

很简单的起因&#xff0c;我的东西最终需要跑在amd64上&#xff0c;但是因为mac的架构师arm64&#xff0c;所以直接构建好的代码是没办法跨平台运行的。直接在arm64上pull下来的docker镜像也都是arm64架构。 检查镜像架构&#xff1a; docker inspect 8135f475e221 | grep Arc…...

编程日记 2024/11/19 1:53:26

gorm框架

连接 需要下载mysql的驱动 go get gorm.io/driver/mysql go get gorm.io/gorm 约定 主键&#xff1a;GORM 使用一个名为ID 的字段作为每个模型的默认主键。表名&#xff1a;默认情况下&#xff0c;GORM 将结构体名称转换为 snake_case 并为表名加上复数形式。 例如&#xf…...

编程日记 2024/11/19 1:52:25

免费送源码：Java+Springboot+MySQL Springboot多租户博客网站的设计 计算机毕业设计原创定制

Springboot多租户博客网站的设计 摘 要 博客网站是当今网络的热点&#xff0c;博客技术的出现使得每个人可以零成本、零维护地创建自己的网络媒体&#xff0c;Blog站点所形成的网状结构促成了不同于以往社区的Blog文化&#xff0c;Blog技术缔造了“博客”文化。本文课题研究的“…...

编程日记 2024/11/19 1:49:20

【ASR技术】WhisperX安装使用

介绍 WhisperX 是一个开源的自动语音识别&#xff08;ASR&#xff09;项目&#xff0c;由 m-bain 开发。该项目基于 OpenAI 的 Whisper 模型&#xff0c;通过引入批量推理、强制音素对齐和语音活动检测等技术。提供快速自动语音识别&#xff08;large-v2 为 70 倍实时&#xf…...

编程日记 2024/11/19 1:48:19

【计算机网络】协议定制

一、结构化数据传输流程 这里涉及协议定制、序列化/反序列化的知识 对于序列化和反序列化&#xff0c;有现成的解决方案&#xff1a;①json ②probuff ③xml 二、理解发送接收函数 我们调用的所有发送/接收函数&#xff0c;根本就不是把数据发送到网络中&#xff01;本质都是…...

编程日记 2024/11/19 1:46:16

【SQL】mysql常用命令

为方便查询&#xff0c;特整理MySQL常用命令。 约定&#xff1a;$后为Shell环境命令&#xff0c;>后为MySQL命令。 1 常用命令 第一步&#xff0c;连接数据库。 $ mysql -u root -p # 进入MySQL bin目录后执行&#xff0c;回车后输入密码连接。# 常用参数&…...

编程日记 2024/11/19 1:45:14

阿里云引领智算集群网络架构的新一轮变革

阿里云引领智算集群网络架构的新一轮变革 云布道师 11 月 8 日~ 10 日在江苏张家港召开的 CCF ChinaNet&#xff08;即中国网络大会&#xff09;上&#xff0c;众多院士、教授和业界技术领袖齐聚一堂&#xff0c;畅谈网络未来的发展方向&#xff0c;聚焦智算集群网络的创新变…...

编程日记 2024/11/19 1:42:12

几何合理的分片段感知的3D分子生成 FragGen - 评测

FragGen 来源于 2024 年 3 月 25 日 预印本的文章&#xff0c;文章题目是 Deep Geometry Handling and Fragment-wise Molecular 3D Graph Generation&#xff0c; 作者是 Odin Zhang&#xff0c;侯廷军&#xff0c;浙江大学药学院。FragGen 是一个基于分子片段的 3D 分子生成模…...

编程日记 2024/11/19 1:41:11

Python爬虫下载新闻，Flask展现新闻（2）

上篇讲了用Python从新闻网站上下载新闻&#xff0c;本篇讲用Flask展现新闻。关于Flask安装网上好多教程&#xff0c;不赘述。下面主要讲 HTML-Flask-数据 的关系。 简洁版 如图&#xff0c;页面简单&#xff0c;主要显示新闻标题。 分页&#xff0c;使用最简单的分页技术&…...

编程日记 2024/11/19 1:38:08

监控易监测对象及指标之：全面监控华为FusionInsight服务

随着大数据技术的广泛应用&#xff0c;华为FusionInsight以其卓越的性能和稳定性&#xff0c;成为了众多企业处理和分析海量数据的首选平台。然而&#xff0c;为了确保FusionInsight服务的持续稳定运行&#xff0c;对其进行全面监控至关重要。本文基于监控易工具&#xff0c;对…...

编程日记 2024/11/19 1:37:07

SQL面试题——蚂蚁SQL面试题 会话分组问题

会话分组问题 这里的分组不是简单的分组，而是会话的分组。 比如说，进入一个网站以后，可以连续的点击很多个页面，后台会记录用户的行为日志； 如果T日上午连续点击几个页面后退出了网站，直到第二天的下午才再次进入网站，单单从时间线上来看，昨天退出的那条日志跟今天进…...

编程日记 2024/11/19 1:36:06

nfs服务器--RHCE

一&#xff0c;简介 NFS&#xff08;Network File System&#xff0c;网络文件系统&#xff09;是FreeBSD支持的文件系统中的一种&#xff0c;它允许网络中的计 算机&#xff08;不同的计算机、不同的操作系统&#xff09;之间通过TCP/IP网络共享资源&#xff0c;主要在unix系…...

编程日记 2024/11/19 1:33:01

React--》如何高效管理前端环境变量：开发与生产环境配置详解

在前端开发中&#xff0c;如何让项目在不同环境下表现得更为灵活与高效&#xff0c;是每个开发者必须面对的挑战&#xff0c;从开发阶段的调试到生产环境的优化&#xff0c;环境变量配置无疑是其中的关键。 env配置文件&#xff1a;通常用于管理项目的环境变量&#xff0c;环境…...

编程日记 2024/11/19 1:24:53

Javascript高级—函数柯西化

函数柯西化&#xff08;经典面试题&#xff09; // 实现一个add方法&#xff0c;使计算结果能够满足如下预期&#xff1a; add(1)(2)(3) 6; add(1, 2, 3)(4) 10; add(1)(2)(3)(4)(5) 15;function add() {// 第一次执行时&#xff0c;定义一个数组专门用来存储所有的参数var…...

编程日记 2024/11/19 1:20:42

Sql进阶:字段中包含CSV,如何通过Sql解析CSV成多行多列?

Sql进阶 一、问题描述二、解决思路<一>、拆成多行<二>、拆成多列 三、代码实现 一、问题描述 Oracle数据库中某个字段value是CLOB类型,存的是csv格式的数据,如下所示 classnovalue1name,age,sex,… ‘李世民’,20,‘M’,…’ ‘李治’,18,‘M’,… ‘武则天’,16…...

编程日记 2024/11/19 1:15:36

linux之调度管理(5)-实时调度器

一、概述 在Linux内核中&#xff0c;实时进程总是比普通进程的优先级要高&#xff0c;实时进程的调度是由Real Time Scheduler(RT调度器)来管理&#xff0c;而普通进程由CFS调度器来管理。 实时进程支持的调度策略为&#xff1a;SCHED_FIFO和SCHED_RR。 SCHED_FIFO&#xff…...

编程日记 2024/11/19 1:14:35

mybatis-plus: mapper-locations: “classpath*:/mapper/**/*.xml“配置！！！解释

和mybatis一样的道理&#xff01;&#xff01;&#xff01;&#xff01;如果不指定这个配置&#xff0c;通常要求 XML 映射文件和 Mapper 接口的包名和结构相同&#xff01;&#xff01;&#xff01;&#xff01; 如果没有配置 mapper-locations&#xff0c;通常文件结构应遵循…...

编程日记 2024/11/19 1:08:29

nacos-operator在k8s集群上部署nacos-server2.4.3版本踩坑实录

文章目录 操作步骤1. 拉取仓库代码2. 安装nacos-operator3. 安装nacos-server 坑点一坑点二nacos-ui页面访问同一集群环境下微服务连接nacos地址配置待办参考文档 操作步骤 1. 拉取仓库代码 &#xff08;这一步主要用到代码中的相关yml文件&#xff0c;稍加修改用于部署容器&…...

编程日记 2024/11/19 1:06:27

面试篇-项目管理

⼀、构建管理 项目为什么选择Maven构建? 选择Maven进行项目构建有以下几个主要原因&#xff1a; 1. 依赖管理&#xff1a;Maven 提供了强大的依赖管理功能&#xff0c;可以自动下载项目所需的第三方库和依赖&#xff0c;并且可以管理这些依赖的版本、范围等信息。这简化了项…...

编程日记 2024/11/19 1:05:25

数仓建设之Oracle常见语法学习

1. 字符串截取 select substr(AAA-BBB, 1, instr(AAA-BBB, -, -1) - 1) 值 from dual; --AAA select substr(AAA-BBB, instr(AAA-BBB, -, -1) 1) 值 from dual; --BBB2. 帆软报表有参数SQL select a.agency_code, a.agency_name, a.agency_typefrom dw.dim_ta_subred_agency…...

编程日记 2024/11/19 1:04:24

物联网智能技术的深入探讨与案例分析

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程日记 2024/11/19 1:03:23

python语言基础-5 进阶语法-5.2 装饰器-5.2.2 简单装饰器

声明&#xff1a;本内容非盈利性质&#xff0c;也不支持任何组织或个人将其用作盈利用途。本内容来源于参考书或网站&#xff0c;会尽量附上原文链接&#xff0c;并鼓励大家看原文。侵删。 5.2.2 简单装饰器 装饰器的形式就是一个闭包&#xff0c;下面是一个简单的定义并使用…...

编程日记 2024/11/19 0:55:04

TransFormer--解码器：带掩码的多头注意力层

TransFormer--解码器&#xff1a;带掩码的多头注意力层 以英法翻译任务为例&#xff0c;假设训练数据集样本如下表所示。 原句目标翻译I am goodJe vais bienGood morningBonjourThank you very muchMerci beaucoup 上表所示的数据集由两部分组成&#xff1a;原句和目标句。在…...

编程日记 2024/11/19 0:52:02

【ArcGIS微课1000例】0130：图层组详解与使用

文章目录 一、图层组概述二、创建图层组三、在图层组中管理图层四、对话框中图层组的列表一、图层组概述 图层组包含其他图层。图层组有助于对地图中相关类型的图层进行组织，并且可用于定义高级绘制选项。例如，假设在地图上有两个图层分别用于表示铁路和高速公路。您可将这些…...

编程日记 2024/11/19 0:50:57

泉州自主建站模板/武汉seo技术

https://motion-project.github.io/ 转载于:https://www.cnblogs.com/kekeoutlook/p/11464869.html...

编程日记 2024/11/30 7:33:01

南通网站排名优化/友情链接有什么用

1、学习程度来评判时间PHP包含的东西也很多&#xff0c;如果简单点&#xff0c;一个小留言板大概学了2个月就差不多了&#xff0c;但是PHP当中还有很多别的比如面向对象、GD库、cookie、session……。想要做个真正像样的网站&#xff0c;CSS、JS、SQL也是必不可少(ajax无非就是…...

编程日记 2024/11/30 7:21:57

陕西建设网站/百度推广怎么看关键词排名

1.什么是反射&#xff1f; 反射就是把java类中各种成分映射成相应的类 2.在通过反射构造类的时候&#xff0c;并不知道constructor是什么类型&#xff0c;只知道是个Objec所以要向下转型 ①得到方法的时候需要类型 ②去调用方法的时候也需要传递同样类型的对象 Constructor…...

编程日记 2024/11/30 6:58:47

上海网站商城建设公司/广州seo网络推广员

1.打开cmd&#xff0c;并进入msyql安装目录 比如我们的安装目录是&#xff1a; C:\Program Files\MySQL\MySQL Server 5.7\bin如果不进入安装目录&#xff0c;执行会报找不到mysql命令 2. 在DOS命令窗口输入 mysql -hlocalhost -uroot -p回车 进入mysql数据库 在DOS命令窗口…...

编程日记 2024/11/29 23:46:44

神马网站快速排名案例/微信小程序开发详细步骤

1. 前向传播 &#xff08;1&#xff09;前向传播时&#xff0c;由数据读取层获取数据&#xff0c;经过逐层处理&#xff0c;带最后一层&#xff08;可能是损失层或特征层&#xff09;得到输出。 &#xff08;2&#xff09;网络路径实际上是一个有向无环图&#xff08;Directe…...

编程日记 2024/11/29 22:08:52

广州做网站哪家公司最好/软文案例大全

网站开启HTTPS需要申请SSL证书&#xff0c;SSL证书分为三种类型&#xff0c;即域名型DVSSL证书、企业型OVSSL证书和增强型EVSSL证书&#xff0c;SSL证书大全来说说这几种SSL证书的区别及如何选择&#xff1a; 目录 域名型DVSSL证书 企业型OVSSL证书 增强型EVSSL证书 域名型DVSS…...

编程日记 2024/11/29 19:13:09