Go语言中的gin框架学习模版渲染（三）

匠造一知识

已于 2023-06-13 01:57:42 修改

阅读量479

点赞数 1

分类专栏： gin框架文章标签： golang gin 学习

于 2023-06-13 01:32:48 首次发布

本文链接：https://blog.csdn.net/A_LWIEUI_Learn/article/details/131179397

版权

gin框架专栏收录该内容

18 篇文章 2 订阅

订阅专栏

在Gin框架中，可以使用多种模板引擎来渲染数据。本篇文章以使用HTML/HTML5作为模板语言的方式来进行介绍。

安装gin框架和模板引擎

首先需要安装Gin框架和HTML/HTML5模板引擎。可以使用以下命令来安装：

复制代码go get -u github.com/gin-gonic/gin
go get -u github.com/gin-gonic/gin/render

创建模板文件

在项目中创建一个templates文件夹，用于存放HTML模板文件。在该文件夹中，

目录结构，如上图所示：

创建一个templates/default/index.html文件，示例如下：

{{ define "default/index.html" }}
<!DOCTYPE html>
<html>
<head>
    <title>Welcome to my site</title>
</head>
<body>
    <h1>Welcome to my site</h1>
    <p>My name is {{.Name}}, and I am {{.Age}} years old.</p>
</body>
</html>

{{end}}

创建路由

在main.go文件中创建路由，使用Gin框架中的HTMLRender方法来渲染HTML模板文件。示例如下：

package main

import (
	"net/http"

	"github.com/gin-gonic/gin"
)

type Article2 struct {
	Title   string `json:"title"`
	Content string `json:"content"`
}

type Article struct {
	Title   string
	Content string
}

func main() {
	// 定义一个路由引擎
	r := gin.Default()

	// 加载 渲染模版

	// 当templates/目录下有多个层级目录当如何呢  我们可以在template/**/*这样的模式下 这里 【 /**/ 】代表了一层级目录结构，多层级可以加入多个 /**/**/* 当然最后肯定是单个*号结束的
	// 这里我们创建一个前端目录 default，以及 一个 后管目录 admin
	r.LoadHTMLGlob("*templates/**/*")


	// 创建 路由

	r.GET("/", func(ctx *gin.Context) {

		new := &Article{
			Title:   "admin/index",
			Content: "这是一个首页后台管理",
		}
		ctx.HTML(http.StatusOK, "default/index.html", gin.H{
			"title": "首页",
			"news":  new,
			"score": 100,
			"list":  []string{"吃饭", "睡觉", "写代码"}, // 数组
			"scoreList": []interface{}{
				&Article{
					Title:   "新闻一",
					Content: "新闻内容11111",
				},
				&Article{
					Title:   "新闻二",
					Content: "新闻内容2222",
				},
			},
		})

	})

	//启动服务
	r.Run(":8001")
}

在路由中，使用c.HTML方法来渲染HTML模板文件。其中，第一个参数是HTTP状态码；第二个参数是模板文件名；第三个参数是渲染数据，可以是一个map或struct。

运行程序

在终端中进入项目目录，使用以下命令来运行程序：

复制代码go run main.go

打开浏览器，访问http://localhost:8080/，即可看到模板文件中的内容已经成功渲染出来了。

gin模板的基本语法：

1.{{.}} 输出数据

常用的模版渲染肯定需要输出后端路由带出的数据源，所以，在前端静态页面也就是html页面使用{{ .Title }} 这样的方式输出数据；其中的点后面的参数变量名，是由服务端定义好的变量名称。

当然，有的人说，我也写了怎么没有渲染啊，怎么报错啊这类型的错误问题；可以参考我的写的问题集合，基本上新手，都是语法或者，写法有问题！！！

2.变量

这里的变量就是你想的那种，变量；先定义一个变量名字，承接你需要表达的复杂变量名称；类似于 var a := .new 这样的一个操作；

3. 移除空格

这个没有多少说的，很多框架都有类似的操作，只是gin框架的去掉空格是 {{- .new -}}

4.条件判断 if else

这里就是在判断时候写法不一样，本质上都是一样的使用，只是使用了eq、ne、lt 、le、gt 、ge 等代表了【== \!= \<\<= \>\>= 】;这里有一个要注意⚠️的一个就是布尔值判断时候零值返回false假，其余的值都是true真。

<P>if else 判断语句 end 值：{{.score}} </P>
    {{if gt .score 90}}
    <h2>优秀</h2>
    {{else if gt .score 60}}
    <h3>及格</h3>
    {{else }}
    <p>差</p>
    {{end}}

