Golang+Vue轻松构建Web应用的方法步骤
作者:qingwave 时间:2024-05-29 22:06:42
最近疫情在家,空闲时间比较多,整理下之前写的Golang项目Weave,补充了一些功能,加了前端实现。作为一个Web应用模板,也算是功能比较齐全了,现将开发过程中遇到的一些问题、项目特性总结下。
介绍
Weave是一个基于Go+Vue
实现的Web应用模板,支持前后端,拥有完整的认证、存储、Restful API等功能。
后端基于Golang开发,主要特性如下:
Restful API,通过
gin
实现,支持swagger
MVC架构
支持Postgres存储,可以轻松替换为MySQL,使用
gorm
接入Redis缓存
基于
JWT
认证服务优雅终止
请求限速
Docker容器管理,
Websocket
支持其他支持
Prometheus
监控、格式化日志、PProf
等
前端基于Vue
开发,使用ElementPlus
组件库
Vue3开发,使用组合式API
使用
vite
快速编译支持
WebShell
,基于xtermjs
图表功能,基于
echarts
支持
WindiCSS
,减少CSS编写
主要界面如下:
登录界面
Dashboard界面
应用界面
WebShell界面
项目结构
项目组织如下:
├── Dockerfile
├── Makefile
├── README.md
├── bin
├── config # server配置
├── docs # swagger 生成文件
├── document # 文档
├── go.mod
├── go.sum
├── main.go # server入口
├── pkg # server业务代码
├── scripts # 脚本
├── static # 静态文件
└── web # 前端目录
后端结构
后端按照MVC
架构实现,参考了社区一些最佳实践,具体如下:
├── pkg
│ ├── common # 通用包
│ ├── config # 配置相关
│ ├── container # 容器库
│ ├── controller # 控制器层,处理HTTP请求
│ ├── database # 数据库初始化,封装
│ ├── metrics # 监控相关
│ ├── middleware # http中间件
│ ├── model # 模型层
│ ├── repository # 存储层,数据持久化
│ ├── server # server入口,创建router
│ └── service # 逻辑层,处理业务
前端结构
前端实现Vue3
实现,与一般Vue项目类似
web
├── README.md
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
│ └── favicon.ico
├── src # 所有代码位于src
│ ├── App.vue # Vue项目入口
│ ├── assets # 静态文件
│ ├── axios # http请求封装
│ ├── components # Vue组件
│ ├── main.js
│ ├── router # 路由
│ ├── utils # 工具包
│ └── views # 所有页面
└── vite.config.js # vite配置
一些细节
为什么使用JWT
主要是为了方便服务横向扩展,如果基于Cookie+Session
,Session
只能保存在服务端,无法进行负载均衡。另外通过api访问,jwt可以放在HTTP Header的Bearer Token
中。
当使用Websocket时,不支持HTTP Header,由于认证统一在中间件中进行,可以通过简单通过cookie
存储,也可以单独为Websocket配置认证。
JWT不支持取消,可以通过在redis存入黑名单实现。
缓存实现
加入了缓存便引入了数据一致性问题,经典的解决办法是先写数据库再写缓存(Cache-Aside模式),实现最终一致性,业务简单的项目可以使用这种方法。
那先写缓存行不行?如果同时有一个写请求一读请求,写请求会先删除缓存,读请求缓慢未命中会将DB中的旧数据载入,可能会造成数据不一致。先写数据库则不会有这样的问题,如果要实现先写缓存,可以使用双删的办法,即写前后分别操作一次缓存,这样处理逻辑会更复杂。如果不想侵入业务代码,可以通过监听Binlog来异步更新缓存。
请求限流
限流使用了golang.org/x/time/rate
提供的令牌桶算法,以应对突发流量,可以对单个IP以及Server层面实现请求控制。
需要特别注意的是限流应当区别长连接与短连接,比如Weave
中实现了容器exec
接口,通过Websocket登录到容器,不应该影响其他正常请求。
从零开发前端
前端而言完全是毫无经验,选用了Vue3
,主要是文档比较全面适合新手。UI基于了ElementPlus
,目前还是Beta版本,使用过程了也遇到了一些Bug,生产过程中不建议用,无奈的是目前Vue3
好像也没有比较成熟的UI库。
Vue文档以及示例很详细,上手也挺快。主要是CCS不熟悉,调整样式上花了不少功夫,后来引入了WindiCSS, 只编写了少量的样式,其他全部依赖WindiCSS实现。其他路由、请求、图表参考对应的文档实现起来也很容易。
搭建了一个比较完整的管理平台,自己还是挺满意的,后面会不断优化,加一些其他特性。
运行
后端本地运行,需要依赖Docker,目前Makefile文件只在Linux下有效,其他平台请自行尝试
安装数据库postgres与redis,初始化库
make init
本地运行
make run
前端使用vite
编译
cd web
npm i
npm run dev
更多见ReadMe
https://github.com/qingwave/weave
来源:https://juejin.cn/post/7058155520372736014
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python2 与 python3 实现共存的方法
![](https://img.aspxhome.com/file/2023/3/59653_0s.png)
Python批量转换文件编码格式
简单介绍Python的轻便web框架Bottle
python常规方法实现数组的全排列
python3实现微型的web服务器
使用python+Flask实现日志在web网页实时更新显示
![](https://img.aspxhome.com/file/2023/6/104816_0s.jpg)
python判断一个对象是否可迭代的例子
JavaScript实现图片无缝滚动效果
![](https://img.aspxhome.com/file/2023/6/132876_0s.png)
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
![](https://img.aspxhome.com/file/2023/9/102999_0s.png)
Python自动化办公之定时发送邮件的实现
![](https://img.aspxhome.com/file/2023/2/65032_0s.jpg)
Sanic框架应用部署方法详解
使用Python操作MySQL的小技巧
在Python的Django框架中包装视图函数
PHP开发技巧之PHAR反序列化详解
![](https://img.aspxhome.com/file/2023/3/55633_0s.png)
python访问sqlserver示例
用户的期望以及背后真正的需求
关于 Flash Banner 设计的建议
python代理工具mitmproxy使用指南
![](https://img.aspxhome.com/file/2023/3/125013_0s.jpg)
Go语言在Linux环境下输出彩色字符的方法
![](https://img.aspxhome.com/file/2023/7/109757_0s.png)
uniapp中微信小程序与H5相互跳转以及传参详解(webview)
![](https://img.aspxhome.com/file/2023/9/136699_0s.png)