当前位置:首页 > 技术分析 > 正文内容

Go 项目推荐之自动化全站后台管理系统脚手架 Gin-Vue-Admin

ruisui883个月前 (01-16)技术分析28

Gin-Vue-Admin

GIN-VUE-ADMIN 是一个基于 vue 和 gin 开发的全栈前后端分离的后台管理系统,拥有 jwt 鉴权,动态路由,动态菜单,casbin 鉴权,表单生成器,代码生成器等功能,新版本增加了从数据库表一键创建前后端 curd 代码功能,方便大家从老系统迁移,大大减少了开发工作量,真正做到 5 分钟一套基础业务,让大家把更多时间专注在复杂业务开发上。

项目地址

演示 demo: http://demo.gin-vue-admin.com (如提示备案中请使用备用站点)

备用站点: http://qmplus.henrongyi.top (2020/07/11 前请使用备用站点)

(测试用户名:admin,测试密码:123456)

项目 github: https://github.com/flipped-aurora/gin-vue-admin

技术选型

  • 前端:用基于vue的Element-UI构建基础页面。
  • 后端:用Gin快速搭建基础 restful 风格 API,Gin是一个 go 语言编写的 Web 框架。
  • 数据库:采用MySql(5.6.44)版本,使用gorm实现对数据库的基本操作,已添加对 sqlite 数据库的支持。
  • 缓存:使用Redis实现记录当前活跃用户的jwt令牌并实现多点登录限制。
  • API 文档:使用Swagger构建自动化文档。
  • 配置文件:使用fsnotify和viper实现yaml格式的配置文件。
  • 日志:使用go-logging实现日志记录。

主要功能

  • 权限管理:基于jwt和casbin实现的权限管理
  • 文件上传下载:实现基于七牛云的文件上传操作(为了方便大家测试,我公开了自己的七牛测试号的各种重要 token,恳请大家不要乱传东西)
  • 分页封装:前端使用 mixins 封装分页,分页方法调用 mixins 即可
  • 用户管理:系统管理员分配用户角色和角色权限。
  • 角色管理:创建权限控制的主要对象,可以给角色分配不同 api 权限和菜单权限。
  • 菜单管理:实现用户动态菜单配置,实现不同角色不同菜单。
  • api 管理:不同用户可调用的 api 接口的权限不同。
  • 配置管理:配置文件可前台修改(测试环境不开放此功能)。
  • 字典管理:配置字典类型相关内容
  • 操作记录:记录用户的操作行为
  • 富文本编辑器:MarkDown 编辑器功能嵌入。
  • 条件搜索:增加条件搜索示例。
  • restful 示例:可以参考用户管理模块中的示例 API。
前端文件参考: src\view\superAdmin\api\api.vue
后台文件参考: model\dnModel\api.go
  • 多点登录限制:需要在config.yaml中把system中的useMultipoint修改为 true(需要自行配置 Redis 和 Config 中的 Redis 参数,测试阶段,有 bug 请及时反馈)。
  • 分片长传:提供文件分片上传和大文件分片上传功能示例。
  • 表单生成器:表单生成器借助 @form-generator。
  • 代码生成器:后台基础逻辑以及简单 curd 的代码生成器。

前端环境

  1. 前往https://nodejs.org/zh-cn/下载当前版本 node
  2. 命令行运行 node -v npm -v 若控制台输出版本号则前端环境搭建成功
  3. 开发工具推荐 vscodehttps://code.visualstudio.com/

后台环境

  1. 前往https://golang.org/dl/下载 golang 安装 版本号需>=1.12
  2. 命令行运行 go 若控制台输出各类提示命令 则安装成功 输入 go version 确认版本大于 1.12
  3. 开发工具推荐 golandhttps://www.jetbrains.com/go/

注意事项

  • node 版本 > v8.6.0
  • golang 版本 >= v1.11
  • IDE 推荐:Goland
  • 各位在 clone 项目以后,把 db 文件导入自己创建的库后,最好前往七牛云申请自己的空间地址。
  • 替换掉项目中的七牛云公钥,私钥,仓名和默认 url 地址,以免发生测试文件数据错乱

