4.Gin HTML 模板渲染

news2024/11/15 23:33:30

4.Gin HTML 模板渲染

Gin HTML 模板渲染

1. 全部模板放在一个目录里面的配置方法

创建用于渲染的模板html

a6dfe2357ab2b782d458478e280f196d.png


templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>index</h1>
    <h2>渲染的内容: {{.title}}</h2>
</body>
</html>

templates/goods.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>商品页面</h1>
    <h2>渲染的内容: {{.title}}</h2>
</body>
</html>
路由加载模板文件

f3cedf50b2a63d5effba9d69174390f7.png

// 加载模板文件
r.LoadHTMLGlob("templates/*")
渲染模板
// c.HTML 渲染模板
r.GET("/index", func(c *gin.Context) {
    c.HTML(http.StatusOK, "index.html", gin.H{"title": "前台首页"})
})
r.GET("/goods", func(c *gin.Context) {
    c.HTML(http.StatusOK, "goods.html", gin.H{"title": "商品页面"})
})
测试如下

访问 http://localhost:8000/index

4f1a1e64f7de5654549ab67c1d8014e3.png


访问 http://localhost:8000/goods

7d3864702b1713cd252df88279a15bc5.png


2. 模板放在不同目录里面的配置方法

Gin 框架中如果不同目录下面有同名模板的话, 我们需要使用下面方法加载模板

创建模板文件

注意:定义模板的时候需要通过 define 定义名称

templates/admin/index.html

0780e74e29137054d5656570cb494a11.png
1695819574799
{{ define "admin/index.html" }}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>index</h1>
    <h2>admin 渲染的内容: {{.title}}</h2>
    </body>
    </html>
{{end}}

templates/default/index.html

8c09fab9feee87b1b08653fba2f9a34e.png
1695819665405
{{ define "default/index.html" }}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>index</h1>
    <h2>default 渲染的内容: {{.title}}</h2>
    </body>
    </html>
{{ end }}
路由加载模板文件
8b0d00fcd6c4097d95b1cbe11d17a40f.png
1695819916477
// 加载模板文件
r.LoadHTMLGlob("templates/**/*")

**表示为文件夹路径, **/* 表示为所有文件夹下的所有文件

渲染模板
246116a647e239595ceb484d3615ae1f.png
1695819990290
// c.HTML 渲染模板
r.GET("default/index", func(c *gin.Context) {
    c.HTML(http.StatusOK, "default/index.html", gin.H{"title": "default前台首页"})
})
r.GET("admin/index", func(c *gin.Context) {
    c.HTML(http.StatusOK, "admin/index.html", gin.H{"title": "admin前台首页"})
})
r.GET("admin/goods", func(c *gin.Context) {
    c.HTML(http.StatusOK, "admin/goods.html", gin.H{"title": "商品页面"})
})
测试如下

访问 http://localhost:8000/default/index

51763b84d867cb93a4eb6f7684cb1269.png
1695820021336

访问 http://localhost:8000/admin/index

789aa541286bcf2e995d69bdd0d23da5.png
1695820038857

3. gin 模板基本语法

{{.}} 输出数据

模板语法都包含在{{和}}中间,其中{{.}}中的点表示当前对象。

当我们传入一个结构体对象时,我们可以根据.来访问结构体的对应字段。例如:

编写结构体、以及渲染模板
38d17217f54c0d8a4d467ee11fb0bd1e.png
1695820992727
package main

import (
    "fmt"
    "github.com/gin-gonic/gin"
    "net/http"
)

// 定义结构体
type UserInfo struct {
    Name   string
    Age    int
    Gender string
}

func main() {
    // 1.创建路由
    r := gin.Default()
    // 加载模板文件
    r.LoadHTMLGlob("templates/**/*")

    // 2.绑定路由规则,执行的函数
    // gin.Context,封装了request和response
    // c.HTML 渲染模板
    r.GET("default/index", func(c *gin.Context) {
       // 创建对象
       userInfo := UserInfo{
          Name:   "李白",
          Age:    30,
          Gender: "male",
       }
       // 渲染模板
       c.HTML(http.StatusOK, "default/index.html", gin.H{
          "title":    "default前台首页",
          "userInfo": userInfo,
       })
    })

    // 3.监听端口,默认在8080
    // 监听并在 0.0.0.0:8080 上启动服务
    // Run("里面不指定端口号默认为8080")
    r.Run(":8000")
}
编写模板,使用渲染的参数
3c86854d2b95c8a47dc0e450cfe1de6f.png
1695821060579
{{ define "default/index.html" }}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>index</h1>
    <h2>default 渲染的内容: {{.title}}</h2>

    <h3>渲染用户信息:{{.userInfo}}</h3>
    <span>{{.userInfo.Name}}</span><br>
    <span>{{.userInfo.Age}}</span><br>
    <span>{{.userInfo.Gender}}</span><br>
    </body>
    </html>
{{ end }}
测试如下:

