AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 📝

在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。

2.embed介绍 🎯

Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的模式。下面简单介绍一下embed包的用法，后面出文章详细介绍。

2.1. 嵌入单个文件

package mainimport (_ "embed""fmt"
)//go:embed version.txt
var version string  // 自动推断为字符串类型func main() {fmt.Println("App Version:", version)
}

2.2. 嵌入二进制文件

//go:embed logo.png
var logoBytes []byte  // 适用于二进制文件func saveLogo() error {return os.WriteFile("logo_copy.png", logoBytes, 0644)
}

2.3. 嵌入文件集合

//go:embed templates/*.html
var templateFS embed.FS  // 文件系统接口func loadTemplates() {// 遍历嵌入的HTML模板dirEntries, _ := templateFS.ReadDir("templates")for _, entry := range dirEntries {if !entry.IsDir() {data, _ := templateFS.ReadFile("templates/" + entry.Name())fmt.Printf("Loaded template: %s (%d bytes)\n", entry.Name(), len(data))}}
}

3.embed改造 🛠️

3.1创建resources文件夹

在根目录下创建resources文件夹,然后创建static文件夹，用于存放前端文件。我们将resources整体作为文件系统嵌入，后续有其它需要嵌入的资源可以统一在resources处理。

resources和staic按自己喜好起，能区分即可。

需要运行npm build将dist文件夹内文件复制到static目录中

3.2 创建assets.go

创建assets.go,用于全局存储嵌入的资源文件

// assets/assets.gopackage assetsimport "embed"var Resources embed.FS

3.2 嵌入resources资源文件

修改main.go

// main.gopackage mainimport ("embed""github.com/ciclebyte/aibookmark/assets""github.com/ciclebyte/aibookmark/cmd"
)//go:embed resources
var resources embed.FSfunc main() {assets.Resources = resourcescmd.Execute()
}

• 需要引入embed包
• 将resources交由assets管理，否则后面使用容易出现循环引用。

3.2 修改gin前端资源处理方式