项目目录(2.0)

    ├─server        (后端文件夹)
    │  ├─api            (API)
    │  ├─config         (配置包)
    │  ├─core           (內核)
    │  ├─db             (数据库脚本)
    │  ├─docs           (swagger文档目录)
    │  ├─global         (全局对象)
    │  ├─initialiaze    (初始化)
    │  ├─middleware     (中间件)
    │  ├─model          (结构体层)
    │  ├─resource       (资源)
    │  ├─router         (路由)
    │  ├─service         (服务)
    │  └─utils         (公共功能)
    └─web            (前端文件)
        ├─public        (发布模板)
        └─src           (源码包)
            ├─api       (向后台发送ajax的封装层)
            ├─assets (静态文件)
            ├─components(组件)
            ├─router (前端路由)
            ├─store     (vuex 状态管理仓)
            ├─style     (通用样式文件)
            ├─utils     (前端工具库)
            └─view      (前端页面)

项目架构

系统架构图

系统架构图

前端详细设计图 (提供者:baobeisuper)

前端详细设计图

推荐的开发模式

  1. 运行项目,进入系统工具->代码生成器
  2. 设计基础结构体模型,点击生成代码包 获取前后端基础代码
  3. 前端代码添加进入 api 并自行重命名,后端代码放入适合自己开发路径中 并注册结构体到数据库,注册路由到 inirRouter(开发模式下,请自行注释掉自动生成代码中的鉴权中间件 .Use(middleware.JWTAuth()).Use(middleware.CasbinHandler()) )方便开发
  4. 前端创建 vue 文件,并到超级管理员->菜单管理->将对应路径添加进行菜单,进入角色管理,将刚配置的菜单添加进入,重启前端项目,开始绘制页面,书写交互。
  5. 接口调通以后,到超级管理员->api 管理中添加已经调通的路由,进入角色管理,将调通的路由配置进入角色权限。
  6. 简单几步过后,一个包含鉴权,动态菜单的前后端全栈功能就搞定了。

项目配套视频教程

  • gin-vue-admin: https://space.bilibili.com/322210472/channel/detail?cid=126419
  • vue: https://space.bilibili.com/322210472/channel/detail?cid=108885
  • golang: https://space.bilibili.com/322210472/channel/detail?cid=108884
  • gin: https://space.bilibili.com/322210472/channel/detail?cid=126418

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/332.html

分享给朋友:

“Go 项目推荐之自动化全站后台管理系统脚手架 Gin-Vue-Admin” 的相关文章

「图解」父子组件通过 props 进行数据交互的方法

1.组件化开发,经常有这样的一个场景,就是父组件通过 Ajax 获取数据,传递给子组件,如何通过 props 进行数据交互来实现,便是本图解的重点。2.代码的结构3.具体代码 ①在父组件 data 中存放数据 ms。 ②将父组件 data 中的数据 ms 绑定到子组件中的属性 ms。 ③子组件在 p...

【Vue3 基础】05.组件化

这是 Vue3 + Vite + Pinia +TS + Element-Plus 实战系列文档。最近比较忙没什么时间写文章,争取早日把这个系列完结吧~生命周期和模板引用在本章之前,我们通过响应式 api 和声明式渲染,处理了 DOM 的更新,但光是这些,对于一些复杂的需要手动操作 DOM 的情况,...

掌握版本控制:Git的那些常见用法与技巧

Git作为现代开发中最常用的版本控制系统,它的普及和高效性使得程序员几乎每天都在与它打交道。无论是个人项目,还是团队协作,Git都能帮助我们追踪代码的修改历史,保证代码版本的管理井井有条,并在多人协作时有效地避免冲突。本文将分享一些常见的Git用法与技巧,帮助你更好地掌握Git的强大功能,并提升你在...

10款超牛Vim插件,爱不释手了

我是一个忠实的Vim编辑器用户,从事开发工作多年,我一直都非常喜欢使用Vim。轻量、便捷,而且,熟悉了Vim相关的快捷键之后,效率能够成倍的提升。除了这些之外,Vim像很多知名的IDE、编辑器一样,也支持插件配置,通过这些插件,可以实现更多高级、高效的操作。今天,就来给大家分享10个我特别喜欢的Vi...

我的VIM配置

写一篇关于VIM配置的文章,记录下自己的VIM配置,力求简洁实用。VIM的配置保存在文件~/.vimrc中(Windows下是C:\Users\yourname \_vimrc)。VIM除了自身可配置项外,还可插件扩展。VIM的插件一般用vundle或vim-plug来管理,但我力求简单,不打算装太...

深度解析!AI智能体在To B领域应用,汽车售后服务落地全攻略

在汽车售后服务领域,AI智能体的应用正带来一场效率和专业度的革命。本文深度解析了一个AI智能体在To B领域的实际应用案例,介绍了AI智能体如何通过提升服务顾问和维修技师的专业度及维修效率,优化汽车售后服务流程。上周我分享了AI智能体+AI小程序To C的AI应用场景《1000%增长!我仅用一个小时...