访问 http://localhost:8000/default/index

e93cb09ead4359b0c9102e37d9a389db.png
1695821107785
模板的注释
b23b3d356a64e241dd2a8e5123cd3268.png
1695821176846
{{/* 模板的注释  */}}

注释,执行时会忽略。可以多行。注释不能嵌套,并且必须紧贴分界符始止。

变量

我们还可以在模板中声明变量,用来保存传入模板的数据或其他语句生成的结果。具体语法

如下:

f18d69d3ab6c81c6b10431d7183185bb.png
1695821326461
{{/* 保存传入模板的数据   */}}
<h4>{{$obj := .title}}</h4>
<h4>模板的变量title={{$obj}}</h4>

刷新页面,测试如下:

6953d86434681b3445fd744545e17d48.png
1695821384861
移除空格

有时候我们在使用模板语法的时候会不可避免的引入一下空格或者换行符,这样模板最终渲染出来的内容可能就和我们想的不一样,这个时候可以使用{{-语法去除模板内容左侧的所有空白符号, 使用-}}去除模板内容右侧的所空白符号。

例如:

f835bc7dd7ef199b35025076b1d6685a.png
1695821566124
{{-        .userInfo.Name     -}}

测试效果如下:

71eca416fa4e6cb1a47bdc9b652a1d40.png
1695821611978

注意:-要紧挨{{和}},同时与模板值之间需要使用空格分隔。

比较函数

布尔函数会将任何类型的零值视为假,其余视为真。

下面是定义为函数的二元比较运算的集合:

eq 如果 arg1 == arg2 则返回真

ne 如果 arg1 != arg2 则返回真

lt 如果 arg1 < arg2 则返回真

le 如果 arg1 <= arg2 则返回真

gt 如果 arg1 > arg2 则返回真

ge 如果 arg1 >= arg2 则返回真

示例如下:
b2a3f8393f4b8b9f6086c38eb0a67234.png
1695821869829
{{/*  比较函数  */}}
{{ if eq .score 60}}
    <h4>score=60分</h4>
{{end}}
测试如下:
d75cafdabaa5f137473ded4f652fd932.png
1695821900767
条件判断

Go 模板语法中的条件判断有以下几种:

{{if pipeline}} T1 {{end}}
{{if pipeline}} T1 {{else}} T0 {{end}}
{{if pipeline}} T1 {{else if pipeline}} T0 {{end}}
示例如下:
{{if gt .score 60}}
    及格
{{else}}
    不及格
{{end}}
{{if gt .score 90}}
    优秀
{{else if gt .score 60}}
    及格
{{else}}
    不及格
{{end}}
range

Go 的模板语法中使用 range 关键字进行遍历,有以下两种写法,其中 传递 的值必须是数组、切片、字典或者通道。

语法:

{{range $key,$value := .obj}}
 {{$value}}
{{end}}

如果 传递 的值其长度为 0,不会有任何输出

