Go語言開發前後端不分離專案詳解

2022-11-15 14:01:13

正文

現在，前後端分離的概念深入人心，前端、後端應用從程式碼倉庫到釋出到執行，完全都是獨立的兩套系統，互不影響，帶來了良好的獨立性。然而，我覺得在某些條件下，前後端不分離，也不失為一種很好的解決方案，在軟體開發中，沒有什麼萬金油方案，都是要因地制宜。

一般一些中小系統，尤其是管理後臺，就比較適合前後端不分離的開發方式，或者是前端同學，意向學習 go 語言，通過這種前後端不分離的方式快速開發和學習；或者是後端同學，獨立開發包含前端的專案。

較於前後端分離，用 Go 語言開發前後端不分離的專案有如下優點：

前後端程式碼最後都打包到一個二進位制檔案，無論是做容器，還是單獨執行，都非常省事。
後端可以利用 go 的模板技術，在不深入學習前端知識的情況下，也能做出效果尚可的設計。
前端用 vue、react、甚至直接寫 jQuery 都行，對技術無限制。
靜態語言高效能，由於 go 直接編譯成機器碼，相較於 PHP、Java的 JSP這些也可以做前後端不分離技術的語言，效能會稍微好點。

接下來，以一個實際專案為例，介紹前後端不分離專案的開發過程：

Sail 後端使用 Gin 框架，前端使用 LayUI（基於 jQuery），用到了模板技術。

1. 專案結構

.
.
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── deploy
│   └── Dockerfile
├── go.mod
├── go.sum
├── internal
│   └── service
└── ui
    ├── static
    ├── template
    └── ui.go

前端程式碼都存在於 ui 資料夾，後端程式碼都存在於 internal 資料夾，其它檔案是一些容器打包命令之類。

2. 前端專案

在 ui 資料夾中，static 存著一些 js 庫、css 樣式、圖片之類，template 目錄下是 html 模板。這就是 Layui 所需的全部了。我對比過 vue、react 和 layui，最後還是覺得 layui 更適合後端程式設計師開發前端網頁，比較返璞歸真，HTML+CSS+JQuery網上的資料也很多，可以專注於開發邏輯，不至於陷入學習知識的漫長過程中。

如果使用 vue、react 等當然也可以，同樣是放在 ui 資料夾，無非是用一些打包工具比如 webpack、yarn 等打包成public或者dist，實際最後還是一些 js、html、css，然後把它們整合到 go 中。

3. 後端專案

後端專案與一個 gin 的標準範例框架沒什麼不同，前端來存取也是當成一個正常的介面存取，只是有一點不同的是，由於前後端不分離，前端存取介面無需帶域名（或者 ip），畢竟部署也是部署在一起的，直接存取 url 就行。

4. 結合在一起

關鍵是在前端專案根目錄中增加一個.go檔案，內部參照前端頁面：

package ui
import (
   "embed"
)
//go:embed template
var TemplateFs embed.FS
//go:embed static
var StaticFs embed.FS

利用 go1.16釋出的 embed 技術，我們在變數TemplateFS、StaticFS前面加上//go:embed註釋，後面跟著一個相對路徑（./可以省略，完整寫法是：./template），我們把ui/template、ui/static下的所有檔案都打包到TemplateFS、StaticFS，這個FS就是FileSystem的縮寫，底層是實現了一個記憶體檔案系統（唯讀），從程式角度看，似乎跟直接讀檔案沒什麼不同。但實際上我們知道，這些檔案已經無需在程序外準備，而是直接打包到二進位制檔案內了。

在 go 程式編譯時，編譯器監測到檔案內的 go:embed 註釋，則會讀取這些檔案，把它們標記好，在最後生成可執行檔案時，把檔案內容打到 embed.FS 中。所以這個技術不能支援太大的檔案，不然記憶體容量都可能不夠。

接下來，在後端 go 程式的程式碼，執行 gin 時基本上是這樣寫法：

engine := gin.New()
engine.Run(":8080")

如何把對前端路由的監聽插到 engine 中呢？實際上在 gin 的引擎蓋下，真正對系統 TCP 連線發起監聽的還是 go 本身的 http 包，gin 不過是做了層封裝。我們可以不執行Run，而是把 gin 作為一個HTTPHandler，程式碼如下：

// 後端路由
engine := gin.New()
// 前端路由
staticEngine := gin.New()
templateHTML, err := template.ParseFS(ui.TemplateFs, "template/**/**/*.html")
if err != nil {
   panic(err)
}
staticEngine.SetHTMLTemplate(templateHTML)
fads, err := fs.Sub(ui.StaticFs, "static")
if err != nil {
   panic(err)
}
staticEngine.StaticFS("/static", http.FS(fads))
// Route 
s.Route(c, engine)
s.RouteHTML(c, staticEngine)
// 通過一個 Server 執行，判斷應該走前端路由還是後端路由
server := &http.Server{
   Handler: http.HandlerFunc(func(writer http.ResponseWriter, request *http.Request) {
      // 如果 URL 以 /static 或 /ui 開頭，則走前端路由
      if strings.HasPrefix(request.URL.Path, "/static") ||
         strings.HasPrefix(request.URL.Path, "/ui") { //

Go語言開發前後端不分離專案詳解

目錄

正文

1. 專案結構

2. 前端專案

3. 後端專案

4. 結合在一起

熱門文章