Go語(yǔ)言gin框架中加載html/css/js等靜態(tài)資源問(wèn)題

更新時(shí)間：2026年06月23日 08:49:49 作者：龍門(mén)吹雪

這篇文章主要介紹了Go語(yǔ)言gin框架中加載html/css/js等靜態(tài)資源問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、gin 框架加載 Html 模板文件的方法

方式1：加載單個(gè)或多個(gè)html文件，需要指明具體文件名

r.LoadHTMLFiles("views/index.html")

方式2：加載目錄下的所有html文件。如果還有下級(jí)目錄，則為【文件名稱(chēng)/**/*】

r.LoadHTMLGlob("views/*")

二、設(shè)置靜態(tài)文件路由

html頁(yè)面中引用css/js等靜態(tài)文件，引用文件的相對(duì)路徑需要映射到工程的相應(yīng)目錄，Gin服務(wù)才能將這個(gè)文件提供給瀏覽器。

調(diào)用的Gin函數(shù)為：gin.Static

使用說(shuō)明：

html文件中的引用路徑為 href="/a/b/c/styles.css"（見(jiàn)html代碼），但在GO項(xiàng)目中 styles.css 文件位于根目錄下的 asset/css/styles.css（見(jiàn)工程目錄結(jié)構(gòu)）。

此時(shí)使用函數(shù)如下：

r.Static("/a/b/c", "asset/css")

意味著當(dāng)HTML頁(yè)面請(qǐng)求 /a/b/c/styles.css 時(shí)，Gin將會(huì)提供 asset/css/styles.css 文件。

注意：瀏覽器中獲取的css文件，仍然在 /a/b/c/ 目錄下（見(jiàn)效果圖中的標(biāo)注）

三、指定需要顯示的 HTML 頁(yè)面

方式1：通過(guò) gin.Context 的 HTML(code int, name string, obj any) 方法指定

r.GET("/", func(c *gin.Context) {
	c.HTML(200, "index.html", gin.H{})
})

方式2：通過(guò) Template 模板的 Execute(wr io.Writer, data any) 方法指定

r.GET("/", func(c *gin.Context) {
	t, err := template.ParseFiles("./views/index.html")
	if err != nil {
		panic(err)
	}
	t.Execute(c.Writer, "index")
})

四、完整代碼實(shí)現(xiàn)

工程目錄結(jié)構(gòu)：

go語(yǔ)言代碼：

package main
import "github.com/gin-gonic/gin"
func main() {
	r := gin.Default()
	//方式一： 加載單個(gè)或多個(gè)html文件，需要指明具體文件名
	// 假設(shè)HTML文件位于"views"目錄下
	//r.LoadHTMLFiles("views/index.html")
	//方式二： 加載 views 目錄下的所有html文件。如果還有下級(jí)目錄，則為 views/**/*
	r.LoadHTMLGlob("views/*")
	// 設(shè)置靜態(tài)文件路由   將 html 文件中的請(qǐng)求路徑【/asset】 映射到 【asset】目錄下
	r.Static("asset", "asset")
	// 將 html 文件中的請(qǐng)求路徑【/a/b/c】 映射到 【asset/css】目錄下
	r.Static("/a/b/c", "asset/css")
	// 設(shè)置路由以提供HTML頁(yè)面
	r.GET("/", func(c *gin.Context) {
		c.HTML(200, "index.html", gin.H{})
	})
	// 啟動(dòng)服務(wù)器
	r.Run(":8080")
}

html代碼：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>登錄頁(yè)面</title>  
    <link rel="stylesheet" href="/a/b/c/styles.css" rel="external nofollow" >  
</head>  
<body>  
    <div class="login-container">  
        <h2>登錄</h2>  
        <form id="loginForm">  
            <label for="username">用戶名:</label>  
            <input type="text" id="username" name="username" required>
            <label for="password">密碼:</label>  
            <input type="password" id="password" name="password" required>
            <input type="submit" value="登錄">  
        </form>  
    </div>  
    <script src="../asset/js/script.js"></script>  
</body>  
</html>

css代碼：

body {  
    font-family: Arial, sans-serif;  
    background-color: #f4f4f4;  
}  
.login-container {  
    width: 300px;  
    padding: 16px;  
    background-color: white;  
    border-radius: 5px;  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
}  
h2 {  
    text-align: center;  
}  
input[type=text], input[type=password] {  
    width: 100%;  
    padding: 12px 20px;  
    margin: 8px 0;  
    display: inline-block;  
    border: 1px solid #ccc;  
    box-sizing: border-box;  
}  
input[type=submit] {  
    width: 100%;  
    background-color: #4CAF50;  
    color: white;  
    padding: 14px 20px;  
    margin: 8px 0;  
    border: none;  
    border-radius: 4px;  
    cursor: pointer;  
}  
input[type=submit]:hover {  
    background-color: #45a049;  
}

js代碼：

document.getElementById('loginForm').addEventListener('submit', function(event) {  
    // 阻止表單默認(rèn)的提交行為  
    event.preventDefault();  
    // 獲取表單輸入的值  
    const username = document.getElementById('username').value;  
    const password = document.getElementById('password').value;  
    // 創(chuàng)建一個(gè)對(duì)象來(lái)存儲(chǔ)登錄信息  
    const loginData = {  
        username: username,  
        password: password  
    };  
    // 使用fetch API調(diào)用登錄接口  
    fetch('/user/login', {  
        method: 'POST', // 假設(shè)你的登錄接口使用POST方法  
        headers: {  
            'Content-Type': 'application/json'  
        },  
        body: JSON.stringify(loginData) // 將登錄信息轉(zhuǎn)換為JSON字符串并發(fā)送  
    })  
    .then(response => response.json()) // 解析響應(yīng)為JSON  
    .then(data => {  
        // 根據(jù)接口返回的數(shù)據(jù)處理登錄結(jié)果  
        if (data.success) {  
            console.log('登錄成功');  
            // 在這里你可以做一些登錄成功后的操作，比如跳轉(zhuǎn)到另一個(gè)頁(yè)面  
        } else {  
            console.log('登錄失敗');  
            // 在這里你可以顯示錯(cuò)誤消息給用戶  
        }  
    })  
    .catch(error => {  
        console.error('登錄時(shí)發(fā)生錯(cuò)誤:', error);  
        // 在這里你可以處理錯(cuò)誤情況，比如顯示一個(gè)通用的錯(cuò)誤消息給用戶  
    });  
});