vue后台开源框架（项目推荐之自动化全站后台管理系统脚手架）(1)

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

技术选型

主要功能

前端文件参考:src\view\superAdmin\api\api.vue 后台文件参考:model\dnModel\api.go

前端环境

  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/

注意事项

项目目录(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（前端页面）

项目架构

系统架构图

vue后台开源框架（项目推荐之自动化全站后台管理系统脚手架）(2)

系统架构图

前端详细设计图 （提供者:baobeisuper）

vue后台开源框架（项目推荐之自动化全站后台管理系统脚手架）(3)

前端详细设计图

推荐的开发模式

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

项目配套视频教程

,