最近疫情在家，空閑時間比較多，整理下之前寫的Golang項目Weave，補充了一些功能，加了前端實現(xiàn)。作為一個Web應(yīng)用模板，也算是功能比較齊全了，現(xiàn)將開發(fā)過程中遇到的一些問題、項目特性總結(jié)下。

介紹

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

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

• Restful API，通過gin實現(xiàn)，支持swagger
• MVC架構(gòu)
• 支持Postgres存儲，可以輕松替換為MySQL，使用gorm接入
• Redis緩存
• 基于JWT認證
• 服務(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界面

項目結(jié)構(gòu)

項目組織如下：

├── 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)實現(xiàn)，參考了社區(qū)一些最佳實踐，具體如下：

├── 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)

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

web
├── README.md
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── src # 所有代碼位于src
│   ├── App.vue # Vue項目入口
│   ├── assets # 靜態(tài)文件
│   ├── axios # http請求封裝
│   ├── components # Vue組件
│   ├── main.js
│   ├── router # 路由
│   ├── utils # 工具包
│   └── views # 所有頁面
└── vite.config.js # vite配置

一些細節(jié)

為什么使用JWT

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

當使用Websocket時，不支持HTTP Header，由于認證統(tǒng)一在中間件中進行，可以通過簡單通過cookie存儲，也可以單獨為Websocket配置認證。

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

緩存實現(xiàn)

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

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

請求限流

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

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

從零開發(fā)前端

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

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

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

運行

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

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

make init

• 本地運行

make run

前端使用vite編譯

cd web
npm i
npm run dev

更多見ReadMe

總結(jié)

本文總結(jié)了Weave的架構(gòu)與特性，以及開發(fā)過程中遇到的一些問題，從零開始實現(xiàn)一個完整的前后端Web應(yīng)用，其他功能后面會不斷優(yōu)化。

項目鏈接見，歡迎Star

• https://github.com/qingwave/weave

到此這篇關(guān)于Golang+Vue輕松構(gòu)建Web應(yīng)用的文章就介紹到這了,更多相關(guān)Golang+Vue輕松構(gòu)建Web應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論