{{range $key,$value := .obj}}
 {{$value}}
{{else}}
 pipeline 的值其长度为 0
{{end}}

如果 pipeline 的值其长度为 0,则会执行 else 分支。

示例如下:

首先往模板传递一个数组:

31bb0ab16b1b6f6b064f3f7d178f880e.png
1695826297180
// c.HTML 渲染模板
r.GET("default/index", func(c *gin.Context) {
    // 创建对象
    userInfo := UserInfo{
       Name:   "李白",
       Age:    30,
       Gender: "male",
    }
    // 渲染模板
    c.HTML(http.StatusOK, "default/index.html", gin.H{
       "title":    "default前台首页",
       "userInfo": userInfo,
       "score":    60,
       "hobby":    []string{"吃饭", "睡觉", "写代码"},
    })
})

在模板使用 range 渲染 hobby 参数:

35d266ffa54a460d224d501733d3e1de.png
1695826334196
{{/* 使用 range 关键字进行遍历   */}}
<h4>hobby={{.hobby}}</h4>
<ul>
    {{range $key,$value := .hobby}}
        <li>{{$value}}</li>
    {{else}}
        <li>hobby 的值其长度为 0</li>
    {{end}}
</ul>
测试如下:
ee3c48618a1e87accddc909cf4bf56e7.png
1695826360165
With

以前要输出数据:

<h3>渲染用户信息:</h3>
<span>{{.userInfo.Name}}</span><br>
<span>{{.userInfo.Age}}</span><br>
<span>{{.userInfo.Gender}}</span><br>

现在要输出数据:

{{with .userInfo}}
    <h3>with用户信息</h3>
    <span>{{.Name}}</span><br>
    <span>{{.Age}}</span><br>
    <span>{{.Gender}}</span><br>
{{end}}

简单理解:相当于 var :=.user

预定义函数 (了解)

执行模板时,函数从两个函数字典中查找:首先是模板函数字典,然后是全局函数字典。一般不在模板内定义函数,而是使用 Funcs 方法添加函数到模板里。

预定义的全局函数如下:

  • and

    函数返回它的第一个 empty 参数或者最后一个参数;

    就是说"and x y"等价于"if x then y else x";所有参数都会执行;

  • or

    返回第一个非 empty 参数或者最后一个参数;

    亦即"or x y"等价于"if x then x else y";所有参数都会执行;

  • not

    返回它的单个参数的布尔值的否定

  • len

    返回它的参数的整数类型长度

  • index

    执行结果为第一个参数以剩下的参数为索引/键指向的值;

    如"index x 1 2 3"返回 x[1][2][3]的值;每个被索引的主体必须是数组、切片或者字典。

  • print

    即 fmt.Sprint

  • printf

    即 fmt.Sprintf

  • println

    即 fmt.Sprintln

  • html

    返回与其参数的文本表示形式等效的转义 HTML。

    这个函数在 html/template 中不可用。

  • urlquery

    以适合嵌入到网址查询中的形式返回其参数的文本表示的转义值。

    这个函数在 html/template 中不可用。

  • js

    返回与其参数的文本表示形式等效的转义 JavaScript。

  • call

    执行结果是调用第一个参数的返回值,该参数必须是函数类型,其余参数作为调用该函数的参数;

    如"call .X.Y 1 2"等价于 go 语言里的 dot.X.Y(1, 2);

    其中 Y 是函数类型的字段或者字典的值,或者其他类似情况;

    call 的第一个参数的执行结果必须是函数类型的值(和预定义函数如 print 明显不同);

    该函数类型值必须有 1 到 2 个返回值,如果有 2 个则后一个必须是 error 接口类型;

    如果有 2 个返回值的方法返回的 error 非 nil,模板执行会中断并返回给调用模板执行者该错误;

示例如下:
{{/* 预定义函数  */}}
<h4>title len: {{len .title}}</h4>
<h4>title hobby: {{len .hobby}}</h4>
<h4>index hobby 2: {{index .hobby 2}}</h4>

