发布于 

使用Gin框架时常用的HTML模板语法示例

一、主要涉及的项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
│  main.go
│  
└─part08
    │  
    ├─myfunc
    │      usr.go
    │      
    ├─static
    │          
    └─templates
        └─demo01
                hello.html
                hello2.html

二、主要文件内容

  1. hello.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
{{define "demo01/hello.html"}}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML模板</title>
        <!-- <script src="/s/js/jquery.min.js"></script> -->
    </head>
    <body>
        
        一、对符号的支持：<br>
        1.字符串：{{"abc123汉字"}}<br>
        2.原始字符串：{{`abc123汉字`}} 不会转义<br>
        3.字节类型：{{'a'}} 会转义<br>
        4.打印：<br>
            打印字符串{{print "abc你好"}}<br>
            nil类型{{print nil}}<br><br>
        二、变量<br>
        {{$name1 :="abc123汉字"}}<br>
        {{$name1}}<br><br>
        三、条件<br>
        当.condition为bool类型的时候，则为true表示执行，
        当.condition为string类型的时候，则非空表示执行。<br>
        {{if .flag}}
            TRUE<br>
            {{if $.nonedatastr}}
            后端有传入nonedatastr
            {{end}}
        {{else}}
            false
        {{end}}
        四、循环体<br>
        age:{{.age}}<br>
        {{/*使用循环体的range，
            可以遍历map和slice等*/}}
        arr:{{range .arr}}
            {{.}}
        {{end}}<br>
        {{/*使用索引和内容，
            “$”代表模板根级上下文，
            “$.可以用来在循环内部获取根级上下文”*/}}
        index_and_value:<br>
        {{range $i,$v := .arr}}
            {{$i}}:{{$v}},{{$.age}}<br>
        {{else}}
            range也支持else，当被遍历的长度为0是执行else<br>
        {{end}}<br>
        五、多个“.”与with关键字<br>
        1.多个“.”的使用<br>
            {{.stu.Name}},{{.stu.Age}}<br>
            <!--貌似子对象里的名字也会与其他和父对象并列的变量冲突-->
        2.With关键字<br>
            {{with .stu}}
                {{.Name}},{{.Age}}<br>
            {{else}}
                暂无stu的数据
            {{end}}
        六、内嵌另外的模板<br>
        {{template "demo01/hello2.html"}}
        <!--如果想要传递数据到内嵌的模板中，可以通过共享“.”进行传递-->
        {{template "demo01/hello2.html" .}}
        七、模板函数<br>
        1.printf分隔符用空格，不是逗号；其余参照fmt<br>
        {{printf "一个字符串：%s\n 一个整数：%d" "这是字符串" "19"}}<br>
        2.len求长度<br>
        arr长度为：{{len .arr}}<br>
        3.管道符号“|”<br>
        {{"this is a string"|printf "%s"}}<br>
        {{"this is a string"|len}}<br>
        4.括号提升优先级<br>
        {{printf "名字:%s,国家: %s" "LiHua" (printf "%s-%s" "Earth" "China")}}<br>
        5. and只要有一个为空，则整体为空;如果都不为空，则返回最后一个<br>
        {{and .age .nonedatastr}}<br>
        {{and .age .name}}<br>
        6. or 只要有一个不为空，则返回第一个不为空的;如果都是空，则返回空<br>
        {{or .age .nonedatastr}}<br>
        {{or .nonedatastr .age}}<br>
        {{or .xxx .nono}}<br>
        7. not用于判断返回布尔值，如果有值则返回false，没有值则返回true<br>
        {{not .nonedatastr}}<br>
        {{not .age}}<br>
        8. index读取指定类型对应下标的值(map, slice, array, string)<br>
        {{index "abcdefq" 2}}<br>
        {{index .arr 2}}<br>
        9.  eq:等于     equal，返回布尔值<br>
        10. ne:不等于    not equal，返回布尔值<br>
        11. lt:小于      less than，返回布尔值<br>
        12. le:小于等于  less equal，返回布尔值<br>
        13. gt:大于      greater than，返回布尔值<br>
        14. ge:大于等于   greater equal，返回布尔值<br>
        示例：{{ge 10 9}}<br>
        15. 关于时间日期<br>
        后端直接传入未处理的时间：{{.time}}<br>
        前端格式化时间日期：{{.time.Format "2006-01-02 15-04-05"}}<br>
        <!--这个参照的时间有点离谱，任意改变后可能时间显示非预期-->
        八、自定义模板函数<br>
        1.步骤一，先在后端定义一个函数<br>
        2.步骤二，调用SetFuncMap方法注册函数<br>
        3.步骤三，可以在HTML模板中使用函数
        {{add 123 741}}<br>
    </body>
</html>
{{end}}
  1. hello2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{{define "demo01/hello2.html"}}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>一个新的页面</title>
    </head>
    <body>
        <br>
        <font color="red">这是一个新的页面：</font>
        {{.}}
        <br>
    </body>
</html>
{{end}}
  1. main.go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package main

import (
	"GinLearning/part08/myfunc"
	"text/template"

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

func main() {
	r := gin.Default()
	r.SetFuncMap(template.FuncMap{ //注册可用于模板的函数
		"add": myfunc.Diyfunc,
	})
	r.LoadHTMLGlob("part08/templates/**/*")
	r.Static("/s", "part08/static")
	r.GET("/demo", myfunc.Hello08)
	r.POST("/postfile", myfunc.Hello08)
	r.Run(":8088")
}
  1. usr.go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
package myfunc

import (
	"time"

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

type student struct {
	Name string
	Age  int
}

func Hello08(c *gin.Context) {
	age := 19
	arr := []int{12, 23, 45}
	flag1 := true
	stu := student{
		Name: "小明",
		Age:  10,
	}
	now_time := time.Now()
	map_data := map[string]interface{}{
		"age":  age,
		"arr":  arr,
		"flag": flag1,
		"stu":  stu,
		"time": now_time,
	}
	c.HTML(200, "demo01/hello.html", map_data)
}

func Diyfunc(a, b int) int {
	return a + b
}
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。