数据渲染

# 字符串类型

后端：

func Hello(ctx *gin.Context){
    name := "joker"
	ctx.HTML(http.StatusOK,"index.html",name)
}

1
2
3
4

前端：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <h1>{{.}}</h1>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10

# 结构体类型

后端：

type User struct {
	Id int
	Name string
}

func Hello(ctx *gin.Context){
	user := User{
		Id: 1,
		Name: "joker",
	}
	ctx.HTML(http.StatusOK,"index.html",user)
}

1
2
3
4
5
6
7
8
9
10
11
12

前端：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <img src="/static/images/1.jpg" />
    <h1>你好</h1>
    {{.Id}} {{.Name}}
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

# 数组类型

后端：

func Hello(ctx *gin.Context){
    var users = [2]string{
    	"joker",
    	"jack",
	}

	ctx.HTML(http.StatusOK,"index.html",users)
}

1
2
3
4
5
6
7
8

前端：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    {{/*第一种循环方式*/}} {{ range . }} {{.}} {{end}}
    <br />

    {{/*第二种循环方式*/}} {{range $i,$v := .}} {{$i}} {{$v}} {{end}}
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 结构体数组类型

后端：

type User struct {
	Id int
	Name string
}

func Hello(ctx *gin.Context){
    var users = [2]User{
    	{
    		Id: 1,
    		Name: "joker",
		},
		{
    		Id: 2,
    		Name: "jack",
		},
	}

	ctx.HTML(http.StatusOK,"index.html",users)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

前端：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    {{/*第一种循环方式*/}} {{ range . }} {{.Id}}<br />
    {{.Name}}
    <hr />
    {{end}}
    <br />

    {{/*第二种循环方式*/}} {{ range $i,$v := . }} {{$v.Id}}<br />
    {{$v.Name}}
    <hr />
    {{end}}
    <br />
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Map 类型

后端：

func Hello(ctx *gin.Context){
   var users =  map[string]string{
   		"name":"joker",
   		"age":"30",
   }

	ctx.HTML(http.StatusOK,"index.html",users)
}

1
2
3
4
5
6
7
8
9

前端：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    {{.name}} {{.age}}
    <br />
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11

# Map 数组类型

后端：

func Hello(ctx *gin.Context){
   var users = [2]map[string]string{
   	{
   		"name": "joker",
   		"age": "30",
	},
   	{
   		"name": "jack",
   		"age": "40",
	},
   }

	ctx.HTML(http.StatusOK,"index.html",users)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

前端：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    {{range .}} {{.name}} {{.age}}
    <br />
    {{end}}
    <br />
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

# Map 结构体类型

后端：

type User struct {
	Id int
	Name string
}

func Hello(ctx *gin.Context){
   var users = map[string]User{
   	"group1": {
   		Id: 1,
   		Name: "joker",
	},
	"group2": {
   		Id: 2,
   		Name: "jack",
	},
   }

	ctx.HTML(http.StatusOK,"index.html",users)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

前端：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    {{.group1.Id}} {{.group1.Name}}

    <br />
    {{.group2.Id}} {{.group2.Name}}
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

作者：乔克

本文链接：https://jokerbai.com

上次更新: 2025/07/19, 09:17:41

← 静态文件的使用 gin重定向→