Gin 框架：将模板、静态文件加载与路由配置写入 route.go 的实践
目录结构
project/
├── main.go // 应用程序入口
├── http/ // 路由逻辑
│ └── route.go // 路由配置
├── resources/ // 静态资源目录
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── app.js
│ ├── images/
│ └── logo.png
├── templates/ // HTML 模板目录
│ └── index.html1. main.go
main.go 是程序的入口，仅负责调用路由配置并启动服务。
package main
import (
"project/http" // 引入路由包
)
func main() {
// 配置并启动服务
http.StartServer()
}2. http/route.go
route.go 文件负责 Gin 引擎的初始化、模板加载、静态文件服务配置以及路由逻辑。
package http
import (
"github.com/gin-gonic/gin"
)
// StartServer 初始化路由并启动服务
func StartServer() {
// 创建 Gin 引擎
r := gin.Default()
// 加载模板文件
r.LoadHTMLGlob("templates/*.html")
// 提供静态文件服务
r.Static("/static", "./resources")
// 配置路由
SetupRoutes(r)
// 启动服务
r.Run(":8080") // 默认监听 8080 端口
}
// SetupRoutes 配置路由
func SetupRoutes(r *gin.Engine) {
// 首页路由
r.GET("/", func(c *gin.Context) {
c.HTML(200, "index.html", gin.H{
"title": "Gin 框架示例",
"content": "欢迎使用 Gin 框架！",
})
})
}3. 模板文件
templates/index.html
HTML 模板文件，包含动态数据占位符和静态资源链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ .title }}</title>
<link rel="stylesheet" href="/static/css/style.css">
<script src="/static/js/app.js" defer></script>
</head>
<body>
<h1>{{ .content }}</h1>
<img src="/static/images/logo.png" alt="Logo">
</body>
</html>4. 静态资源文件
resources/css/style.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
color: #333;
}resources/js/app.js
document.addEventListener("DOMContentLoaded", function () {
console.log("JavaScript 加载成功！");
});resources/images/logo.png
存放示例图片，路径为 resources/images/logo.png。
运行步骤
- 确保目录结构与上述内容一致。
在项目目录下执行以下命令：
go mod init project go mod tidy go run main.go- 打开浏览器访问
http://localhost:8080，页面应正常显示。
笔记要点
职责分离：
main.go专注于服务的启动逻辑，简单明了。http/route.go负责路由和引擎的配置。
模板加载：
- 使用
r.LoadHTMLGlob("templates/*.html")加载 HTML 模板文件。 - 模板文件支持动态占位符，通过
c.HTML渲染。
- 使用
静态文件服务：
- 使用
r.Static("/static", "./resources")提供静态文件访问。 静态文件通过
/static/路径访问，例如：/static/css/style.css/static/js/app.js/static/images/logo.png
- 使用
路由配置：
- 路由配置集中在
SetupRoutes函数，便于后期扩展和维护。
- 路由配置集中在
效果
访问
http://localhost:8080，将看到以下页面内容：- 标题显示为
Gin 框架示例。 - 主体内容显示为
欢迎使用 Gin 框架！。 - CSS 样式生效，背景颜色为灰色。
- 控制台显示
JavaScript 加载成功！。 - 图片
logo.png正常显示。
- 标题显示为
Gin 框架支持将结构体作为模板的数据来源
=====================
示例：使用结构体填充模板
定义结构体
定义一个结构体，用于存储需要传递给模板的数据。
type PageData struct {
Title string
Content string
}修改路由代码
在路由中实例化结构体，并将结构体实例作为模板数据传递。
r.GET("/", func(c *gin.Context) {
// 填充结构体数据
data := PageData{
Title: "Gin 框架示例",
Content: "欢迎使用 Gin 框架！",
}
// 使用结构体填充模板
c.HTML(200, "index.html", data)
})模板文件
模板文件无需修改，保持原样，使用占位符来绑定结构体中的字段。
templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ .Title }}</title>
</head>
<body>
<h1>{{ .Content }}</h1>
</body>
</html>运行结果
- 启动服务后访问
http://localhost:8080。 页面将显示以下内容：
- 标题：
Gin 框架示例 - 内容：
欢迎使用 Gin 框架！
- 标题：
注意事项
- 字段导出：
结构体中的字段名必须以大写字母开头（导出字段），否则模板无法访问。 - 多层嵌套：
如果需要传递复杂的数据，可以在结构体中嵌套其他结构体或切片。 - 灵活使用：
结构体适用于需要传递较多字段或复杂数据的场景，简化代码逻辑并提高可读性。
