基于Go的后台管理框架Gin-vue-admin

官网:gin-vue-admin | GVA 文档站

演示:gin-vue-admin DEMO

源码:GitHub - flipped-aurora/gin-vue-admin: 基于vite+vue3+gin搭建的开发基础平台(支持TS,JS混用),集成jwt鉴权,权限管理,动态路由,显隐可控组件,分页封装,多点登录拦截,资源权限,上传下载,代码生成器,表单生成器,chatGPT自动查表等开发必备功能。基于vite+vue3+gin搭建的开发基础平台(支持TS,JS混用),集成jwt鉴权,权限管理,动态路由,显隐可控组件,分页封装,多点登录拦截,资源权限,上传下载,代码生成器,表单生成器,chatGPT自动查表等开发必备功能。 - GitHub - flipped-aurora/gin-vue-admin: 基于vite+vue3+gin搭建的开发基础平台(支持TS,JS混用),集成jwt鉴权,权限管理,动态路由,显隐可控组件,分页封装,多点登录拦截,资源权限,上传下载,代码生成器,表单生成器,chatGPT自动查表等开发必备功能。https://github.com/flipped-aurora/gin-vue-admin

 文档:项目介绍 | Gin-Vue-Admin

配置要求:

  • node版本 >= 16.14.2
  • golang版本 >= v1.18
  • mysql 版本>5.7 引擎需要是 innoDB
  • 需要Redis

前端:

1、web目录为前端目录

2、web目录下CMD, npm i 安装依赖

3、npm run serve 命令启动项目

4、登录页面有“前往初始化”按钮,点击进入初始化页面,生成数据库。

5、配置文件在web目录下

.env.development#

ENV = 'development' // 标识 不要管

VITE_CLI_PORT = 8080  // 开发阶段前端运行的端口
VITE_SERVER_PORT = 8888 //  开发阶段后端运行的端口
VITE_BASE_API = /api  // 代理前缀用于跨域转发
#下方修改为你的线上ip
VITE_BASE_PATH = https://demo.gin-vue-admin.com // 开发阶段为本地后端

.env.production#

ENV = 'production' // 标识 不要管

VITE_CLI_PORT = 8080  // 开发阶段前端运行的端口(上线可以无视)
VITE_SERVER_PORT = 8888 //  开发阶段后端运行的端口(上线可以无视)
VITE_BASE_API = /api  // 代理前缀用于跨域转发(搭配proxy工具例如nginx)
#下方修改为你的线上ip
VITE_BASE_PATH = https://demo.gin-vue-admin.com // 主要是保证ifream的可用性 不会影响主体业务

6、打包:在web目录下执行 npm run build 得到 dist文件夹 将dist文件夹上传到服务器 建议使用nginx进行代理。

7、nginx下proxy配置

location  /api {
  		proxy_set_header Host $http_host;
		proxy_set_header  X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
    	rewrite ^/api/(.*)$ /$1 break;  #重写
    	proxy_pass 后端地址; # 设置代理服务器的协议和地址
    }

后端:

1、server文件夹为Golang后端目录

2、项目结构

文件夹 说明 描述
api api层 api层
--v1 v1版本接口 v1版本接口
config 配置包 config.yaml对应的配置结构体
core 核心文件 核心组件(zap, viper, server)的初始化
docs swagger文档目录 swagger文档目录
global 全局对象 全局对象
initialize 初始化 router,redis,gorm,validator, timer的初始化
--internal 初始化内部函数 gorm 的 longger 自定义,在此文件夹的函数只能由 initialize 层进行调用
middleware 中间件层 用于存放 gin 中间件代码
model 模型层 模型对应数据表
--request 入参结构体 接收前端发送到后端的数据。
--response 出参结构体 返回给前端的数据结构体
packfile 静态文件打包 静态文件打包
resource 静态资源文件夹 负责存放静态文件
--excel excel导入导出默认路径 excel导入导出默认路径
--page 表单生成器 表单生成器 打包后的dist
--template 模板 模板文件夹,存放的是代码生成器的模板
router 路由层 路由层
service service层 存放业务逻辑问题
source source层 存放初始化数据的函数
utils 工具包 工具函数封装
--timer timer 定时器接口封装
--upload oss oss接口封装

3、配置文件为server目录下的config.yaml文件。

4、打包:在 server下 go build . 得到一个可执行文件然后将可执行文件和config.yaml 以及 resource 文件夹上传至服务器。

注意在windows系统下打包会生成一个exe文件,如果正式环境是linux,需要设置go打包配置为linux

SET GOOS=linux
SET GOARCH=amd64

执行go build会生成一个没有后缀的打包文件server。

上传到服务器的结构为:


    ├── breakpointDir  // 后续断点续传自动生成
    ├── chunk   // 后续断点续传自动生成
    ├── fileDir   // 后续断点续传自动生成
    ├── finish   // 后续断点续传自动生成
    ├── resource
    │   └── 子目录文件					
    ├── dist
    │   └── 子目录文件
    ├── server //后端打包文件
    ├── config.yaml //后端配置文件
    

5、linux在上传目录下执行命令

./server   
后端即可运行。

展示效果:

基于Go的后台管理框架Gin-vue-admin_第1张图片

 基于Go的后台管理框架Gin-vue-admin_第2张图片

基本的角色、用户、菜单、字典、日志功能都带着。 

你可能感兴趣的:(vue.js,golang,gin,go)