网站素材网站建设的目标和需求
在 Web 开发中，除了提供 API 接口外，往往还需要对外提供静态资源服务，比如：
- • CSS 样式文件
- • JavaScript 脚本
- • 图片、字体等静态资源
Go 的 net/http 包和 Gin 框架都提供了方便的方式来托管这些静态文件。
本篇我们将用 Gin 框架 演示如何快速构建一个静态资源服务。
一、功能目标
- 1. 使用 Gin 提供一个静态资源目录，让用户能直接访问 CSS、JS、图片。
- 2. 演示 HTML 页面引入这些静态资源。
- 3. 支持前端直接访问
/static/...路径获取文件。
二、项目结构
假设我们的项目目录结构如下：
project/
│── main.go
│── static/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── app.js
│ └── images/
│ └── logo.png
└── templates/└── index.html三、代码实现
package mainimport ("github.com/gin-gonic/gin""net/http"
)func main() {r := gin.Default()// 1. 加载模板r.LoadHTMLGlob("templates/*")// 2. 提供静态文件服务// /static 对应项目下的 static 目录r.Static("/static", "./static")// 3. 首页路由r.GET("/", func(c *gin.Context) {c.HTML(http.StatusOK, "index.html", nil)})// 启动服务器r.Run(":8080")
}四、HTML 模板示例
templates/index.html：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>静态资源示例</title><!-- 引入 CSS --><link rel="stylesheet" href="/static/css/style.css">
</head>
<body><h1>欢迎来到 Go 静态资源服务示例</h1><!-- 引入图片 --><img src="/static/images/logo.png" alt="Logo" width="150"><!-- 引入 JS --><script src="/static/js/app.js"></script>
</body>
</html>五、静态资源示例
static/css/style.css：
body {background-color: #f5f5f5;font-family: Arial, sans-serif;text-align: center;
}
h1 {color: #333;
}static/js/app.js：
document.addEventListener("DOMContentLoaded", function() {console.log("JavaScript 已加载");
});六、运行与访问
运行服务：
go run main.go在浏览器访问：
http://localhost:8080/你会看到页面正常加载了 CSS 样式、图片和 JavaScript 脚本。
静态资源也可以直接访问：
http://localhost:8080/static/images/logo.png
http://localhost:8080/static/css/style.css七、总结
- • Gin 提供
Static()方法一行就能完成静态文件托管。 - • 静态文件路径映射和 URL 前缀可以灵活配置。
- • 结合 HTML 模板，可以很方便地构建完整的前端页面服务。