Gin框架系列之資料型別渲染

阿新 • • 發佈：2022-04-09

一、結構體

1、後端

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

type User struct {
    Id int
    Name string
    Age int
}

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

func main() {
    router : 
= gin.Default()
    // 載入模板路徑
    router.LoadHTMLGlob("template/*")

    // 結構體渲染
    router.GET("/index", StructDemo)

    router.Run(":8080")
}

2、前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
< 
p>結構體渲染</p>
{{ .Id }}
{{ .Name }}
{{ .Age }}

</body>
</html>

其中的"."表示的就是上下文，就是後臺傳遞過來的物件，表示的就是結構體物件。

二、陣列渲染

1、後端

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

func ArrayDemo(ctx *gin.Context) {
    numArr := [5]int{1, 2, 3, 4, 5}
    ctx.HTML(http.StatusOK,  
"index1.html", numArr)
}

func main() {
    router := gin.Default()
    // 載入模板路徑
    router.LoadHTMLGlob("template/*")

    // 陣列渲染
    router.GET("/index1", ArrayDemo)

    router.Run(":8080")
}

2、前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>陣列渲染</div>
<p>方式一：</p>
{{range .}} <!-- 這裡的點表示的就是後端傳遞過來的上下文陣列 -->
{{.}} <!-- 這裡的點表示的就是每一個迴圈的資料值 -->
{{end}}
<p>方式2：</p>
{{range $i, $v := .}}
    {{$i}} - {{$v}} <br>
{{end}}
</body>
</html>

三、陣列結構體

1、後端

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

type User struct {
    Id   int
    Name string
    Age  int
}

func ArrStruDemo(ctx *gin.Context)  {
    arr_struct := [2]User{
        {
            Id:   1,
            Name: "lily",
            Age:  25,
        },
        {
            Id:   2,
            Name: "berry",
            Age:  15,
        },
    }
    ctx.HTML(http.StatusOK, "index2.html", arr_struct)
}

func main() {
    router := gin.Default()
    // 載入模板路徑
    router.LoadHTMLGlob("template/*")

    // 陣列結構體
    router.GET("/index2", ArrStruDemo)

    router.Run(":8080")
}

2、前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>陣列結構體渲染</div>
<p>方式一：</p>
{{range .}} <!-- 這裡的點表示的就是後端傳遞過來的上下文陣列 -->
{{.Id}}
{{.Name}}
{{.Age}} <!-- 這裡的點表示的就是每一個迴圈的結構體-->
{{end}}
<p>方式2：</p>
{{range $i, $v := .}}
    {{$v.Id}}
    {{$v.Name}}
    {{$v.Age}} <br>
{{end}}
</body>
</html>

四、map

1、後端

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

func MapDemo(ctx *gin.Context)  {
    data := map[string]string {
        "Name": "zhangsan",
        "Age": "15",
    }
    ctx.HTML(http.StatusOK, "index3.html", data)
}

func main() {
    router := gin.Default()
    // 載入模板路徑
    router.LoadHTMLGlob("template/*")

    // map
    router.GET("index3", MapDemo)

    router.Run(":8080")
}

2、前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>map渲染</div>
{{.Name}}
{{.Age}}
</body>
</html>

五、map結構體

1、後端

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

type User struct {
    Id   int
    Name string
    Age  int
}

func MapStruDemo(ctx *gin.Context) {
    data := map[string]User{
        "u1": {
            Id:   1,
            Name: "lily",
            Age:  25,
        },
        "u2": {
            Id:   2,
            Name: "berry",
            Age:  15,
        },
    }
    ctx.HTML(http.StatusOK, "index4.html", data)
}

func main() {
    router := gin.Default()
    // 載入模板路徑
    router.LoadHTMLGlob("template/*")

    // map結構體
    router.GET("/index4", MapStruDemo)

    router.Run(":8080")
}

2、前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>map結構體渲染</div>
{{.u1.Id}}
{{.u1.Name}}
{{.u1.Age}}
<br>
{{.u2.Id}}
{{.u2.Name}}
{{.u2.Age}}
</body>
</html>

六、切片

切片與陣列類似，動態陣列。

1、後端

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

type User struct {
    Id   int
    Name string
    Age  int
}

func SliceDemo(ctx *gin.Context) {
    numSlice := []int{1, 2} // 無需指定陣列的長度，動態陣列
    ctx.HTML(http.StatusOK, "index5.html", numSlice)
}

func main() {
    router := gin.Default()
    // 載入模板路徑
    router.LoadHTMLGlob("template/*")

    // 切片
    router.GET("/index5", SliceDemo)

    router.Run(":8080")
}

2、前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>切片渲染</div>
<p>方式一：</p>
{{range .}} <!-- 這裡的點表示的就是後端傳遞過來的上下文切片 -->
{{.}} <!-- 這裡的點表示的就是每一個迴圈的資料值 -->
{{end}}
<p>方式2：</p>
{{range $i, $v := .}}
    {{$i}} - {{$v}} <br>
{{end}}
</body>
</html>