Fork me on GitHub

Gin框架系列之数据类型渲染

一、结构体

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>

 

posted @ 2022-04-09 20:26  iveBoy  阅读(192)  评论(0)  编辑  收藏  举报
TOP