乔克视界

主题

乔克2025-07-202025-07-23专栏GolangGin框架
452
2.5m
Get...

数据渲染 ​

字符串类型 ​

后端：

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

前端：

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

结构体类型 ​

后端：

go
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)
}

前端：

html
<!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>

数组类型 ​

后端：

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

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

前端：

html
<!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>

结构体数组类型 ​

后端：

go
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)
}

前端：

html
<!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>

Map 类型 ​

后端：

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

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

前端：

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

Map 数组类型 ​

后端：

go
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)
}

前端：

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

Map 结构体类型 ​

后端：

go
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)
}

前端：

html
<!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>
最近更新