Gin框架操作指南03:HTML渲染

官方文档地址(中文):https://gin-gonic.com/zh-cn/docs/
注:本教程采用工作区机制,所以一个项目下载了Gin框架,其余项目就无需重复下载,想了解的读者可阅读第一节:Gin操作指南:开山篇。
本节演示HTML渲染,包括简单渲染,使用不同目录下名称相同的模板,自定义模板渲染器,自定义模板函数,注意多模板渲染官方没有直接介绍,只是给出了参考链接,自定义分隔符比较简单,有兴趣的读者可自行学习这些。在开始之前,我们需要在”01数据渲染“目录下打开命令行,执行如下命令来创建子目录:

mkdir HTML渲染

cd到该目录,创建4个目录:

mkdir demo01 demo02 demo03 demo04

目录

    • 一、简单渲染
    • 二、使用不同目录下名称相同的模板
    • 三、自定义模板渲染器
    • 四、自定义模板函数

一、简单渲染

cd到demo01,创建如下目录结构:

│  main.go
└─templatesindex.html

main.go:

package mainimport ("net/http""github.com/gin-gonic/gin"
)func main() {// 创建默认的 Gin 路由器router := gin.Default()// 使用 LoadHTMLGlob 加载 templates 目录下的所有 HTML 模板文件// 这里使用通配符 "*" 匹配所有文件router.LoadHTMLGlob("templates/*")// 另一种方式是使用 LoadHTMLFiles 加载具体的模板文件// 它可以单独列出需要加载的模板文件// router.LoadHTMLFiles("templates/template1.html", "templates/template2.html")// 定义一个 GET 路由,当用户访问 /index 时触发此处理函数router.GET("/index", func(c *gin.Context) {// 使用 c.HTML() 方法渲染 HTML 页面// 第一个参数 http.StatusOK 表示 HTTP 状态码 200,表示请求成功// 第二个参数是要渲染的模板文件名 "index.html"// 第三个参数是传递给模板的数据,通过 gin.H 创建键值对c.HTML(http.StatusOK, "index.html", gin.H{"title": "Main website", // 这里将传递一个名为 "title" 的数据,其值为 "Main website"})})// 启动 Gin 服务器,监听在 0.0.0.0:8080// 这会让服务器在本地 8080 端口上等待并响应请求router.Run(":8080")
}

注意:官方文档用的是.tmpl,但**.html和.tmpl的效果是一样的**,而且IDE对html提供代码高亮和补全,所以推荐用.html。

index.html:

<html>
<h1>{{ .title }} <!-- 这里是 Go 模板语法,表示将模板中传递的 "title" 数据渲染到此处 -->
</h1></html>

效果:
在这里插入图片描述

二、使用不同目录下名称相同的模板

cd到demo02,创建如下目录结构:

│  main.go
└─templates├─posts│      index.html└─usersindex.html

main.go:

package mainimport ("net/http""github.com/gin-gonic/gin"
)func main() {// 创建默认的 Gin 路由器router := gin.Default()// 使用 LoadHTMLGlob 加载 templates 目录下的所有 HTML 模板文件// 使用 "**/*" 通配符表示递归加载所有子目录下的模板文件router.LoadHTMLGlob("templates/**/*")// 定义一个 GET 路由,当用户访问 /posts/index 时触发此处理函数router.GET("/posts/index", func(c *gin.Context) {// 使用 c.HTML() 方法渲染 "posts/index.html" 模板// 第一个参数 http.StatusOK 表示 HTTP 状态码 200,表示请求成功// 第二个参数是要渲染的模板文件名 "posts/index.html"// 第三个参数是传递给模板的数据,通过 gin.H 创建键值对c.HTML(http.StatusOK, "posts/index.html", gin.H{"title": "Posts", // 这里将传递一个名为 "title" 的数据,其值为 "Posts"})})// 定义另一个 GET 路由,当用户访问 /users/index 时触发此处理函数router.GET("/users/index", func(c *gin.Context) {// 使用 c.HTML() 方法渲染 "users/index.html" 模板// 第一个参数 http.StatusOK 表示 HTTP 状态码 200,表示请求成功// 第二个参数是要渲染的模板文件名 "users/index.html"// 第三个参数是传递给模板的数据,通过 gin.H 创建键值对c.HTML(http.StatusOK, "users/index.html", gin.H{"title": "Users", // 这里将传递一个名为 "title" 的数据,其值为 "Users"})})// 启动 Gin 服务器,监听在 0.0.0.0:8080// 这会让服务器在本地 8080 端口上等待并响应请求router.Run(":8080")
}