效果如下:

a9971b21bcd2c42b210a6102d670c79a.png
1695828064128
自定义模板函数

我们经常有需要将时间转换格式的情况,下面我们使用自定义模板函数来演示。

定义时间转换格式函数
02a090aebb8df6980e502b4709c7454b.png
1695828577887
// 定义时间格式转换的方法
func formatAsDate(t time.Time) string {
    year, month, day := t.Date()
    return fmt.Sprintf("%d/%02d/%02d", year, month, day)
}

func main() {
    // 1.创建路由
    r := gin.Default()
    //注册全局模板函数 注意顺序,注册模板函数需要在加载模板上面
    r.SetFuncMap(template.FuncMap{"formatDate": formatAsDate})
    // 加载模板文件
    r.LoadHTMLGlob("templates/**/*")
    
}
传递时间参数到模板
64be331f7abca71612432d90e2a3ee14.png
1695828631467
// c.HTML 渲染模板
r.GET("default/index", func(c *gin.Context) {
    // 创建对象
    userInfo := UserInfo{
       Name:   "李白",
       Age:    30,
       Gender: "male",
    }
    // 渲染模板
    c.HTML(http.StatusOK, "default/index.html", gin.H{
       "title":    "default前台首页",
       "userInfo": userInfo,
       "score":    60,
       "hobby":    []string{"吃饭", "睡觉", "写代码"},
       "now":      time.Now(),
    })
})
在模板使用自定义函数
8b135e08358500c62cf74ec3c38945a5.png
1695828664347
{{/* 自定义函数   */}}
<h4>自定义时间转换函数: </h4>
{{.now | formatDate}} <br>
或者
{{formatDate .now }} <br>
效果如下
5ba2cb131e354e3de3d41da6039c7acb.png
1695828686465
传递多个参数到自定义参数

在上面只传递了一个参数,如果需要传递多个参数,示例如下:

定义模板函数
9c990a715b5eb3a900ebef2178995b33.png
1695958515629
// 定义打印信息的方法
func printlnMsg(str1 string, str2 string) string {
    return fmt.Sprintf("%s.....%s", str1, str2)
}
//注册全局模板函数 注意顺序,注册模板函数需要在加载模板上面
r.SetFuncMap(template.FuncMap{
    "formatDate": formatAsDate,
    "printlnMsg": printlnMsg,
})
传递两个字符串到模板
29bf7972e360c9e6b47e5dd570eeedb0.png
1695959125016
在模板中使用自定义函数
d9894ff3db77857a010232241b3699e8.png
1695959192909
{{/* 传入多个函数到自定义函数 */}}
{{printlnMsg .str1 .str2}}
效果如下
1ee93200b27f66a95cb02b84ce0aa869.png
1695959223832
嵌套 template
新建 templates/public/page_head.html
0511dd8ad849a394c96d5facc8607f13.png
1695960430181
{{ define "public/page_head.html" }}
    <h1 style="background-color: black; color: aliceblue">这一个公共的标题, title={{.title}}</h1>
{{end}}
引入 template

分别在 admin/index.html  和 default/index.html 的顶部引入 page_head

d4344b1fcc61b3da216b4a59e68081e0.png
1695960580888
{{/*  引入template  */}}
{{template "public/page_head.html" .}}

1、引入的名字为 page_head.html 中定义的名字

2、引入的时候注意最后的点.,表示传入该页面的参数

测试效果

访问 http://localhost:8000/admin/index

705b9c45a169d39f686e97715716e953.png
1695960664016

访问 http://localhost:8000/default/index

f29d85e0acbbc2030989f7f4af9af972.png
1695960688670

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

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

相关文章

C# Onnx PP-HumanSeg 人像分割

目录 效果 模型信息 项目 代码 下载 效果 图片源自网络侵删 模型信息 Inputs ------------------------- name&#xff1a;x tensor&#xff1a;Float[1, 3, 192, 192] --------------------------------------------------------------- Outputs -------------------…

