快捷導(dǎo)航

Golang+Vue輕松構(gòu)建Web應(yīng)用的方法步驟

更新時(shí)間：2022年05月06日 08:33:53 作者：qingwave

本文主要介紹了Golang+Vue輕松構(gòu)建Web應(yīng)用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

介紹

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

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

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

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

Vue3開(kāi)發(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 # 容器庫(kù)
│   ├── controller # 控制器層，處理HTTP請(qǐng)求
│   ├── database # 數(shù)據(jù)庫(kù)初始化，封裝
│   ├── metrics # 監(jiān)控相關(guān)
│   ├── middleware # http中間件
│   ├── model # 模型層
│   ├── repository # 存儲(chǔ)層，數(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請(qǐng)求封裝
│   ├── components # Vue組件
│   ├── main.js
│   ├── router # 路由
│   ├── utils # 工具包
│   └── views # 所有頁(yè)面
└── vite.config.js # vite配置

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

為什么使用JWT

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

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

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

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

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

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

請(qǐng)求限流

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

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

從零開(kāi)發(fā)前端

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

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

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

運(yùn)行

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

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

make init

本地運(yùn)行

make run

前端使用vite編譯

cd web
npm i
npm run dev

更多見(jiàn)ReadMe

總結(jié)

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

項(xiàng)目鏈接見(jiàn)，歡迎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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: