Golang+Vue构建全功能Web应用

已于 2023-05-12 14:20:12 修改
阅读量1w 收藏 80
点赞数 15
分类专栏： Code 文章标签： vue.js golang 前后端 gin elementui
于 2022-01-24 14:47:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012986012/article/details/122667314
版权

最近疫情在家，空闲时间比较多，整理下之前写的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界面
    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下有效，其他平台请自行尝试

  1. 安装数据库postgres与redis，初始化库
make init
  1. 本地运行
make run

前端使用vite编译

cd web
npm i
npm run dev

更多见ReadMe

总结

本文总结了Weave的架构与特性，以及开发过程中遇到的一些问题，从零开始实现一个完整的前后端Web应用，其他功能后面会不断优化。

所有代码见，欢迎Star

qingwave
关注
  • 15
    点赞
  • 踩
  • 80
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
go-blog：Golang + gin + vue + MySQL博客
02-04
博客 地址： ： 我花了一些时间独自重构！ 主要： 文章发布和修改 物品回收站和回收 文章类别 文章标签 网站信息自由设置 文章支持减价 ★网站静态文件可以在local或CDN自由配置 ★您可以选择将图像同时上传到server或qiniu 。 自由添加好友链并管理好友链顺序 使用github的issue功能作为评论系统，该界面漂亮且方便其他用户留下消息和通知。 ★定期备份数据和静态资源 ★备份数据邮件发送到邮箱 技术要点： 主要代码是golang + vue + HTML + CSS + MySQL 后端代码是基于golang gin框架的自包含软件包。 后台代码基于vue的i
数据库课设：Golang+postgresql+Vue3
11-16
这个项目旨在让学生或开发者实践如何利用 Golang 作为后端编程语言，PostgreSQL 作为关系型数据库，以及 Vue.js 作为前端框架来构建一个完整的Web应用。以下是关于这些技术的详细知识点： 1. **PostgreSQL**： - *...
golang通用后台管理项目——Go+Vue通用后台管理项目实战
e891377的专栏
02-06 1624
vue前端vue+axios+element-ui+echarts+vue-router+vuex+vue-treeselect。go后端 gin+gorm+swagger+reids+jwt+base64Captcha+mysql+yaml。2、掌握jwt,日志,跨域,鉴权中间件的使用。5、掌握go语言开发前后端分离项目的能力。6、从0到1开发完整前后端分离项目的能力。3、掌握基于gorm的sql多表查询。1、掌握组件中业务逻辑抽离的方法。4、掌握gin-swag的应用。
Vue + Golang 项目实战（八）：权限菜单前端页面开发
YoooKnight的博客
03-15 448
vue创建前端页面需要先在router/index.js中配置好路由，再在views中进行页面开发，最后一步是要在api中添加后端交互接口即可。
go语言实战--基于Vue3+gin框架的实战Cetide网项目（讲解开发过程中的各种踩坑）
最新发布
2301_79969279的博客
06-08 1023
if err!= nil {panic(err)这里来解释一下吧，1.workDir, _ := os.Getwd()：获取当前工作目录，os.Getwd()返回当前进程的工作目录路径，下划线_忽略可能的错误。2.viper.SetConfigName("application")：设置配置文件的名称为application，不包括文件扩展名。3.viper.SetConfigType("yml")：设置配置文件的类型为yaml，意味着Viper将解析.yml或.yaml格式的配置文件。
不用Nginx，Golang如何部署Vue应用呢？
weixin_51507240的博客
04-08 1906
这个问题已经困扰了我将近一年了，去年刚开始学习golang的时候，就想过能不能通过golang的静态资源服务器来部署vue打包后的资源呢？
软件工程课程设计——技术栈【Go+Vue+PGSQL】的人事管理系统
Mr_BigG的博客
11-05 5707
一、项目架构介绍 项目技术栈：Go+Vue+PGSQL 开发工具：IDEA2021.1 后端开发语言：Go 前端框架：Vue3.0(集成ElementUI组件) 后端框架：Gin、Gorm 数据库：PostgreSQL13 1.1 Go语言 Go（又称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 开发的一种静态强类型、编译型语言。Go 语言语法与 C 相近，但功能上有：内存安全，GC（垃圾回收），结构形态及 CSP-style 并发计
基于Go语言Gin+Vue+ElementUI的前后端分离后台管理系统
weixin_50196917的博客
03-05 1400
是一款基于Golang、Gin、Xorm、Vue、ElementUI、MySQL等技术栈开发平台框架，拥有完善的(RBAC)权限架构和基础核心管理模块，为了缩短研发周期，系统框架集成了代码生成器，内置平台自定义研发的模板引擎，可以一键CRUD生成整个模块的全部代码，本框架为一站式系统框架开发平台，可以帮助开发者提升开发效率、降低研发成本，同时便于后期的系统维护升级。...
基于go语言+Vue的港口堆存费管理系统项目源码+数据库
07-04
这是一个基于Go语言后端开发和Vue.js前端框架构建的港口堆存费管理系统项目源码，包含数据库相关的全套资源。这个项目对于学习者来说，尤其适合那些正在进行期末课程设计、课程大作业或者毕业设计的学生，提供了丰富...
Gin+Vue前后端分离项目实战Gin项目代码.zip
10-21
Gin是一个基于Golang的轻量级Web框架，它提供了快速开发、高性能的特性，而Vue.js则是一个用于构建用户界面的渐进式框架，非常适合于构建单页应用程序（SPA）。下面将详细介绍这两个技术以及它们在项目中的应用。 *...
管理系统系列--一个简单直观的bug管理系统，go+vue.zip
02-26
Go语言（也称为Golang）是Google开发的一种静态类型的、编译型的、并发型且具有垃圾回收功能的编程语言，而Vue.js则是一种用于构建用户界面的渐进式JavaScript框架。以下是对这两个技术栈以及如何在bug管理系统的上...
基于golang的gin框架和vue3开发的博客系统 goblog .zip
01-03
【基于Golang的Gin框架和Vue3开发的博客系统】是现代Web开发中的一个典型应用，结合了后端的强大处理能力和前端的高效交互体验。本文将深入探讨这两个技术栈在构建博客系统“goblog”中的应用。 Golang的Gin框架是...
Golang+Vue2从零开始搭建K8S后台管理系统（1）——列表展现
kingu_crimson的博客
09-26 1084
该路由通过项目路径 '@/views/workloads/deploylist' 指向了一个组件，因此我们需要在 /src/views/workload 下新建文件 deploylist.vue；3.根据我们后端 api 的返回结果，需要将请求拿到的结果做一定处理，并将处理后的结果赋给 data 中的表单对象，并在 html 中选择返回结果中合适的成员变量插入对应的表列中。仿照内置的 template，我们需要在 index.js 中根据对应的格式建立一个用于存放我们工作负载的列表集合路径。
vue中go.js的使用教学（一）
Blue54的博客
02-21 1419
(如果报错：arg Argument starts with non-ascii dash, this is probably invalid: –save，请手动输入npm i gojs)npm i gojs。
Vue + Golang 项目实战（二）：前端部署
YoooKnight的博客
11-28 1399
开始清理一些不必要的代码，只留下一个菜单选项即可。
Go实战Gin+Vue+微服务打造秒杀商城第二课 gorm教程
fegus的博客
05-27 940
gorm介绍 一、什么是orm？ Object-Relationl Mapping，即对象关系映射，这里的Relationl指的是关系型数据库 它的作用是在关系型数据库和对象之间作一个映射，这样，我们在具体的操作数据库的时候，就不需要再去和复杂的SQL语句打交道，只要像平时操作对象一样操作它就可以了 。 二、gorm 1.Golang写的，GitHub上活跃度很高的orm库 2.特点： 全功能ORM（几乎） 关联（包含一个，包含多个，属于，多对多，多种包含） Callbacks（创建/保存/更新/删除/查
GitHub上拉取并运行一个go项目--go-admin（基于Gin + Vue + Element UI的前后端分离权限管理系统脚手架）
weixin_51261234的博客
05-08 5096
这个项目是基于Gin + Vue + Element UI的前后端分离权限管理系统脚手架（包含了：多租户的支持，基础用户管理功能，jwt鉴权，代码生成器，RBAC资源控制，表单构建，定时任务等）3分钟构建自己的中后台项目；文档：https://doc.go-admin.dev Demo： https://www.go-admin.dev Antd beta版本：https://preview.go-admin.dev。
Go模板后端渲染时vue单页面冲突处理
cf313995的博客
01-11 656
Go模板后端渲染时vue单页面冲突处理
Vue + Golang 项目实战（三）：后端部署
YoooKnight的博客
12-09 1074
go-zero是快速的web和rpc微服务框架，并且可以根据go-ctl和自定义的api文件一键生成代码。
golang+gin+websocket客户端和服务端
08-09
Golang中的Gin框架提供了一种简单而强大的方法来构建Web应用程序。与此同时，Golang标准库中的"net/http"包提供了构建WebSocket服务器和客户端的功能。 首先，我们来看一下如何使用Gin和WebSocket构建WebSocket服务器。首先，需要导入相关的包： ```go import ( "github.com/gin-gonic/gin" "github.com/gorilla/websocket" ) ``` 接下来，在Gin中创建一个WebSocket处理函数： ```go func WebSocketHandler(c *gin.Context) { upgrader := websocket.Upgrader{ ReadBufferSize: 1024, WriteBufferSize: 1024, } conn, err := upgrader.Upgrade(c.Writer, c.Request, nil) if err != nil { c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()}) return } for { messageType, message, err := conn.ReadMessage() if err != nil { c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()}) return } err = conn.WriteMessage(messageType, message) if err != nil { c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()}) return } } } ``` 上面的代码创建了一个基本的WebSocket处理函数。它使用WebSocket标准库中的Upgrader结构来处理升级连接并创建一个WebSocket连接。 然后，我们需要在Gin中设置路由来处理WebSocket请求： ```go router := gin.Default() router.GET("/ws", WebSocketHandler) ``` 以上代码将在根路径下创建一个WebSocket处理函数。 接下来，我们来看一下如何使用Golang和Gin构建WebSocket客户端。首先，我们需要导入所需的包： ```go import ( "github.com/gorilla/websocket" "net/http" ) ``` 然后，我们可以使用以下代码来创建一个WebSocket客户端： ```go func main() { c, _, err := websocket.DefaultDialer.Dial("ws://localhost:8080/ws", nil) if err != nil { log.Fatal("dial:", err) } defer c.Close() done := make(chan struct{}) go func() { defer close(done) for { _, message, err := c.ReadMessage() if err != nil { log.Println("read:", err) return } log.Printf("recv: %s", message) } }() ticker := time.NewTicker(time.Second) defer ticker.Stop() for { select { case <-done: return case <-ticker.C: err := c.WriteMessage(websocket.TextMessage, []byte("Hello, Server!")) if err != nil { log.Println("write:", err) return } } } } ``` 上面的代码创建了一个WebSocket客户端，它使用WebSocket标准库中的`DefaultDialer`结构来建立WebSocket连接。 以上就是使用Golang Gin和WebSocket构建WebSocket客户端和服务器的简单示例。这些代码可以帮助我们使用Gin和Golang的标准库来构建强大的Web应用程序，并处理WebSocket通信。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值