Qt TCP相关的一些整理:服务端常见操作 socket 通信 network

目录 前言&#xff1a; 1、相关的库和类 2、服务端常用API 核心代码呈上&#xff1a; 前言&#xff1a; 在Qt的服务端上&#xff0c;不单单会用到服务端本身的API&#xff0c;对连接上来的客户端&#xff0c;也需要进行数据交互&#xff0c;也要用到一些收发包相关的…

知识库文档处理

知识库文档处理 1 知识库设计2 文档加载2.1 PDF文档2.2 MD文档2.3 MP4视频 3 文档分割4 文档词向量化 本项目是一个个人知识库助手项目&#xff0c;旨在帮助用户根据个人知识库内容&#xff0c;回答用户问题。个人知识库应当能够支持各种类型的数据&#xff0c;支持用户便捷地导…

Go——二、变量和数据类型

Go 一、Go语言中的变量和常量1、Go语言中变量的声明2、如何定义变量方式1&#xff1a;方式2&#xff1a;带类型方式3&#xff1a;类型推导方式定义变量方式4&#xff1a;声明多个变量总结 3、如何定义常量4、Const常量结合iota的使用 二、Golang的数据类型1、概述2、整型2.1 类…

NGINX缓存详解之服务端缓存

服务端缓存 proxy cache属于服务端缓存,主要实现 nginx 服务器对客户端数据请求的快速响应。 nginx 服务器在接收到被代理服务器的响应数据之后,一方面将数据传递给客户端,另一方面根据proxy cache的配置将这些数据缓存到本地硬盘上。 当客户端再次访问相同的数据时,nginx…

数学几百年重大错误:将两异函数误为同一函数

黄小宁 因各实数都可是数轴上点的坐标所以数集A可形象化为数轴上的点集A&#xff0c;从而使x∈R变换为实数yxδ的几何意义可是&#xff1a;一维空间“管道”g内R轴上的质点x∈R(x是点的坐标)运动到新的位置yxδ还在管道g内&#xff08;设各点只作位置改变而没别的改变即变位前…

flutter iOS 视频mov格式转MP4格式

flutter iOS 视频mov格式转MP4格式 前言一、使用video_compress压缩视频总结 前言 今天在写项目的时候&#xff0c;突然发现iOS 里面的有些视频格式是mov的格式&#xff0c;这就导致在视频播放组件无法播放的问题&#xff0c;期间试过替换视频格式&#xff0c;但是又不想存储文…

opencv-简单图像处理

图像像素存储形式  对于只有黑白颜色的灰度图&#xff0c;为单通道&#xff0c;一个像素块对应矩阵中一个数字&#xff0c;数值为0到255, 其中0表示最暗&#xff08;黑色&#xff09; &#xff0c;255表示最亮&#xff08;白色&#xff09; 对于采用RGB模式的彩色图片&#…

力扣1038. 从二叉搜索树到更大和树(java,树的中序遍历解法)

Problem: 1038. 从二叉搜索树到更大和树 文章目录 题目描述思路解题方法复杂度Code 题目描述 给定一个二叉搜索树 root (BST)&#xff0c;请将它的每个节点的值替换成树中大于或者等于该节点值的所有节点值之和。 提醒一下&#xff0c; 二叉搜索树 满足下列约束条件&#xff…

时序预测 | Pytorch实现TCN-Transformer的时间序列预测

时序预测 | Pytorch实现TCN-Transformer的时间序列预测 目录 时序预测 | Pytorch实现TCN-Transformer的时间序列预测效果一览基本介绍程序设计 效果一览 基本介绍 基于TCN-Transformer模型的时间序列预测&#xff0c;可以用于做光伏发电功率预测&#xff0c;风速预测&#xff0…

python趣味编程-5分钟实现一个石头剪刀布游戏(含源码、步骤讲解)