5. 循环遍历

这里循环可以理解为javascript的for循环标签一样，只是go语言中使用 {{range $key, $value := .list}}遍历条件{{end}}

同时这个也可以和判断条件一起使用；具体表现形式可以参考一下代码：

  <p>加上条件判断</p>
    <ul>
        {{range $key, $value := .testList}}
        <li>{{ $key }} ---{{ $value}}</li>
        {{else}}
            <li> 数组没有数据</li>
        {{end}}
    </ul>
    <br>
    <hr>

6. with 解构数据

with 结构结构体数据可以理解 es6的语法糖 ...arr 这个类型的解构；当然，也不是说让你生搬硬套，就是理解这个 with 如何解构变量的（结构体-切片）；

具体的就看代码吧；

   <h2>with 解构 结构体</h2>
    <P>{{.news.Title}}</P>
    <P>{{.news.Content}}</P>
    <p>当然可以有另外一种取值简单方法：</p>

    {{with .news}} 
解构 结构体使用with后变得很简单只要使用 . 这个符号代表它的长变量名称达到减少代码的编写和可阅读性；
    <P>{{.Title}}</P>
    <P>{{.Content}}</P>
{{end}}
    <br>
    <hr>

{{with .news}}…… {{end}} 中解构结构体使用with后变得很简单只要使用 . 这个符号代表它的长变量名称达到减少代码的编写和可阅读性

在Gin框架中，有一些预定义函数可以在模板文件中直接使用，这些函数可以帮助我们更方便地处理模板数据。

len函数

len函数用于返回一个字符串、数组、切片、字典或通道中元素的个数。在模板文件中，可以使用"{{ len .Data }}"语句来调用len函数。

<!DOCTYPE html>
<html>
<head>
    <title>Len Example</title>
</head>
<body>
    <p>There are {{ len .Data }} items in the array.</p>
</body>
</html>

在模板文件中，我们使用"{{ len .Data }}"语句来调用len函数，统计数组中元素的个数，并将结果输出到模板文件中。

2. range函数

range函数用于遍历一个字符串、数组、切片、字典或通道中的所有元素，并将每个元素的值和索引传递给模板文件。在模板文件中，可以使用"{{ range .Data }}"和"{{ end }}"语句来调用range函数，并使用"{{ . }}"语句来访问元素的值和索引。

在模板文件中，我们使用"{{ range $index,$value := .Data }}"和"{{ end }}"语句来调用range函数，并使用"{{ index }}"和"{{ value }}"语句来访问元素的值和索引。

3. url函数

url函数用于生成一个URL，可以将路由和参数传递给它，它会返回一个完整的URL字符串。在模板文件中，可以使用"{{ url "route" }}"和"{{ url "route" arg1 arg2 … }}"语句来调用url函数。

例如，在以下示例中，我们使用url函数生成了一个URL，并将其输出到模板文件中：

package main

import (
    "github.com/gin-gonic/gin"
)

func main() {
    router := gin.Default()

    // 路由
    router.GET("/", func(c *gin.Context) {
        c.HTML(200, "index.html", gin.H{})
    })

    // 启动HTTP服务
    router.Run(":8080")
}

<!DOCTYPE html>
<html>
<head>
    <title>URL Example</title>
</head>
<body>
    <a href="{{ url "search" }}">Search</a>
    <a href="{{ url "user" "123" }}">User 123</a>
</body>
</html>

在模板文件中，我们使用"{{ url "route" }}"和"{{ url "route" arg1 arg2 … }}"语句来调用url函数，生成一个URL，并将其输出到模板文件中。

以上就是Gin框架中的一些预定义函数。在实际开发中，我们可以根据需要自定义函数，并通过render.SetFuncMap方法来注册。

以上就是使用Gin框架进行模板渲染的基本步骤。通过学习这些基础知识，可以进一步学习如何使用模板继承、模板函数等高级功能来满足更多实际需求。

希望这能够帮到你，可以给博主点个赞！！！

匠造一知识

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
Go语言中的gin框架学习模版渲染（三）

在路由中，使用c.HTML方法来渲染HTML模板文件。通过学习这些基础知识，可以进一步学习如何使用模板继承、模板函数等高级功能来满足更多实际需求。在项目中创建一个templates文件夹，用于存放HTML模板文件。在Gin框架中，可以使用多种模板引擎来渲染数据。在main.go文件中创建路由，使用Gin框架中的HTMLRender方法来渲染HTML模板文件。打开浏览器，访问http://localhost:8080/，即可看到模板文件中的内容已经成功渲染出来了。
复制链接

扫一扫