字符串类型

后端：

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

前端：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <h1>{{.}}</h1>
  10. </body>
  11. </html>

结构体类型

后端：

  1. type User struct {
  2.     Id int
  3.     Name string
  4. }
  6. func Hello(ctx *gin.Context){
  7.     user := User{
  8.         Id: 1,
  9.         Name: "joker",
  10.     }
  11.     ctx.HTML(http.StatusOK,"index.html",user)
  12. }

前端：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <img src="/static/images/1.jpg">
  9. <h1>你好</h1>
  10. {{.Id}}
  11. {{.Name}}
  13. </body>
  14. </html>

数组类型

后端：

  1. func Hello(ctx *gin.Context){
  2.     var users = [2]string{
  3.         "joker",
  4.         "jack",
  5.     }
  7.     ctx.HTML(http.StatusOK,"index.html",users)
  8. }

前端：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. {{/*第一种循环方式*/}}
  9. {{ range . }}
  10.     {{.}}
  11. {{end}}
  12. <br>
  14. {{/*第二种循环方式*/}}
  15. {{range $i,$v := .}}
  16.     {{$i}}
  17.     {{$v}}
  18. {{end}}
  19. </body>
  20. </html>

结构体数组类型

后端：

  1. type User struct {
  2.     Id int
  3.     Name string
  4. }
  6. func Hello(ctx *gin.Context){
  7.     var users = [2]User{
  8.         {
  9.             Id: 1,
  10.             Name: "joker",
  11.         },
  12.         {
  13.             Id: 2,
  14.             Name: "jack",
  15.         },
  16.     }
  18.     ctx.HTML(http.StatusOK,"index.html",users)
  19. }

前端：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. {{/*第一种循环方式*/}}
  9. {{ range . }}
  10.     {{.Id}}<br>
  11.     {{.Name}}
  12.     <hr>
  13. {{end}}
  14. <br>
  16. {{/*第二种循环方式*/}}
  17. {{ range $i,$v := . }}
  18.     {{$v.Id}}<br>
  19.     {{$v.Name}}
  20.     <hr>
  21. {{end}}
  22. <br>  
  24. </body>
  25. </html>

Map类型

后端：

  1. func Hello(ctx *gin.Context){
  2.    var users =  map[string]string{
  3.            "name":"joker",
  4.            "age":"30",
  5.    }
  7.     ctx.HTML(http.StatusOK,"index.html",users)
  8. }

前端：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. {{.name}}
  9. {{.age}}
  10. <br>
  12. </body>
  13. </html>

Map数组类型

后端：

  1. func Hello(ctx *gin.Context){
  2.    var users = [2]map[string]string{
  3.        {
  4.            "name": "joker",
  5.            "age": "30",
  6.     },
  7.        {
  8.            "name": "jack",
  9.            "age": "40",
  10.     },
  11.    } 
  13.     ctx.HTML(http.StatusOK,"index.html",users)
  14. }

前端：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. {{range .}}
  9.     {{.name}}
  10.     {{.age}}
  11.     <br>
  12. {{end}}
  13. <br>
  15. </body>
  16. </html>

Map结构体类型

后端：

  1. type User struct {
  2.     Id int
  3.     Name string
  4. }
  6. func Hello(ctx *gin.Context){
  7.    var users = map[string]User{
  8.        "group1": {
  9.            Id: 1,
  10.            Name: "joker",
  11.     },
  12.     "group2": {
  13.            Id: 2,
  14.            Name: "jack",
  15.     },
  16.    }
  18.     ctx.HTML(http.StatusOK,"index.html",users)
  19. }

前端：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. {{.group1.Id}}
  9. {{.group1.Name}}
  11. <br>
  12. {{.group2.Id}}
  13. {{.group2.Name}}
  14. </body>
  15. </html>