func NewServer(db *gorm.DB) *Server {server := &Server{db: db}router := gin.New()// 配置中间件router.Use(gin.Logger())router.Use(gin.Recovery())// 禁用重定向router.RedirectTrailingSlash = falserouter.RedirectFixedPath = falserouter.HandleMethodNotAllowed = true// 打印嵌入资源文件结构fmt.Println("=== 嵌入资源文件结构 ===")fs.WalkDir(assets.Resources, ".", func(path string, d fs.DirEntry, err error) error {if err != nil {fmt.Printf("访问路径 %s 时出错: %v\n", path, err)return err}if d.IsDir() {fmt.Printf("目录: %s\n", path)} else {fmt.Printf("文件: %s\n", path)}return nil})fmt.Println("=====================")// 配置CORSrouter.Use(func(c *gin.Context) {c.Writer.Header().Set("Access-Control-Allow-Origin", "*")c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, accept, origin, Cache-Control, X-Requested-With")c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS, GET, PUT, DELETE")if c.Request.Method == "OPTIONS" {c.AbortWithStatus(204)return}c.Next()})// 添加请求日志中间件router.Use(func(c *gin.Context) {// 开始时间start := time.Now()path := c.Request.URL.Pathmethod := c.Request.Method// 处理请求c.Next()// 结束时间end := time.Now()latency := end.Sub(start)// 获取状态码statusCode := c.Writer.Status()// 打印请求日志fmt.Printf("[%s] %s %s %d %v\n", method, path, c.ClientIP(), statusCode, latency)})staticFS, _ := fs.Sub(assets.Resources, "resources/static")fmt.Println("=== 静态资源文件结构 ===")fs.WalkDir(staticFS, ".", func(path string, d fs.DirEntry, err error) error {if err != nil {fmt.Printf("访问路径 %s 时出错: %v\n", path, err)return err}if d.IsDir() {fmt.Printf("目录: %s\n", path)} else {fmt.Printf("文件: %s\n", path)}return nil})fmt.Println("=====================")// 设置静态文件服务router.StaticFS("/assets", http.FS(staticFS))// 添加一个处理 favicon 的路由router.GET("/favicon.ico", func(c *gin.Context) {c.FileFromFS("/favicon.ico", http.FS(staticFS))})// 读取 index.html 内容indexContent, err := fs.ReadFile(staticFS, "index.html")if err != nil {fmt.Printf("读取 index.html 失败: %v\n", err)} else {fmt.Printf("成功读取 index.html，长度: %d\n", len(indexContent))}// 添加根路径处理router.GET("/", func(c *gin.Context) {fmt.Printf("处理根路径请求: %s\n", c.Request.URL.Path)fmt.Printf("请求头: %v\n", c.Request.Header)// 设置响应头c.Header("Content-Type", "text/html; charset=utf-8")c.Header("Cache-Control", "no-cache, no-store, must-revalidate")c.Header("Pragma", "no-cache")c.Header("Expires", "0")// 直接写入响应c.Writer.WriteHeader(200)c.Writer.Write(indexContent)})// API路由分组api := router.Group("/api"){category := api.Group("/categories"){category.POST("", server.createCategory)category.GET("", server.listCategories)category.GET("/all", server.getAllCategories)category.GET("/:id", server.getCategory)category.PUT("/:id", server.updateCategory)category.DELETE("/:id", server.deleteCategory)}bookmark := api.Group("/bookmarks"){bookmark.POST("", server.createBookmark)bookmark.GET("", server.listBookmarks)bookmark.GET("/:id", server.getBookmark)bookmark.PUT("/:id", server.updateBookmark)bookmark.DELETE("/:id", server.deleteBookmark)bookmark.POST("/ai", server.createAIBookmark)bookmark.POST("/import", server.importBookmarks)bookmark.POST("/export", server.exportBookmarks)}}// 添加Swagger路由router.GET("/swagger/*any", ginSwagger.WrapHandler(swaggerFiles.Handler))// SPA 前端路由兜底router.NoRoute(func(c *gin.Context) {// 只对 GET 请求兜底if c.Request.Method == "GET" {fmt.Printf("处理前端路由请求: %s\n", c.Request.URL.Path)// 检查是否是静态资源请求if strings.HasPrefix(c.Request.URL.Path, "/assets/") {// 获取文件扩展名ext := filepath.Ext(c.Request.URL.Path)contentType := "application/octet-stream"// 根据扩展名设置 Content-Typeswitch ext {case ".js":contentType = "application/javascript"case ".css":contentType = "text/css"case ".html":contentType = "text/html; charset=utf-8"case ".json":contentType = "application/json"case ".png":contentType = "image/png"case ".jpg", ".jpeg":contentType = "image/jpeg"case ".svg":contentType = "image/svg+xml"case ".ico":contentType = "image/x-icon"}c.Header("Content-Type", contentType)c.FileFromFS(c.Request.URL.Path[1:], http.FS(staticFS))return}// 其他请求返回 index.htmlc.Header("Content-Type", "text/html; charset=utf-8")c.Header("Cache-Control", "no-cache, no-store, must-revalidate")c.Header("Pragma", "no-cache")c.Header("Expires", "0")c.Writer.WriteHeader(200)c.Writer.Write(indexContent)} else {fmt.Printf("404 Not Found: %s %s\n", c.Request.Method, c.Request.URL.Path)c.Status(404)}})server.router = routerreturn server
}

4.启动

我们还是先启动后端服务

go run main.go serve

但是这次我们无需再启动前端服务，可以直接通过后端服务进行访问

---

往期系列

• Ai书签管理工具开发全记录（一）：项目总览与技术蓝图
• Ai书签管理工具开发全记录（二）：项目基础框架搭建
• AI书签管理工具开发全记录（三）：配置及数据系统设计
• AI书签管理工具开发全记录（四）：日志系统设计与实现
• AI书签管理工具开发全记录（五）：后端服务搭建与API实现
• AI书签管理工具开发全记录（六）：前端管理基础框框搭建 Vue3+Element Plus
• AI书签管理工具开发全记录（七）：页面编写与接口对接
• AI书签管理工具开发全记录（八）：Ai创建书签功能实现
• AI书签管理工具开发全记录（九）：用户端页面集成与展示
• AI书签管理工具开发全记录（十）：命令行中结合ai高效添加书签
• AI书签管理工具开发全记录（十一）：MCP集成
• AI书签管理工具开发全记录（十二）：MCP集成查询
• AI书签管理工具开发全记录（十三）：TUI基本框架搭建
• AI书签管理工具开发全记录（十四）：TUI基本界面完善
• AI书签管理工具开发全记录（十五）：TUI基本逻辑实现与数据展示
• AI书签管理工具开发全记录（十六）：Sun-Panel接口分析
• AI书签管理工具开发全记录（十七）：Sun-Panel书签同步实现
• AI书签管理工具开发全记录（十八）：书签导入导出