Golang+Vue轻松构建Web应用的方法步骤

目录
  • 介绍
  • 项目结构
    • 后端结构
    • 前端结构
  • 一些细节
    • 为什么使用JWT
    • 缓存实现
    • 请求限流
    • 从零开发前端
  • 运行
  • 总结

最近疫情在家,空闲时间比较多,整理下之前写的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+SessionSession只能保存在服务端,无法进行负载均衡。另外通过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

总结

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

项目链接见,欢迎Star

到此这篇关于Golang+Vue轻松构建Web应用的文章就介绍到这了,更多相关Golang+Vue轻松构建Web应用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue webpack多页面构建的实例代码第1/3页

    项目示例地址: https://github.com/ccyinghua/webpack-multipage 项目运行: 下载项目之后 # 下载依赖 npm install # 运行 npm run dev http://localhost:3000/login.html http://localhost:3000/index.html 一.开发环境 node v6.11.0 二.安装vue-cli脚手架 npm install vue-cli@2.8.2 -g 三.初始化项目 vue init

  • webpack构建vue项目的详细教程(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入

  • 详解vue-cli快速构建vue应用并实现webpack打包

    Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释.Vue官方文档很全面的. Vue两大核心思想,组件化和数据驱动,组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用,数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可. 一.什么是vue-cli vue-cli是由

  • 详解vue-cli之webpack3构建全面提速优化

    前言 伴随着vue的全球化,已经各种vue的组件框架越来越完善,从早期的element-ui到vux,iview等越来越多高质量的项目,使用vue进行前端构建已然是一件工程化,模块化,敏捷化的事情 在这其中,相信很多人都会选择官方的vue-cli初始化工程模板,然后通过引入第三方组件框架和工具的方式进行开发构建,我个人也十分推崇这种做法.但是vue-cli初始化的项目模板毕竟是面向所有开发者的,在兼容性方面会有一定妥协.相信很多人都已经搜索过各类的webpack构建优化文章,但是很多不是版本太老

  • 用Webpack构建Vue项目的实践

    最近在内部项目中做了一些基于 vue + webpack 的尝试,在小范围和同事们探讨之后,还是蛮多同学认可和喜欢的,所以通过本篇文章分享给更多人 开始之前,需要安装node环境.(安装过程在此就不啰嗦了) 1.创建基本结构首先我们要创建一个空文件夹(我这里叫todos,你可以随便命名)作为项目的根目录.创建一个没有任何依赖关系的package.json,可以通过命令行 npm init 创建. 配置下基本信息即可.创建一个index.html文件,这个是显示在浏览器中的页面. 注意:1.这里的

  • 详解如何提高 webpack 构建 Vue 项目的速度

    前言 最近有人给我的 Vue2 后台管理系统解决方案提了 issue ,说执行 npm run build 构建项目的时候极其慢,然后就引起我的注意了.在项目中,引入了比较多的第三方库,导致项目大,而每次修改,都不会去修改到这些库,构建却都要再打包这些库,浪费了不少时间.所以,把这些不常变动的第三方库都提取出来,下次 build 的时候不再构建这些库,这样既可大大缩短构建时间.那么要怎么去实现呢? 解决方案 DllPlugin 和 DllReferencePlugin 查找了一下资料,发现我们可

  • 详解用webpack2.0构建vue2.0超详细精简版

    npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安装webpack以及webpack测试服务器,默认安装是1.0版本的,所以必须指定版本号 npm install --save-dev babel-core babel-loader babel-preset-es2015

  • 详解windows下vue-cli及webpack 构建网站(三)使用组件

    1.本文章是建立在<windows下vue-cli及webpack 构建网站(一)环境安装>和<windows下vue-cli及webpack 构建网站(一)导入bootstrap样式>两篇文章之上的. 2.在src\components文件夹下面新建两个组件,分别为 header.vue.footer.vue,打开header.vue文件粘贴下面的代码作为网站的头部. <template> <!-- Fixed navbar --> <nav cla

  • 从零开始用webpack构建一个vue3.0项目工程的实现

    前言 入门级别教程,适用于初级工程师 移动端 单页面  Demo 正文 第一步 找一个你认为合适的磁盘.输入mkdir test, cd test , npm init -y. 第二步 安装依赖 webpack 系列依赖 webpack webpack-cli babel 系列依赖 @babel/core @babel/preset-env 移动兼容方案 amfe-flexible autoprefixer axios axios webpack loader babel-loader css-

  • Golang+Vue轻松构建Web应用的方法步骤

    目录 介绍 项目结构 后端结构 前端结构 一些细节 为什么使用JWT 缓存实现 请求限流 从零开发前端 运行 总结 最近疫情在家,空闲时间比较多,整理下之前写的Golang项目Weave,补充了一些功能,加了前端实现.作为一个Web应用模板,也算是功能比较齐全了,现将开发过程中遇到的一些问题.项目特性总结下. 介绍 Weave是一个基于Go+Vue实现的Web应用模板,支持前后端,拥有完整的认证.存储.Restful API等功能. 后端基于Golang开发,主要特性如下: Restful AP

  • Vue自动构建发布脚本的方法示例

    简介 使用cross-env, scp2两个插件完成 cross-env cross-env这是一款运行跨平台设置和使用环境变量的脚本. 为什么需要cross-env? NODE_ENV=production 像这样设置环境变量时,大多数Windows命令提示符都会阻塞 .(Windows上的Bash是例外,它使用本机Bash.)同样,Windows和POSIX命令使用环境变量的方式也有所不同.对于POSIX,您可以使用: $ENV_VAR 和在Windows上可以使用 %ENV_VAR% .

  • 带你使用webpack快速构建web项目的方法

    使用webpack构建web项目以及热部署插件的使用,按以下步骤,能帮助你快速构建和理解~ 详细学习还得靠官方文档! 一,基础构建部分 大前提!你得先安装了Node.js此处不赘述. 1,创建一个文件夹 2,在当前文件夹子下打开命令行工具 3,项目初始化(创建package.json文件) npm init -y 4,安装依赖 版本搭配如下: "devDependencies": { "webpack": "^4.17.1", "web

  • 分模块构建Maven工程的方法步骤

    分模块构建Maven工程Demo 1.分模块构建Maven分析 在企业项目开发过程中,由于项目规模庞大,业务复杂,参与的人员比较多,一般会通过合理的模块拆分将一个大型的项目拆分为N多个小模块,分别进行开发.而且拆分出的模块可以非常容易的被其他模块复用. 常见的拆分方式有两种: 第一种:按照业务模块进行拆分,每个模块拆分成一个maven工程,例如将一个项目分为用户模块.订单模块.购物车模块等,每个模块对应就是一个maven工程 第二种:按照层进行拆分,譬如持久层.业务层.表现层等,每个层对应就是一

  • 用 Django 开发一个 Python Web API的方法步骤

    Django 是 Python 编程语言驱动的一个开源模型-视图-控制器(MVC)风格的 Web 应用程序框架.它是Python API开发中最受欢迎的名称之一,自2005年成立以来,其知名度迅速提升. Django由Django软件基金会(Django Software Foundation)维护,并获得了社区的大力支持,在全球拥有11,600多个成员.在Stack Overflow上,Django大约有191,000个带标签的问题.Spotify,YouTube和Instagram等网站都依

  • 在IIS上部署ASP.NET Core Web API的方法步骤

    对于本文,我想与您分享有关如何在IIS上部署ASP.NET Core Web API的指南.我将指导您安装Visual Studio 2019,.NET Core Runtime 3.0.我还确保我逐步引导您在服务器(Web IIS)中启用它,使用no受管代码选项创建新的应用程序池,创建ASP.NET Core Web API项目以及发布ASP.NET Core Web API. 了解并遵循正确的步骤来准备开发和部署环境后,在IIS上部署ASP.NET Core Web API就是一件容易的事.

  • idea2020.1.3 手把手教你创建web项目的方法步骤

    首先: IDEA中的项目(project)与eclipse中的项目(project)是不同的概念,IDEA的project 相当于之前eclipse的workspace,IDEA的Module是相当于eclipse的项目(project). 第一步:配置tomcat (1)点击run下面的edit configuration (2)点击template左边的三角 (3)找到Tomcat Server,有两个选项,第一个表示本地的,第二个表示远程的.这里我们因为在自己电脑,选择本地的 (4)点击c

  • 通过Dockerfile构建Docker镜像的方法步骤

    Dockerfile是一个文本文件,其内包含了一条条的指令(Instruction),每一条指令构建一层,因此每一条指令的内容,就是描述该层应当如何构建. Dockerfile支持Shell类的行尾添加"\"的命令换行方式,以及行首"#"进行注释的格式. 使用Dockerfile构建Docker镜像时注意事项: (1).尽量选取满足需求但较小的基础系统镜像; (2).清理编译生成文件.安装包的缓存等临时文件; (3).安装各个软件时候要指定准确的版本号,并避免引入不

  • vue项目打包发布上线的方法步骤

    目录 一.开发环境到生产环境的转变 二.设置统一的请求路径 三.运行打包命令 vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-cli脚手架生成的项目为例) 一.开发环境到生产环境的转变 项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发路径切换为线上路径. 打开项目中config文件夹里面的 dev.env.js 文件,将后端给的线上路径填入. 'use strict' module.exports = { NODE_E

  • 使用Docker构建开发环境的方法步骤( Windows和mac)

    目录 1. 使用 Docker 的好处 2. 安装 Docker 1) Linux 安装 Docker 2) Windows 10 3) macOS 3. Docker 换源 1) Linux 换源 2) Windows 和 Mac 换源 4. 编写 Dockerfile 5. 编写 docker-compose.yml 6. 启动容器 7. 总结 我们在开发中都会遇到这样的问题:在本地开发好功能后,部署到服务器,或者其他人拉到本地接着开发时,会出现功能无法使用的情况. 这些异常情况,大多数时候

随机推荐