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

go语言的成神之路-筑基篇-gin框架渲染模板

article 2024/12/2 14:35:47

第一节-gin框架渲染模板

因为电脑打不开了，所以用朋友的电脑来写的，也是体验了一次从零开始用vscode配置环境，忙活了一上午才配置好环境。太难配置了。好了废话不多说开始今天的进修之旅。

今天开始gin框架的正式学习希望大家认真观看并检查自己的每行代码，一点点错误对于一个程序来说都是致命的错误。

1.通过css对页面进行渲染

css中渲染背景色

此处圈到的地方都注意一下

加载静态资源文件

解析模板

上述是定义模板，在上节中说到了要三步走。

这里全都以users/index为例

渲染模板

此处内容部分不做重点讲解，主要是看页面背景的变化。

效果展示

可以看到页面的颜色发生了变化。默认的颜色是白色，现在颜色变成了css中的颜色，如果想要美化页面可以直接在css中进行渲染。

2.防止标签被转义

在go语言中标签会被自动转移，为了防止被自动转移我们需要进行相关操作防止被转义。

这里还是以users/index为例。

默认情况

这里不难看出这并不是我们想要实现的效果，我们需要自定义函数来进行手动的转移操作才行。、

自定义函数

注意这里的函数名，要与后面保持统一。

渲染模板

渲染函数这一部分与之前的相似，自是内容用script包裹住了。

应用自定义函数

这里对自定义函数做了一个应用，注意函数名要与上面定义的名字对应起来。

全部代码部分展示

由于软件原因，这里就不对mod、sum部分代码进行展示了，其余部分代码如下：

statics/index.css

body{
    background-color: #646060;
}

template/post/index.html

{{ define "post/index.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是post目录</h1>
    {{ . }}
</body>
</html>
{{ end }}

template/users/index.html

{{ define "users/index.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/xxx/index.css">
    <title>Document</title>
</head>
<body>
    <h1>这是users目录</h1>
    {{ .title | safe }}
    <a href="#">展示</a>
</body>
</html>
{{ end }}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gin框架模板渲染</title>
</head>
<body>
    {{ . }}
</body>
</html>

main.go

package main
import (
	"github.com/gin-gonic/gin"
	"html/template"
)
func main()  {
	r := gin.Default()

	// 静态资源
	r.Static("/xxx","./statics")

	// gin框架给模板自定义函数
	r.SetFuncMap(template.FuncMap{
		"safe":func(str string) template.HTML {
			return template.HTML(str)
		},
	})
	// 解析模板
	r.LoadHTMLFiles("template/index.html","template/post/index.html","template/users/index.html")

	r.GET("/post/index",func(c *gin.Context)  {

		// 渲染模板
		c.HTML(200,"post/index.html",gin.H{
			"title":"post",
		})
	})

	r.GET("/users/index",func(c *gin.Context)  {

		// 渲染模板
		c.HTML(200,"users/index.html",gin.H{
			"title":"<script>alert('111')</script>",
		})
	})

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

第二节-gin框架返回json

json数据的格式是用途较为广泛的一类格式，转为json格式的数据就显得尤为重要。

以下是两种方法来进行格式的转换。

方法一、使用map返回json格式数据

注：此处的map[string]interface可以用gin.H代替。

方法二、使用结构体返回json格式数据

代码展示

package main
import(
	"github.com/gin-gonic/gin"
)
func main()  {
	r:=gin.Default()

	// 方法一、使用map
	data:=map[string]interface{}{
		"name":"VON",
		"age":18,
		"message":"hello",
	}
	r.GET("/json_map",func(c *gin.Context){
		c.JSON(200,data)
	})
		
	// 方法二、使用结构体 灵活使用tag 可以自定义json的key 可以自定义json的格式
	type message struct{
		Name string `json:"name"`
		Age int `json:"age"`
		Message string `json:"message"`
	}
	r.GET("/json_struct",func(c *gin.Context){
		// 
		c.JSON(200,message{
			Name:"VON",
			Age:18,
			Message:"hello",
		})
	})

	r.Run(":1205")
}