Python 中的石头剪刀布代码是 使用Tkinter和图形用户界面(GUI)设计的。 Python 石头剪刀布游戏是使用Python 编程语言开发的简单桌面应用程序。 项目系统文件包含资源文件和Python脚本。游戏画面流畅,用户控制起来很容易。

第4章 向量、SIMD和GPU体系结构中的数据级并行

4.1 引言 有多少应用程序拥有大量的数据级并行DLP&#xff1f;SIMD分类Flyn被提出后5年。答案不仅包括科学运算中的矩阵运算&#xff0c;还包括面向多媒体的图像和声音处理以及机器学习算法。 由于SIMD可以执行多个数据操作&#xff0c;能效比MIMD要高&#xff0c;使得SIMD对…

局域网无法上网主机通过TinyProxy代理主机访问公网Internet

1.代理主机搭建: 系统:ubuntu 网卡:2个 运行于 VMWare上 第一个网卡用于NAT 第二个网卡用于私有网络 两个IP如下: 192.168.31.243为NAT可访问Internet 192.168.144.141属于私有网络,用于访问局域网 安装tinyproxy sudo apt install tinyproxy 查看服务状态

你知道Linux操作系统的前世今生吗?Linux系统又该如何搭建呢?

文章目录 前言1. Linux 是什么1.1 Unix & Linux 发展历程图1.2 Linux 的发展1.3 Linux 的发行版 2. Linux 环境搭建2.1 环境搭建方式2.2 使用云服务器 3. 使用终端软件连接到 Linux3.1 什么是终端软件3.2 下载安装 XShell3.3 使用 XShell 登陆主机 总结 前言 可能很多人都…

2022最新版-李宏毅机器学习深度学习课程-P49 GPT的野望

GPT→类似于Transformer Encoder 训练任务&#xff1a;Predict Next Token 使用MASK-attention&#xff0c;不断预测“下一个token”。 可以用GPT生成文章。 How to use GPT? 给出描述和例子 给出前半段&#xff0c;补上后半段 In-context Learning(no GD) 结果 目前看起…

Jenkins 下载安装

下载 Jenkins 选择Download LTS是稳定版本,尽量选择稳定版本,然后选择你的开发系统. 安装 Jenkins需要JAVA环境&#xff0c;所以安装JAVA环境 Java Jenkins支持17、21等几个版本的Java&#xff0c;OpenJDK JDK 21.0.1 GA Release 安装不要安装到C盘,这个后面会占较大的…

力扣 622.设计循环队列

目录 1.解题思路2.代码实现 1.解题思路 首先&#xff0c;该题是设计循环队列&#xff0c;因此我们有两种实现方法&#xff0c;即数组和链表&#xff0c;但具体考虑后&#xff0c;发现数组实现要更容易一些&#xff0c;因此使用数组实现&#xff0c;因此我们要给出头和尾变量&a…

构建智能医患沟通:陪诊小程序开发实战

在医疗科技的浪潮中&#xff0c;陪诊小程序的开发成为改善医患沟通的创新途径之一。本文将介绍如何使用Node.js和Express框架构建一个简单而强大的陪诊小程序&#xff0c;实现患者导诊和医生咨询功能。 1. 安装Node.js和Express 首先确保已安装Node.js&#xff0c;然后使用以…

TS类型全解

使用TypeScript开发的程序更安全&#xff0c;常见的错误都能检查出来。TS能让程序员事半功倍。而原因在于TS的“类型安全”&#xff08;借助类型避免程序做无效的事情&#xff09;。 图 运行程序的过程 但是TS不会直接编译成字节码&#xff0c;而是编译成JavaScript代码。TS编…

MIT_线性代数笔记:列空间和零空间

目录 前言子空间综述列空间 Column space零空间&#xff08;或化零空间&#xff09;Nullspaceb 值的影响 Other values of b 前言 本节继续研究子空间&#xff0c;特别是矩阵的列空间&#xff08;column space&#xff09;和零空间&#xff08;nullspace&#xff09;。 子空间…