gin-vue-admin后台管理基础

2023-10-30 17:54:30 浏览数 (2)

使用go开发就是现在很多企业以及个人用户的选择,那么使用合适的框架就显得尤为重要,今天我们就研究使用gin-vue-admin后台管理,看看怎么样。

gin-vue-admin是基于vue和gin开发的全栈前后端分离的开发基础平台,集成了jwt鉴权、动态路由、动态菜单等功能,总之有助于我们更专注与业务开发,可以快速搭建一套中小型项目。地址http://demo.gin-vue-admin.com,大家可以去看一下。

(1)安装nodejs环境,前往https://nodejs.org/zh-cn/下载当前版本node,运行node -v输出版本号则表示前端环境搭建成功,目前长期支持版本为16.18.0,我这边是16.15.0

(2)下载golang环境,https://golang.google.cn/dl/,运行go version显示版本号即搭建成功环境。这个框架要求go版本>=1.16

(3)开发工具可以用vs、idea、或者goland这边推荐goland 地址https://www.jetbrains.com/go/

(1)项目下载,仅供学习,商业用需要找作者授权,地址https://github.com/flipped-aurora/gin-vue-admin

(2)打开文件

(3)启用go模块,添加局部环境变量值goproxy

(4)进入server目录,使用go mod并安装依赖包,执行命令go generate -x 显示并执行命令

(5)编译运行go文件

go build -o server.exe main.go

server.exe

(6)启动web

进入web文件夹,安装依赖npm install 并启动web项目 npm run server

因为使用了vite打包前端启动速度相当快!

(1)点击页面初始化数据,点击确认

(2)填写自己数据库相关信息,这里数据库为mysql8.0

(3)出现以下界面就代表创建数据库成功

(4)点击登录即可打开主页面

到这里就算完成gin-vue-admin后台管理系统的安装,便于学习,可以使用此框架,快速开发,专注自己的业务。

代码语言:javascript复制
web
 ├── babel.config.js
 ├── Dockerfile
 ├── favicon.ico
 ├── index.html                  -- 主页面
 ├── limit.js                    -- 助手代码
 ├── package.json                -- 包管理器代码
 ├── src                         -- 源代码
 │   ├── api                    -- api 组
 │   ├── App.vue                -- 主页面
 │   ├── assets                 -- 静态资源
 │   ├── components             -- 全局组件
 │   ├── core                   -- gva 组件包
 │   │   ├── config.js         -- gva网站配置文件
 │   │   ├── gin-vue-admin.js  -- 注册欢迎文件
 │   │   └── global.js         -- 统一导入文件
 │   ├── directive              -- v-auth 注册文件
 │   ├── main.js                -- 主文件
 │   ├── permission.js          -- 路由中间件
 │   ├── pinia                  -- pinia 状态管理器,取代vuex
 │   │   ├── index.js          -- 入口文件
 │   │   └── modules           -- modules
 │   │       ├── dictionary.js
 │   │       ├── router.js
 │   │       └── user.js
 │   ├── router                 -- 路由声明文件
 │   │   └── index.js
 │   ├── style                  -- 全局样式
 │   │   ├── base.scss
 │   │   ├── basics.scss
 │   │   ├── element_visiable.scss  -- 此处可以全局覆盖 element-plus 样式
 │   │   ├── iconfont.css           -- 顶部几个icon的样式文件
 │   │   ├── main.scss
 │   │   ├── mobile.scss
 │   │   └── newLogin.scss
 │   ├── utils                  -- 方法包库
 │   │   ├── asyncRouter.js    -- 动态路由相关
 │   │   ├── btnAuth.js        -- 动态权限按钮相关
 │   │   ├── bus.js            -- 全局mitt声明文件
 │   │   ├── date.js           -- 日期相关
 │   │   ├── dictionary.js     -- 获取字典方法
 │   │   ├── downloadImg.js    -- 下载图片方法
 │   │   ├── format.js         -- 格式整理相关
 │   │   ├── image.js          -- 图片相关方法
 │   │   ├── page.js           -- 设置页面标题
 │   │   ├── request.js        -- 统一请求文件
 │   │   └── stringFun.js      -- 字符串文件
 |   ├── view                   -- 主要view代码
 |   |   ├── about              -- 关于我们
 |   |   ├── dashboard          -- 面板
 |   |   ├── error              -- 错误
 |   |   ├── example            -- 上传案例
 |   |   ├── iconList           -- icon列表
 |   |   ├── init               -- 初始化数据 
 |   |   ├── layout             -- layout约束页面
 |   |   |   ├── aside          -- 侧边栏
 |   |   |   ├── bottomInfo     -- bottomInfo
 |   |   |   ├── screenfull     -- 全屏设置
 |   |   |   ├── setting        -- 系统设置
 |   |   |   └── index.vue      -- base 约束
 |   |   ├── login              --登录
 |   |   ├── person             --个人中心
 |   |   ├── superAdmin         -- 超级管理员操作
 |   |   ├── system             -- 系统检测页面
 |   |   ├── systemTools        -- 系统配置相关页面
 |   |   └── routerHolder.vue   -- page 入口页面
 ├── vite.config.js             -- vite 配置文件
 └── yarn.lock
后端目录
├── server
        ├── api             (api层)
        │   └── v1          (v1版本接口)
        ├── config          (配置包)
        ├── core            (核心文件)
        ├── docs            (swagger文档目录)
        ├── global          (全局对象)                   
        ├── initialize      (初始化)                       
        │   └── internal    (初始化内部函数)                            
        ├── middleware      (中间件层)                       
        ├── model           (模型层)                   
        │   ├── request     (入参结构体)                       
        │   └── response    (出参结构体)                           
        ├── packfile        (静态文件打包)                       
        ├── resource        (静态资源文件夹)                       
        │   ├── excel       (excel导入导出默认路径)                       
        │   ├── page        (表单生成器)                       
        │   └── template    (模板)                           
        ├── router          (路由层)                   
        ├── service         (service层)                   
        ├── source          (source层)                   
        └── utils           (工具包)                   
            ├── timer       (定时器接口封装)                       
            └── upload      (oss接口封装) 

到这里,对于gin-vue-admin管理系统框架有一个大致的了解了,快去实践吧,祝学习顺利!

END

作者|希里安

0 人点赞