posts/index.html

{{ define "posts/index.html" }} <!-- 定义一个名为 "posts/index.html" 的模板 -->
<html>
<h1>{{ .title }} <!-- 这里是 Go 模板语法,表示将模板中传递的 "title" 数据渲染到此处 -->
</h1>
<p>Using posts/index.html</p> <!-- 显示此页面的来源 --></html>
{{ end }} <!-- 结束模板定义 -->

users/index.html

{{ define "users/index.html" }} <!-- 定义一个名为 "users/index.html" 的模板 -->
<html>
<h1>{{ .title }} <!-- 这里是 Go 模板语法,表示将模板中传递的 "title" 数据渲染到此处 -->
</h1>
<p>Using users/index.html</p> <!-- 显示此页面的来源 --></html>
{{ end }} <!-- 结束模板定义 -->

效果只展示一个,另一个同理:
在这里插入图片描述

三、自定义模板渲染器

注意这里官方示例是不全的,请读者按本文的步骤实验。
cd到demo03,创建main.go,file1.html,file2.html,填充代码:
main.go

package mainimport ("html/template" // 导入 Go 的 html/template 包,用于处理 HTML 模板"net/http""github.com/gin-gonic/gin" // 导入 Gin 框架
)func main() {// 创建默认的 Gin 路由器router := gin.Default()// 使用 template.Must() 方法来解析指定的 HTML 模板文件html := template.Must(template.ParseFiles("file1.html", "file2.html"))// 设置 HTML 模板router.SetHTMLTemplate(html)// 定义路由以访问 file1.htmlrouter.GET("/file1", func(c *gin.Context) {c.HTML(http.StatusOK, "file1.html", nil)})// 定义路由以访问 file2.htmlrouter.GET("/file2", func(c *gin.Context) {c.HTML(http.StatusOK, "file2.html", nil)})// 启动 Gin 服务器,监听在 0.0.0.0:8080router.Run(":8080")
}

file1.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>File 1</title>
</head><body><h1>This is file 1</h1><p>Welcome to the first HTML file.</p>
</body></html>

file2.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>File 2</title>
</head><body><h1>This is file 2</h1><p>Welcome to the second HTML file.</p>
</body></html>

效果,另一个同理:
在这里插入图片描述

四、自定义模板函数

cd到demo04,创建main.go,raw.html,填充代码:

package mainimport ("fmt""html/template" // 引入 html/template 包用于模板渲染"net/http"      // 引入 net/http 包用于 HTTP 相关功能"time"          // 引入 time 包用于处理时间"github.com/gin-gonic/gin" // 引入 Gin 框架
)// formatAsDate 是一个自定义函数,接受一个 time.Time 类型的参数
// 返回格式化为 "年/月/日" 的字符串形式
func formatAsDate(t time.Time) string {// 获取年份、月份和日期year, month, day := t.Date()// 使用 fmt.Sprintf 格式化字符串,返回格式为 "YYYY/MM/DD"return fmt.Sprintf("%d/%02d/%02d", year, month, day)
}func main() {// 创建一个默认的 Gin 路由实例router := gin.Default()// 自定义模板的分隔符,改变默认的 {{ 和 }} 分隔符// 将其设置为 {[{ 和 }]},以避免与 JavaScript 的冲突router.Delims("{[{", "}]}")// 设置模板函数映射,允许在模板中使用自定义函数// 将 formatAsDate 函数添加到模板函数映射中router.SetFuncMap(template.FuncMap{"formatAsDate": formatAsDate, // 注册格式化函数})// 加载指定路径下的 HTML 模板文件// 在此示例中,加载的模板文件是 "raw.tmpl"router.LoadHTMLFiles("raw.html")// 定义处理 GET 请求的路由,访问 /raw 时触发该处理函数router.GET("/raw", func(c *gin.Context) {// 渲染 HTML 模板,并传递当前时间作为数据// map[string]interface{} 用于传递数据给模板c.HTML(http.StatusOK, "raw.html", map[string]interface{}{// 设置 "now" 字段为特定的时间(2017年7月1日)"now": time.Date(2017, 07, 01, 0, 0, 0, 0, time.UTC),})})// 启动 HTTP 服务器,监听在 8080 端口// 该服务器将在接收到请求时调用上面定义的路由router.Run(":8080")
}

