介绍
为方便部署,在开发时,可以是前后端分离的,但进行部署的时候,在某些领域前后端分离部署显得多此一举,为了让部署变得简单,所以需要考虑是否可以将前端与后端在生产时直接生成为一个文件
所需工具
https://github.com/go-bindata/go-bindata
https://github.com/elazarl/go-bindata-assetfs
//主要执行这个命令,会生成可执行文件到GOPATH/bin下,最好将GOPATH/bin加载到环境变量中
go get -u github.com/elazarl/go-bindata-assetfs/...
静态文件
纯静态文件存放的位置
/assets/ui
├─assets │ └─ui │ └─favicon.ico │ └─index.html │ └─static │ └─css │ └─chunk-vendors.e7c7f1bd.css │ └─chunk-vendors.e7c7f1bd.css.gz │ └─index.ddf786eb.css │ └─fonts │ └─ionicons.99ac3308.woff │ └─ionicons.143146fa.woff2 │ └─ionicons.d535a25a.ttf │ └─img │ └─ionicons.a2c4a261.svg │ └─js │ └─chunk-vendors.e71bcf88.js │ └─chunk-vendors.e71bcf88.js.gz │ └─index.0cc53347.js │ └─index.0cc53347.js.gz
-o
生成的接口存放的位置-pkg
生成的接口包名go-bindata-assetfs -o=assets/assets.go -pkg=assets assets/ui/...
最终接口位置
/assets/assets.go
├─assets │ └─ui │ └─favicon.ico │ └─index.html │ └─static │ └─css │ └─chunk-vendors.e7c7f1bd.css │ └─chunk-vendors.e7c7f1bd.css.gz │ └─index.ddf786eb.css │ └─fonts │ └─ionicons.99ac3308.woff │ └─ionicons.143146fa.woff2 │ └─ionicons.d535a25a.ttf │ └─img │ └─ionicons.a2c4a261.svg │ └─js │ └─chunk-vendors.e71bcf88.js │ └─chunk-vendors.e71bcf88.js.gz │ └─index.0cc53347.js │ └─index.0cc53347.js.gz │ └─assets.go
数据准备好了,哪么就是进行使用
进行如下定义(文中是结合的Gin)
//静态文件路径 const staticPath =
assets/ui/
var ( css = assetfs.AssetFS{ Asset: assets.Asset, AssetDir: assets.AssetDir, AssetInfo: assets.AssetInfo, Prefix: staticPath + "static/css", Fallback: "index.html", } js = assetfs.AssetFS{ Asset: assets.Asset, AssetDir: assets.AssetDir, AssetInfo: assets.AssetInfo, Prefix: staticPath + "static/js", Fallback: "index.html", } fonts = assetfs.AssetFS{ Asset: assets.Asset, AssetDir: assets.AssetDir, AssetInfo: assets.AssetInfo, Prefix: staticPath + "static/fonts", Fallback: "index.html", } img = assetfs.AssetFS{ Asset: assets.Asset, AssetDir: assets.AssetDir, AssetInfo: assets.AssetInfo, Prefix: staticPath + "static/img", Fallback: "index.html", } fs = assetfs.AssetFS{ Asset: assets.Asset, AssetDir: assets.AssetDir, AssetInfo: assets.AssetInfo, Prefix: staticPath, Fallback: "index.html", } )
main
func main() { engine := gin.Default() // 加载静态文件 engine.StaticFS("/favicon.ico", &fs) engine.StaticFS("static/css", &css) engine.StaticFS("static/fonts", &fonts) engine.StaticFS("static/img", &img) engine.StaticFS("static/js", &js) engine.GET("/", func(context *gin.Context) { //设置响应状态 context.Writer.WriteHeader(http.StatusOK) //载入首页 indexHTML, _ := assets.Asset(staticPath + "index.html") context.Writer.Write(indexHTML) //响应HTML类型 context.Writer.Header().Add("Accept", "text/html") //显示刷新 context.Writer.Flush() }) ... }
如果您有更优雅的写法请留言,共同讨论,谢谢