Gin框架系列之模板與靜態檔案

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

一、模板的使用

1、載入模板路徑

當使用gin.Default方法建立一個router後需要載入模板路徑，載入的方法可以使用：

LoadHTMLGlob 只有一個引數，萬用字元，如：router.LoadHTMLGlob("templates/*")，查詢當前專案路徑下template資料夾下所有的html檔案
LoadHTMLFiles 不定長引數，可以傳多個字串，如：router.LoadHTMLFiles("template/index.html","template/user.html")，指定所有要使用的html檔案路徑

推薦使用LoadHTMLGlob ，如果存在多級目錄可以這樣指定：

兩級：engine.LoadHTMLGlob("templates/**/*")
三級：engine.LoadHTMLGlob("templates/**/**/*")
...

2、掛載路由

router.GET("/index", Hello)

3、編寫檢視函式

func Hello(ctx *gin.Context)  {
    ctx.HTML(http.StatusOK, "home/index.html","hello home!")
}

在試圖函式中指定模板路徑以及渲染到前端的資料。

4、模板檔案編寫

在專案的template目錄下新建home目錄然後新建index.html檔案：

{{ define "home/index.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/index.css">
</head>
<body>
<div class="content">{{ . }}</div>
</body> 

</html>
{{ end }}

對於二級以及多級目錄需要在檔案開頭通過define指定檔案的路徑，否則程式識別不到。

5、啟動程式

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

    router.GET("/index", Hello)

    router.Run(":8080")
}

通過router.Run方法啟動，注意不要在IDE中啟動，通過cmd視窗的方式，否則模板找不到。

二、靜態檔案的使用

當使用html時，難免使用到css、js、images等，此時需要一種方式進行引入。

1、載入靜態檔案

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

    // 載入靜態檔案，注意第一個路徑引數對映第二個目錄引數，所以第一個引數可以隨意，但是在html中引入時需要與其保持一致
    router.Static("/static", "static")

    router.GET("/index", Hello)

    router.Run(":8080")
}

2、模板中引入

{{ define "home/index.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/index.css">
</head>
<body>
<div class="content">{{ . }}</div>
</body>
</html>
{{ end }}

三、專案說明

1、專案結構

demo01
    │  main.go
    │  README.md
    │
    ├─static
    │  ├─css
    │  │      index.css
    │  │
    │  ├─images
    │  └─js
    └─template
        ├─goods
        │      goods.html
        │
        ├─home
        │      index.html
        │
        └─order
                order.html

2、主要檔案說明

main.go

package main

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


func Hello(ctx *gin.Context)  {
    ctx.HTML(http.StatusOK, "home/index.html","hello home!")
}

func main()  {
    router := gin.Default()
    // 載入模板路徑 二級目錄
    router.LoadHTMLGlob("template/**/*")
    // 載入靜態檔案
    router.Static("/static", "static")

    router.GET("/index", Hello)

    router.Run(":8080")
}