raw.html

Date: {[{.now | formatAsDate}]}

效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/882185.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java游戏网站源码

题目&#xff1a;java游戏网站源码 编号B22A390 主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Mysql|大数据|SSM|SpringBoot|Vue|Jsp|MYSQL等)、学习资料、JAVA源码、技术咨询 文末联系获取 感兴趣可以先收藏起来&#xff0c;以防走丢&#xff0c;有任何选题、文档编…

什么是 BloomFilter

什么是 BloomFilter 布隆过滤器&#xff08;英语&#xff1a;Bloom Filter&#xff09;是 1970 年由布隆提出的。它实际上是一个很长的二进制向量和一系列随机映射函数。主要用于判断一个元素是否在一个集合中。 通常我们会遇到很多要判断一个元素是否在某个集合中的业务场景&a…

Cocos Creator导出obj文件用于后端寻路

Cocos Creator 3.8.0 用这个扩展插件 【杨宗宝】两年前写的网格工具&#xff0c;今天将它开源了。 - Creator 3.x - Cocos中文社区carlosyzy_extensions_mesh: Cocos Creator 3.x mesh插件&#xff0c;负责网格数据的导出。合并&#xff0c;拆封等一系列操作 (gitee.com) 下…

C++ 标准库:功能与应用解析

C++ 标准库:功能与应用解析 引言 C++ 是一种广泛使用的编程语言,以其高性能和灵活性而著称。C++ 标准库(C++ Standard Library)是 C++ 语言的核心组成部分,提供了一系列预定义的类和函数,用于简化编程任务。本文将深入探讨 C++ 标准库的主要功能和应用,帮助读者更好地…

Shell脚本备份文件

需求&#xff1a;原文件备份&#xff0c;新文件覆盖掉源文件 vue项目打包自动化部署使用 假设已经将打包后得文件复制到了需要覆盖得目录得同级下 #!/bin/bashdst_folder"/home/compose/nginx/html"# 创建备份文件夹 backup_folder"$dst_folder/backup"# …

分类任务中评估模型性能的核心指标

在机器学习尤其是分类任务中&#xff0c;Accuracy&#xff08;准确率&#xff09;、Precision&#xff08;精确率&#xff09;、Recall&#xff08;召回率&#xff09;和F1 Score&#xff08;F1分数&#xff09;是评估模型性能的四个核心指标。每个指标都有其独特的含义和用途&…

【艾思科蓝】Imagen:重塑图像生成领域的革命性突破

【连续七届已快稳ei检索】第八届电子信息技术与计算机工程国际学术会议&#xff08;EITCE 2024&#xff09;_艾思科蓝_学术一站式服务平台 更多学术会议请看 学术会议-学术交流征稿-学术会议在线-艾思科蓝 目录 引言 一、Imagen模型的技术原理 1. 模型概述 2. 工作流程 …

PHP-FPM和FastCGI

文章目录 前言一. FastCGI1.定义2.工作方式3.协议4.架构5.工作原理&#xff08;请求生命周期&#xff09; 二. PHP-FPM1.定义&#xff1a;2.特性3.进程管理模式4.工作流程 三.关系与应用四.配置示例五.性能优化六.配置选项七.常见问题及解决方案 前言 PHP-FPM 是基于 FastCGI …

排序基础方法

逆序&#xff08;inversion&#xff09; 一个序列中存在元素对&#xff0c;顺序与理想顺序相反 注意事项 算法的空间复杂度&#xff0c;即便graph本身要花费VE&#xff0c;但是DFS是V&#xff0c;只考虑自身要用的。 Selection Sort&#xff08;选择排序) 方法 不断选择最…

牛客编程初学者入门训练——BC53 判断是元音还是辅音

