第Golang+Vue輕松構(gòu)建Web應(yīng)用的方法步驟目錄介紹項(xiàng)目結(jié)構(gòu)后端結(jié)構(gòu)前端結(jié)構(gòu)一些細(xì)節(jié)為什么使用JWT緩存實(shí)現(xiàn)請求限流從零開發(fā)前端運(yùn)行總結(jié)最近疫情在家，空閑時間比較多，整理下之前寫的Golang項(xiàng)目Weave，補(bǔ)充了一些功能，加了前端實(shí)現(xiàn)。作為一個Web應(yīng)用模板，也算是功能比較齊全了，現(xiàn)將開發(fā)過程中遇到的一些問題、項(xiàng)目特性總結(jié)下。

介紹

Weave是一個基于Go+Vue實(shí)現(xiàn)的Web應(yīng)用模板，支持前后端，擁有完整的認(rèn)證、存儲、RestfulAPI等功能。

后端基于Golang開發(fā)，主要特性如下：

RestfulAPI，通過gin實(shí)現(xiàn)，支持swaggerMVC架構(gòu)支持Postgres存儲，可以輕松替換為MySQL，使用gorm接入Redis緩存基于JWT認(rèn)證服務(wù)優(yōu)雅終止請求限速Docker容器管理，Websocket支持其他支持Prometheus監(jiān)控、格式化日志、PProf等

前端基于Vue開發(fā)，使用ElementPlus組件庫

Vue3開發(fā)，使用組合式API使用vite快速編譯支持WebShell，基于xtermjs圖表功能，基于echarts支持WindiCSS，減少CSS編寫

主要界面如下：

登錄界面

Dashboard界面

應(yīng)用界面

WebShell界面

項(xiàng)目結(jié)構(gòu)

項(xiàng)目組織如下：

├──Dockerfile

├──Makefile

├──README.md

├──bin

├──config#server配置

├──docs#swagger生成文件

├──document#文檔

├──go.mod

├──go.sum

├──main.go#server入口

├──pkg#server業(yè)務(wù)代碼

├──scripts#腳本

├──static#靜態(tài)文件

└──web#前端目錄

后端結(jié)構(gòu)

后端按照MVC架構(gòu)實(shí)現(xiàn)，參考了社區(qū)一些最佳實(shí)踐，具體如下：

├──pkg

│├──common#通用包

│├──config#配置相關(guān)

│├──container#容器庫

│├──controller#控制器層，處理HTTP請求

│├──database#數(shù)據(jù)庫初始化，封裝

│├──metrics#監(jiān)控相關(guān)

│├──middleware#http中間件

│├──model#模型層

│├──repository#存儲層，數(shù)據(jù)持久化

│├──server#server入口，創(chuàng)建router

│└──service#邏輯層，處理業(yè)務(wù)

前端結(jié)構(gòu)

前端實(shí)現(xiàn)Vue3實(shí)現(xiàn)，與一般Vue項(xiàng)目類似

web

├──README.md

├──index.html

├──node_modules

├──package-lock.json

├──package.json

├──public

│└──favicon.ico

├──src#所有代碼位于src

│├──App.vue#Vue項(xiàng)目入口

│├──assets#靜態(tài)文件

│├──axios#http請求封裝

│├──components#Vue組件

│├──main.js

│├──router#路由

│├──utils#工具包

│└──views#所有頁面

└──vite.config.js#vite配置

一些細(xì)節(jié)

為什么使用JWT

主要是為了方便服務(wù)橫向擴(kuò)展，如果基于Cookie+Session，Session只能保存在服務(wù)端，無法進(jìn)行負(fù)載均衡。另外通過api訪問，jwt可以放在HTTPHeader的BearerToken中。

當(dāng)使用Websocket時，不支持HTTPHeader，由于認(rèn)證統(tǒng)一在中間件中進(jìn)行，可以通過簡單通過cookie存儲，也可以單獨(dú)為Websocket配置認(rèn)證。

JWT不支持取消，可以通過在redis存入黑名單實(shí)現(xiàn)。

緩存實(shí)現(xiàn)

加入了緩存便引入了數(shù)據(jù)一致性問題，經(jīng)典的解決辦法是先寫數(shù)據(jù)庫再寫緩存（Cache-Aside模式），實(shí)現(xiàn)最終一致性，業(yè)務(wù)簡單的項(xiàng)目可以使用這種方法。

那先寫緩存行不行？如果同時有一個寫請求一讀請求，寫請求會先刪除緩存，讀請求緩慢未命中會將DB中的舊數(shù)據(jù)載入，可能會造成數(shù)據(jù)不一致。先寫數(shù)據(jù)庫則不會有這樣的問題，如果要實(shí)現(xiàn)先寫緩存，可以使用雙刪的辦法，即寫前后分別操作一次緩存，這樣處理邏輯會更復(fù)雜。如果不想侵入業(yè)務(wù)代碼，可以通過監(jiān)聽Binlog來異步更新緩存。

請求限流

限流使用了/x/time/rate提供的令牌桶算法，以應(yīng)對突發(fā)流量，可以對單個IP以及Server層面實(shí)現(xiàn)請求控制。

需要特別注意的是限流應(yīng)當(dāng)區(qū)別長連接與短連接，比如Weave中實(shí)現(xiàn)了容器exec接口，通過Websocket登錄到容器，不應(yīng)該影響其他正常請求。

從零開發(fā)前端

前端而言完全是毫無經(jīng)驗(yàn)，選用了Vue3，主要是文檔比較全面適合新手。UI基于了ElementPlus，目前還是Beta版本，使用過程了也遇到了一些Bug，生產(chǎn)過程中不建議用，無奈的是目前Vue3好像也沒有比較成熟的UI庫。

Vue文檔以及示例很詳細(xì)，上手也挺快。主要是CCS不熟悉，調(diào)整樣式上花了不少功夫，后來引入了WindiCSS,只編寫了少量的樣式，其他全部依賴WindiCSS實(shí)現(xiàn)。其他路由、請求、圖表參考對應(yīng)的文檔實(shí)現(xiàn)起來也很容易。

搭建了一個比較完整的管理平臺，自己還是挺滿意的，后面會不斷優(yōu)化，加一些其他特性。

運(yùn)行

后端本地運(yùn)行，需要依賴Docker，目前Makefile文件只在Linux下有效，其他平臺請自行嘗試

安裝數(shù)據(jù)庫postgres與redis，初始化庫

makeinit

makerun

前端使用vite編譯

cdweb

npm