BC53 判断是元音还是辅音 描述 KiKi开始学习英文字母&#xff0c;BoBo老师告诉他&#xff0c;有五个字母A(a), E(e), I(i), O(o),U(u)称为元音&#xff0c;其他所有字母称为辅音&#xff0c;请帮他编写程序判断输入的字母是元音&#xff08;Vowel&#xff09;还是辅音&#x…

vue3+ElementPlus+Table+Fixed属性导致行背景颜色失效

1.修改表格偶数行多选框背景颜色&#xff08;静态&#xff09; :deep(.el-table__body-wrapper tr:nth-child(even) td.el-table-fixed-column--left) {background: #1d2745; } 2.修改表格偶数行背景颜色&#xff08;静态&#xff09; :deep(.el-table__body-wrapper tr:nth…

如何在算家云搭建Video-Infinity(视频生成)

一、模型介绍 Video-Infinity是一个先进的视频生成模型&#xff0c;使用多个 GPU 快速生成长视频&#xff0c;无需额外训练。它能够基于用户提供的文本或图片提示&#xff0c;创造出高质量、多样化的视频内容。 二、模型搭建流程 1.大模型 Video-Infinity 一键使用 基础环境…

Axure使用echarts详细教程

本次使用的axure版本为rp9,下面是效果图。 接下来是详细步骤 【步骤1】在axure上拖一个矩形进来&#xff0c;命名为myChart(这个根据实际情况来,和后面的代码对应就好) 【步骤2】 点击交互->选择加载时->选择打开链接->链接外部地址 点击fx这个符号 【步骤3】在弹…

【GIT】.cr、.gitattributes 、 .gitignore和.git各文件夹讲解介绍

在 Git 项目中&#xff0c;.cr、.gitattributes 和 .gitignore 文件分别用于不同的配置和管理功能。下面分别解释这些文件的作用和用途&#xff1a; 1. .gitignore 文件 作用&#xff1a; .gitignore 文件用于指定哪些文件或目录应该被 Git 忽略&#xff0c;不会被追踪或提交…

通过API进行Milvus实例配置

更新Milvus各个组件的配置参数。 调试 您可以在OpenAPI Explorer中直接运行该接口&#xff0c;免去您计算签名的困扰。运行成功后&#xff0c;OpenAPI Explorer可以自动生成SDK代码示例。 ​编辑调试 授权信息 下表是API对应的授权信息&#xff0c;可以在RAM权限策略语句的…

使用Typora撰写笔记常用命令

markdown的使用和说明 文章目录 markdown的使用和说明1.标题2.段落3.文字显示4.列表1.无序列表 &#xff08;**&#xff09; 空格2.有序列表3.任务列表 5.区块显示 1.标题 语法&#xff1a;#&#xff08;一级标题&#xff09; ##&#xff08;耳机标题&#xff09; 2.段落 sh…

LabVIEW提高开发效率技巧----减少UI更新频率

在LabVIEW开发中&#xff0c;图形化用户界面&#xff08;UI&#xff09;的更新频率对程序的响应速度有着显著影响。频繁的UI更新会占用大量资源&#xff0c;导致系统性能下降。本文将详细介绍如何通过减少UI更新频率来提升LabVIEW程序的运行效率&#xff0c;从多个角度进行分析…

Leetcode 判断子序列

通过双指针来判断字符串s是否是字符串t的子序列。 算法思想&#xff1a; 双指针法&#xff1a; 我们使用两个指针i和j分别遍历字符串s和t。初始时&#xff0c;i指向s的第一个字符&#xff0c;j指向t的第一个字符。 匹配字符&#xff1a; 每次比较s[i]和t[j]&#xff1a; 如果…

大模型撬动数据新质生产力,我们重新解构了智能BI

大模型撬动数据新质生产力&#xff0c; 我们重新解构了智能BI 作者 | 曾响铃 文 | 响铃说&#xff08;xiangling0815&#xff09; “超级人工智能将在‘几千天内’降临。” 最近&#xff0c;OpenAI 公司 CEO 山姆奥特曼在社交媒体罕见发表长文&#xff0c;预言了这一点。之前…

web前端-----html5----用户注册

以改图为例 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>用户注册</title> </hea…