精华内容
下载资源
问答
  • gin-vue-admin
    千次阅读
    2021-04-02 11:37:13

    gin-vue-admin 框架详解

    碎碎念

    秋招进入一家游戏公司做golang后台工程师,最近来实习了。导师给了一个课题,要求先熟悉一下gin-vue-admin框架,大概看了一下框架的流程,感觉应该是和renrenfast差不多的逻辑。网上的一些文档都是说怎么去使用的,我这里记录一下gin-vue-admin的启动流程吧(主要讲一下后台逻辑,我也是前端小菜鸡,什么都不懂只会使用的)

    知识储备

    1. gin框架,如何启动web服务及其相关api
    2. vue框架、element-ui
    3. docker docker-compose知识

    目录结构

    项目使用支持使用docker-compose部署,使用go module管理包,包含两个项目server(后台)、web(前端)。当然了,我们也可以不使用容器化的技术,手动部署,前提是把MySQL、redis、node.js、nginx环境搭建好。

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

    项目启动及其使用

    github地址:https://github.com/flipped-aurora/gin-vue-admin

    github上面有项目的启动及其使用过程,这里不再赘述

    后台启动流程,逻辑执行

    其实我看到这个项目的使用,感觉和renrenfast是一样的逻辑,只不过renrenfast使用的是springboot,而这里使用的gin,仅此而已

    这里我先讲一下rerenfast的基本逻辑:

    renrenfast使用的是springboot+mybatis+vue+shiro所集成的一个框架,使用前后端分离技术。springboot其实就是和ssm一样,使用MVC架构把项目逻辑一层一层划分,使用mybatis做数据持久化处理。在用户登录的时候,后台给生成一个token返回。往后请求后台的时候,shiro会把相关的请求进行拦截,验证token,确定角色和权限,再考虑是否进行下去还是拒绝。前端动态展示的页面路由由数据库获取,再在前端动态展示,同时会请求所有的角色信息(权限信息)存储在local storage里面,通过角色信息(权限信息)来判断用户的角色,动态的展示相应展示的页面…

    然后就是今天的主角了:gin-vue-admin

    server目录下面有一个main.go文件

    注释里面写的很清楚了:

    1. viper是用来加载配置到全局配置的,我们可以通过global来使用全局的信息,例如mysql、redis等等的西悉尼
    2. zap是用来进行日志记录的,和springboot的log差不多吧,反正就是写日志的
    3. gorm的话感觉和mybatis不太一样,反而和hibernate差不多,支持自动建表,通过对象来查询
    4. 最后的启动项目关键在于core.RunWindowsServer()
    package main
    
    import (
    	"gin-vue-admin/core"
    	"gin-vue-admin/global"
    	"gin-vue-admin/initialize"
    )
    
    // @title Swagger Example API
    // @version 0.0.1
    // @description This is a sample Server pets
    // @securityDefinitions.apikey ApiKeyAuth
    // @in header
    // @name x-token
    // @BasePath /
    func main() {
    	global.GVA_VP = core.Viper()      // 初始化Viper
    	global.GVA_LOG = core.Zap()       // 初始化zap日志库
    	global.GVA_DB = initialize.Gorm() // gorm连接数据库
    	if global.GVA_DB != nil {
    		initialize.MysqlTables(global.GVA_DB) // 初始化表
    		// 程序结束前关闭数据库链接
    		db, _ := global.GVA_DB.DB()
    		defer db.Close()
    	}
    	core.RunWindowsServer()
    }
    

    这里主要就是初始化了redis,路由,配置server信息,然后就是启动服务,下面在看一下Router := initialize.Routers()是怎么初始化路由的

    //core.RunWindowsServer()
    func RunWindowsServer() {
    	if global.GVA_CONFIG.System.UseMultipoint {
    		// 初始化redis服务
    		initialize.Redis()
    	}
    	Router := initialize.Routers()
    	Router.Static("/form-generator", "./resource/page")
    
    	address := fmt.Sprintf(":%d", global.GVA_CONFIG.System.Addr)
    	s := initServer(address, Router)
    	// 保证文本顺序输出
    	// In order to ensure that the text order output can be deleted
    	time.Sleep(10 * time.Microsecond)
    	global.GVA_LOG.Info("server run success on ", zap.String("address", address))
    
    	fmt.Printf(`
    	欢迎使用 Gin-Vue-Admin
    	当前版本:V2.4.0
        加群方式:微信号:shouzi_1994 QQ群:622360840
    	默认自动化文档地址:http://127.0.0.1%s/swagger/index.html
    	默认前端文件运行地址:http://127.0.0.1:8080
    	如果项目让您获得了收益,希望您能请团队喝杯可乐:https://www.gin-vue-admin.com/docs/coffee
    `, address)
    	global.GVA_LOG.Error(s.ListenAndServe().Error())
    }
    

    这里就是和我们gin框架一样了,使用gin.Default()来使用默认的路由,然后就是添加静态资源(用于swagger文档),这里可以看到有global.GVA_LOG.Info("register swagger handler")这里就是使用了zap来进行日志的输出,使用PrivateGroup := Router.Group("")来进行路由分组,使用PrivateGroup.Use(middleware.JWTAuth()).Use(middleware.CasbinHandler())来做类似shiro的鉴权操作,然后就是路由的注册了

    // Router := initialize.Routers()
    func Routers() *gin.Engine {
    	var Router = gin.Default()
    	Router.StaticFS(global.GVA_CONFIG.Local.Path, http.Dir(global.GVA_CONFIG.Local.Path)) // 为用户头像和文件提供静态地址
    	// Router.Use(middleware.LoadTls())  // 打开就能玩https了
    	global.GVA_LOG.Info("use middleware logger")
    	// 跨域
    	//Router.Use(middleware.Cors()) // 如需跨域可以打开
    	global.GVA_LOG.Info("use middleware cors")
    	Router.GET("/swagger/*any", ginSwagger.WrapHandler(swaggerFiles.Handler))
    	global.GVA_LOG.Info("register swagger handler")
    	// 方便统一添加路由组前缀 多服务器上线使用
    	PublicGroup := Router.Group("")
    	{
    		router.InitBaseRouter(PublicGroup) // 注册基础功能路由 不做鉴权
    		router.InitInitRouter(PublicGroup) // 自动初始化相关
    	}
    	PrivateGroup := Router.Group("")
    	PrivateGroup.Use(middleware.JWTAuth()).Use(middleware.CasbinHandler())
    	{
    		router.InitApiRouter(PrivateGroup)                   // 注册功能api路由
    		router.InitJwtRouter(PrivateGroup)                   // jwt相关路由
    		router.InitUserRouter(PrivateGroup)                  // 注册用户路由
    		router.InitMenuRouter(PrivateGroup)                  // 注册menu路由
    		router.InitEmailRouter(PrivateGroup)                 // 邮件相关路由
    		router.InitSystemRouter(PrivateGroup)                // system相关路由
    		router.InitCasbinRouter(PrivateGroup)                // 权限相关路由
    		router.InitCustomerRouter(PrivateGroup)              // 客户路由
    		router.InitAutoCodeRouter(PrivateGroup)              // 创建自动化代码
    		router.InitAuthorityRouter(PrivateGroup)             // 注册角色路由
    		router.InitSimpleUploaderRouter(PrivateGroup)        // 断点续传(插件版)
    		router.InitSysDictionaryRouter(PrivateGroup)         // 字典管理
    		router.InitSysOperationRecordRouter(PrivateGroup)    // 操作记录
    		router.InitSysDictionaryDetailRouter(PrivateGroup)   // 字典详情管理
    		router.InitFileUploadAndDownloadRouter(PrivateGroup) // 文件上传下载功能路由
    		router.InitExcelRouter(PrivateGroup)                 // 表格导入导出
    
    		// Code generated by gin-vue-admin Begin; DO NOT EDIT.
    		// Code generated by gin-vue-admin End; DO NOT EDIT.
    	}
    	global.GVA_LOG.Info("router register success")
    	return Router
    }
    

    我们再来看一下鉴权的逻辑,是使用PrivateGroup.Use(middleware.JWTAuth()).Use(middleware.CasbinHandler())来做到的

    我们可以看到,也是和renrenfast逻辑一样的,先拦截,再判断

    // middleware.JWTAuth()
    func JWTAuth() gin.HandlerFunc {
    	return func(c *gin.Context) {
    		// 我们这里jwt鉴权取头部信息 x-token 登录时回返回token信息 这里前端需要把token存储到cookie或者本地localStorage中 不过需要跟后端协商过期时间 可以约定刷新令牌或者重新登录
    		token := c.Request.Header.Get("x-token")
    		if token == "" {
    			response.FailWithDetailed(gin.H{"reload": true}, "未登录或非法访问", c)
    			c.Abort()
    			return
    		}
    		if service.IsBlacklist(token) {
    			response.FailWithDetailed(gin.H{"reload": true}, "您的帐户异地登陆或令牌失效", c)
    			c.Abort()
    			return
    		}
    		j := NewJWT()
    		// parseToken 解析token包含的信息
    		claims, err := j.ParseToken(token)
    		if err != nil {
    			if err == TokenExpired {
    				response.FailWithDetailed(gin.H{"reload": true}, "授权已过期", c)
    				c.Abort()
    				return
    			}
    			response.FailWithDetailed(gin.H{"reload": true}, err.Error(), c)
    			c.Abort()
    			return
    		}
    		if err, _ = service.FindUserByUuid(claims.UUID.String()); err != nil {
    			_ = service.JsonInBlacklist(model.JwtBlacklist{Jwt: token})
    			response.FailWithDetailed(gin.H{"reload": true}, err.Error(), c)
    			c.Abort()
    		}
    		if claims.ExpiresAt-time.Now().Unix() < claims.BufferTime {
    			claims.ExpiresAt = time.Now().Unix() + global.GVA_CONFIG.JWT.ExpiresTime
    			newToken, _ := j.CreateToken(*claims)
    			newClaims, _ := j.ParseToken(newToken)
    			c.Header("new-token", newToken)
    			c.Header("new-expires-at", strconv.FormatInt(newClaims.ExpiresAt, 10))
    			if global.GVA_CONFIG.System.UseMultipoint {
    				err, RedisJwtToken := service.GetRedisJWT(newClaims.Username)
    				if err != nil {
    					global.GVA_LOG.Error("get redis jwt failed", zap.Any("err", err))
    				} else { // 当之前的取成功时才进行拉黑操作
    					_ = service.JsonInBlacklist(model.JwtBlacklist{Jwt: RedisJwtToken})
    				}
    				// 无论如何都要记录当前的活跃状态
    				_ = service.SetRedisJWT(newToken, newClaims.Username)
    			}
    		}
    		c.Set("claims", claims)
    		c.Next()
    	}
    }
    
    // middleware.CasbinHandler()
    // 拦截器
    func CasbinHandler() gin.HandlerFunc {
    	return func(c *gin.Context) {
    		claims, _ := c.Get("claims")
    		waitUse := claims.(*request.CustomClaims)
    		// 获取请求的URI
    		obj := c.Request.URL.RequestURI()
    		// 获取请求方法
    		act := c.Request.Method
    		// 获取用户的角色
    		sub := waitUse.AuthorityId
    		e := service.Casbin()
    		// 判断策略中是否存在
    		success, _ := e.Enforce(sub, obj, act)
    		if global.GVA_CONFIG.System.Env == "develop" || success {
    			c.Next()
    		} else {
    			response.FailWithDetailed(gin.H{}, "权限不足", c)
    			c.Abort()
    			return
    		}
    	}
    }
    

    最后,前端页面的展示应该是通过/server/router/sys_api.go里面进行注册并且获取展示

    func InitApiRouter(Router *gin.RouterGroup) {
    	ApiRouter := Router.Group("api").Use(middleware.OperationRecord())
    	{
    		ApiRouter.POST("createApi", v1.CreateApi)   // 创建Api
    		ApiRouter.POST("deleteApi", v1.DeleteApi)   // 删除Api
    		ApiRouter.POST("getApiList", v1.GetApiList) // 获取Api列表
    		ApiRouter.POST("getApiById", v1.GetApiById) // 获取单条Api消息
    		ApiRouter.POST("updateApi", v1.UpdateApi)   // 更新api
    		ApiRouter.POST("getAllApis", v1.GetAllApis) // 获取所有api
    		ApiRouter.DELETE("deleteApisByIds", v1.DeleteApisByIds) // 删除选中api
    	}
    }
    

    基本的业务逻辑应该就是这样的,然后还有一些分页的框架,一些细节我没认真去看。如果有错误的话,欢迎大家指正,交流学习。

    更多相关内容
  • Gin-Vue-Admin APP Go快速开发框架Gin-Vue-Admin 强大Go Web Gin开发项目移动端Flutter APP Gin-Vue-Admin Flutter Gin-Vue-Admin平台非常强大,让中小企业、外包项目快速能交付项目,有以下特点 简单易用 开箱即用 ...
  • gin-vue-admin

    2021-04-22 10:55:23
    Gin-vue-admin是一个基于vuegin开发的全栈前后端分离的后台管理系统,集成jwt鉴权,动态路由,动态菜单,casbin鉴权,表单生成器,代码生成器等功能,提供多种示例文件,让您把更多时间专注在业务开发上。...
  • Gin-vue-admin是一个基于vuegin开发的全栈前后端分离的后台管理系统,集成jwt鉴权,动态路由,动态菜单,casbin鉴权,表单生成器,代码生成器等功能,提供多种示例文件,让您把更多时间专注在业务开发上。...
  • Gin-vue-admin是一个基于vuegin开发的全栈前分离的后台管理系统,集成jwt鉴权,动态路由,动态菜单,casbin鉴权,表单生成器,代码生成器等功能,提供多种示例文件,让您把更多时间专注于业务开发上。 1.2贡献...
  • Gin-Vue-Admin平台非常强大,让中小企业、外包项目快速能交付项目,有以下特点 简单易用 简单易用 开箱即用 更新迅速GIN-VUE-ADMIN是一个基于vuegin开发的全栈前后端分离的开发基础平台,拥有jwt鉴权,动态路由,...

    Gin-Vue-Admin平台非常强大,让中小企业、外包项目快速能交付项目,有以下特点 简单易用 开箱即用 更新迅速

    GIN-VUE-ADMIN是一个基于vue和gin开发的全栈前后端分离的开发基础平台,拥有jwt鉴权,动态路由,动态菜单,casbin鉴权,表单生成器,代码生成器等功能,提供了多种示例文件,让大家把更多时间专注在业务开发上

    为了不断增长的移动化需求,做了一个Gin-Vue-Admin APP , 由Flutter开发,能快速适应多端的业务,同一套代码多端使用。里面已经组件化,进行移动端的内容展示、CURD非常简化,请查阅以下截图简介:

    下载地址:Gin-Vue-AdminAPPGo快速开发框架Gin-Vue-AdminFlutterGin-Vue-Admin安卓-Android文档类资源-CSDN下载

     

     

     

     

     

    展开全文
  • Golang: gin-vue-admin框架介绍

    千次阅读 2021-12-30 12:50:42
    gin-vue-admin基于gin+vue搭建的后台管理系统框架,集成jwt鉴权,权限管理,动态路由,分页封装,多点登录拦截,资源权限,上传下载,代码生成器,表单生成器,通用工作流等基础功能,五分钟一套CURD前后端代码,...

    我参与11月更文挑战的第5天,活动详情查看:2021最后一次更文挑战

    先给大家看看我上个月的礼品呗 嘻嘻

    gin-vue-admin基于gin+vue搭建的后台管理系统框架,集成jwt鉴权,权限管理,动态路由,分页封装,多点登录拦截,资源权限,上传下载,代码生成器,表单生成器,通用工作流等基础功能,五分钟一套CURD前后端代码,目前已支持VUE3,欢迎issue和pr~

    gitee地址: https://gitee.com/pixelmax/gin-vue-admin

    github地址: https://github.com/flipped-aurora/gin-vue-admin

    插件仓库以及开发规范:https://github.com/flipped-aurora/gva-plugins

    审批流分支: https://github.com/flipped-aurora/gin-vue-admin/tree/gva_workflow

    先说下启动代码会遇到的问题

    D:\nodejs\node_global\webpack.ps1,因为在此系统上禁止运行脚本...

    今天在开发中使用到了 yarn,之前全局安装了yarn,并且在 cmd 中也可以正常使用,但是在VS Code中报出了错误。如下信息: 无

    法加载文件 D:\nodejs\node_global\webpack.ps1,因为在此系统上禁止运行脚本,
    有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170

    解决方案:

    首先以管理员的身份运行 VS Code .

    在终端执行 get-ExecutionPolicy,打印显示出 Restricted,表示禁止状态.

    接下来在终端执行 set-executionpolicy remotesigned -s currentuser

    在此输入 get-ExecutionPolicy查看,显示 RemoteSigned.

    之后再使用yarn install 时,就不会再出现如上所述的问题了,出现其他同样类似情况也是同样的解决方案。

    # 进入web文件夹
    cd web
    
    # 安装依赖
    cnpm install || npm install
    
    # 启动web项目
    npm run serve

    好,进入正文啦::::

    项目文档

    在线文档 : https://www.gin-vue-admin.com

    初始化

    从环境到部署教学视频

    开发教学 (贡献者: LLemonGreen And Fann)

    重要提示

    1.本项目从起步到开发到部署均有文档和详细视频教程

    2.本项目需要您有一定的golang和vue基础

    3.您完全可以通过我们的教程和文档完成一切操作,因此我们不再提供免费的技术服务,如需服务请进行付费支持

    4.如果您将此项目用于商业用途,请遵守Apache2.0协议并保留作者技术支持声明。您需保留如下版权声明信息,其余信息功能不做任何限制。如需剔除请联系微信:shouzi_1994

    1. 基本介绍

    1.1 项目介绍

    Gin-vue-admin是一个基于 vuegin 开发的全栈前后端分离的开发基础平台,集成jwt鉴权,动态路由,动态菜单,casbin鉴权,表单生成器,代码生成器等功能,提供多种示例文件,让您把更多时间专注在业务开发上。

    在线预览: http://demo.gin-vue-admin.com

    测试用户名:admin

    测试密码:123456

    1.2 贡献指南

    Hi! 首先感谢你使用 gin-vue-admin。

    Gin-vue-admin 是一套为快速研发准备的一整套前后端分离架构式的开源框架,旨在快速搭建中小型项目。

    Gin-vue-admin 的成长离不开大家的支持,如果你愿意为 gin-vue-admin 贡献代码或提供建议,请阅读以下内容。

    1.2.1 Issue 规范

    • issue 仅用于提交 Bug 或 Feature 以及设计相关的内容,其它内容可能会被直接关闭。如果你在使用时产生了疑问,请到 Slack 或 Gitter 里咨询。

    • 在提交 issue 之前,请搜索相关内容是否已被提出。

    1.2.2 Pull Request 规范

    • 请先 fork 一份到自己的项目下,不要直接在仓库下建分支。

    • commit 信息要以[文件名]: 描述信息 的形式填写,例如 README.md: fix xxx bug

    • 确保 PR 是提交到 develop 分支,而不是 master 分支。

    • 如果是修复 bug,请在 PR 中给出描述信息。

    • 合并代码需要两名维护人员参与:一人进行 review 后 approve,另一人再次 review,通过后即可合并。

    2. 使用说明

    - node版本 > v12.18.3
    - golang版本 >= v1.16
    - IDE推荐:Goland
    - 初始化项目: 不同版本数据库初始化不通 参见 https://www.gin-vue-admin.com/docs/first_master
    - 替换掉项目中的七牛云公钥,私钥,仓名和默认url地址,以免发生测试文件数据错乱

    2.1 server项目

    使用 Goland 等编辑工具,打开server目录,不可以打开 gin-vue-admin 根目录

    # 克隆项目
    git clone https://github.com/flipped-aurora/gin-vue-admin.git
    # 进入server文件夹
    cd server
    
    # 使用 go mod 并安装go依赖包
    go generate
    
    # 编译 
    go build -o server main.go (windows编译命令为go build -o server.exe main.go )
    
    # 运行二进制
    ./server (windows运行命令为 server.exe)

    2.2 web项目

    # 进入web文件夹
    cd web
    
    # 安装依赖
    cnpm install || npm install
    
    # 启动web项目
    npm run serve

    2.3 swagger自动化API文档

    2.3.1 安装 swagger

    (1)可以访问外国网站
    go get -u github.com/swaggo/swag/cmd/swag
    (2)无法访问外国网站

    由于国内没法安装 go.org/x 包下面的东西,推荐使用 goproxy.cn 或者 goproxy.io

    # 如果您使用的 Go 版本是 1.13 - 1.15 需要手动设置GO111MODULE=on, 开启方式如下命令, 如果你的 Go 版本 是 1.16 ~ 最新版 可以忽略以下步骤一
    # 步骤一、启用 Go Modules 功能
    go env -w GO111MODULE=on 
    # 步骤二、配置 GOPROXY 环境变量
    go env -w GOPROXY=https://goproxy.cn,https://goproxy.io,direct
    
    # 如果嫌弃麻烦,可以使用go generate 编译前自动执行代码, 不过这个不能使用 `Goland` 或者 `Vscode` 的 命令行终端
    cd server
    go generate -run "go env -w .*?"
    
    # 使用如下命令下载swag
    go get -u github.com/swaggo/swag/cmd/swag

    2.3.2 生成API文档

    cd server
    swag init

    执行上面的命令后,server目录下会出现docs文件夹里的 docs.go, swagger.json, swagger.yaml 三个文件更新,启动go服务之后, 在浏览器输入 http://localhost:8888/swagger/index.html 即可查看swagger文档

    3. 技术选型

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

    4. 项目架构

    4.1 系统架构图

    系统架构图

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

    前端详细设计图

    4.3 目录结构

    ├── 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接口封装)                        
    
        └─web            (前端文件)
            ├─public        (发布模板)
            └─src           (源码包)
                ├─api       (向后台发送ajax的封装层)
                ├─assets    (静态文件)
                ├─components(组件)
                ├─router    (前端路由)
                ├─store     (vuex 状态管理仓)
                ├─style     (通用样式文件)
                ├─utils     (前端工具库)
                └─view      (前端页面)

    5. 主要功能

    • 权限管理:基于jwtcasbin实现的权限管理。
    • 文件上传下载:实现基于七牛云, 阿里云, 腾讯云 的文件上传操作(请开发自己去各个平台的申请对应 token 或者对应key)。
    • 分页封装:前端使用 mixins 封装分页,分页方法调用 mixins 即可。
    • 用户管理:系统管理员分配用户角色和角色权限。
    • 角色管理:创建权限控制的主要对象,可以给角色分配不同api权限和菜单权限。
    • 菜单管理:实现用户动态菜单配置,实现不同角色不同菜单。
    • api管理:不同用户可调用的api接口的权限不同。
    • 配置管理:配置文件可前台修改(在线体验站点不开放此功能)。
    • 条件搜索:增加条件搜索示例。
    • restful示例:可以参考用户管理模块中的示例API。
    • 多点登录限制:需要在config.yaml中把system中的use-multipoint修改为true(需要自行配置Redis和Config中的Redis参数,测试阶段,有bug请及时反馈)。
    • 分片长传:提供文件分片上传和大文件分片上传功能示例。
    • 表单生成器:表单生成器借助 @form-generator
    • 代码生成器:后台基础逻辑以及简单curd的代码生成器。

    6. 知识库

    6.1 团队博客

    https://www.yuque.com/flipped-aurora

    内有前端框架教学视频。如果觉得项目对您有所帮助可以添加我的个人微信:shouzi_1994,欢迎您提出宝贵的需求。

    6.2 教学视频

    (1)手把手教学视频

    https://www.bilibili.com/video/BV1Rg411u7xH/

    (2)后端目录结构调整介绍以及使用方法

    https://www.bilibili.com/video/BV1x44y117TT/

    (3)golang基础教学视频

    bilibili:https://space.bilibili.com/322210472/channel/detail?cid=108884

    (4)gin框架基础教学

    bilibili:https://space.bilibili.com/322210472/channel/detail?cid=126418&ctype=0

    (5)gin-vue-admin 版本更新介绍视频

    bilibili:https://space.bilibili.com/322210472/channel/detail?cid=126418&ctype=0

    展开全文
  • Gin-Vue-Admin 线上部署

    千次阅读 2022-01-14 16:41:08
    官方部署文档:部署教学 | Gin-Vue-Admin 准备 前端 配置文件修改 修改前端目录下的.env.production文件 VUE_APP_SERVER_PORT:根据自己后端项目运行端口设置,我这里使用了8806 VUE_APP_BASE_PATH:官方...

    前言

    在网上找的很多教程包括官方的都不够细致,很容易导致出现问题,所以特记录下部署的过程

    官方部署文档:部署教学 | Gin-Vue-Admin

    准备

    前端

    配置文件修改

    修改前端目录下的.env.production文件

    • VUE_APP_SERVER_PORT:根据自己后端项目运行端口设置,我这里使用了8806
    • VUE_APP_BASE_PATH:官方设置为了线上ip,经测试设置为本地回环地址也没问题(最好根据官方,我先踩坑)
    • VUE_APP_BASE_API:根据nginx设置的代理到后端项目的名称设置,我这里保持不变
    • 其他参数不需要理
    ENV = 'production'
    
    VUE_APP_CLI_PORT = 8080
    VUE_APP_SERVER_PORT = 8806
    VUE_APP_BASE_API = /api
    
    #下方修改为你的线上ip
    VUE_APP_BASE_PATH = http://127.0.0.1

    项目编译

    在前端项目gva-project/web下运行npm run build命令执行编译

    编译成功后会生成gva-project/web/dist目录

     

    后端

    端口修改

     后端由于我线上使用了8806端口,所以需要修改config.yaml文件,将system.addr参数设置为8806

    后端编译

    如果本地是windows环境,需要使用交叉编译,我是直接在Linux上编译的,在后端项目目录gva-project/server下运行go build main.go命令执行编译,编译成功会生成main可执行文件

    部署

    根据文档部署后端需要可执行文件、config.yaml配置文件以及resource目录三者,前端只需要编译好的dist目录就行。这里演示我就暂时不新建目录去放以上文件了,直接在gva-project项目下演示,实际使用建议按照官方单独出来。

    后端运行

    后端项目的部署和运行可以参考这篇文章:Golang 项目部署

    Nginx配置 

    前端设置

    配置文件中网站根目录root设置为前端编译后的文件目录/.../gva-project/web/dist(绝对路径)

     

    后端代理设置

    • 设置代理到后端项目,代理名称注意与前端.env.production文件设置的VUE_APP_BASE_API参数一致,并且代理的替换规则中名称也要与此相同,如图中红圈所示
    • 代理地址就是后端运行的地址端口,因此地址为:http://127.0.0.1:8806,如图中黄框所示

     

    附上配置

    server
    {
        listen 80;
        server_name gva-test.com;
        index index.php index.html index.htm default.php default.htm default.html;
        root /.../gva-project/web/dist;
        
        #SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则
        #error_page 404/404.html;
        #SSL-END
        
        #ERROR-PAGE-START  错误页配置,可以注释、删除或修改
        #error_page 404 /404.html;
        #error_page 502 /502.html;
        #ERROR-PAGE-END
        
        #PHP-INFO-START  PHP引用配置,可以注释或修改
        include enable-php-73.conf;
        #PHP-INFO-END
        
        #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
        include /www/server/panel/vhost/rewrite/gva-test.com.conf;
        #REWRITE-END
        
        #禁止访问的文件或目录
        location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
        {
            return 404;
        }
        
        #一键申请SSL证书验证目录相关设置
        location ~ \.well-known{
            allow all;
        }
        
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
            error_log /dev/null;
            access_log /dev/null;
        }
        
        location ~ .*\.(js|css)?$
        {
            expires      12h;
            error_log /dev/null;
            access_log /dev/null; 
        }		 
        location /api {   
    			  #host修改为真实的域名和端口
    			  proxy_set_header   Host             $http_host;
    			  #客户真实ip
    			  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  http://127.0.0.1:8806;   #设置代理服务器的协义和地址
    		}
        access_log  /www/wwwlogs/gva-test.com.log;
        error_log  /www/wwwlogs/gva-test.com.error.log;
    }

    运行测试

    上一步配置完nginx后,重载配置后便可以访问项目了

    展开全文
  • 前端登陆成功后,gin-vue-admin会将登录用户存储到vuex中,所以获取时直接在vuex中获取就好,具体代码如下: 计算属性中获取 下面同时获取了登陆后的token和用户信息 computed: { ...mapGetters('user', ['...
  • 克隆项目到本地 地址: gin-vue-admin: 基于gin+vue搭建的后台管理系统框架,集成jwt鉴权,权限管理,动态路由,分页封装,多点登录拦截,资源权限,上传下载,代码生成器,表单生成器,通用工作流等基础功能,五...
  • gin-vue-admin学习记录

    千次阅读 2022-03-19 18:36:44
    https://github.com/flipped-aurora/gin-vue-admin 项目架构: 前后端分离 前端:web模块–vue 后端:server模块–golang 配置 初始化 前端: vscode中配置node环境,安装npm,cnpm 安装项目依赖:cnpm i || cn.
  • 1. gin-vue-admin放在 gopath的文件夹里 2. 使用 gomod 对包进行管理,在 gin-vue-admin\server文件夹下,输入 go mod tidy 3. 用golang开发工具打开项目,提示 package gin-vue-admin/core is not in GOROOT。 但...
  • gin-vue-admin项目,也是使用gorm框架来操作数据库的。在项目中,涉及到数据的增删查改的业务,内部实现原理大部分情况下都是后端与数据库交互所完成的。因此,可以从前端来找到有关数据的增删查改场景来学习gorm...
  • 上一节知道了gin-vue-admin是如何进行login登录并生成token给到前端的。本节就来看看后端是如何验证token是否合规的。对于验证token,就是在后端调用处理api方法之前,统一会进行验证的地方。在gin里是通过中间件...
  • 推荐理由开发一个管理平台,或者工具服务,其中免不了许多重复的工作,如果有个基础功能完成的脚手架 就比较好了,Gin-Vue-admin 就提供了这种脚手架的能力,同时官网配置详细的视频教程...
  • 刚学go不久,今天上传到宝塔,记录几点要点
  • 开源项目gin-vue-admin学习笔记

    千次阅读 2021-07-28 09:42:37
    开源项目gin-vue-admin学习笔记 目录开源项目gin-vue-admin学习笔记开篇克隆报错用到的开源库cobra说明小试牛刀1.项目初始化2.生成命令行模板3.编译4.执行开发方式初始化子文件修改并增加自定义代码编译运行知识点...
  • 开源项目链接:gin-vue-admin 在把项目部署起来后,可以通过查看前端代码/浏览器开发者模式来查看如何调用api的,以此来理解整个流程。 首先学习jwt鉴权相关。jwt鉴权就是通过用户密码,发送给服务器后,服务器在...
  • gin-vue-admin创建后端API

    2021-08-21 15:16:47
    感谢开源项目gin-vue-admin,以及1010工作室的教程,项目文档 我只是在跟着学习,然后记录下笔记而已,可能会有新的代码加入,但是本质还是跟着学习的一个过程。 这里记录的是开源项目的源码,感兴趣的可以直接撸...
  • GVA gin-vue-admin前后端部署教程

    千次阅读 2021-12-22 23:01:57
    一定要将本地数据库的sql导入线上 或者用命令: 导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径): 1、导出数据和表...---> mysql的data目录 nginx.conf配置示例 或者不使用nginx,用gin的http服务
  • gin-vue-admin编译

    2021-02-03 11:04:54
    web端 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm i npm run serve
  • Gin-Vue-admin项目学习

    2021-10-27 17:32:43
    文章目录Gin-Vue-admin项目学习1.下载和使用a.环境b.下载c.启动前端和后端项目d.关掉每次启动前端时自动打开文档页面e.项目结构树5.参考内容a.参考文章b.Github地址c.中文官网 Gin-Vue-admin项目学习 1.下载和使用 a...
  • 新建菜单 角色管理 配置角色对菜单的权限 父子菜单 点击点我设置按钮自动填充 选择父节点ID为刚才创建的测试父子菜单 菜单就挪过去了:
  • gin-vue-admin 本地部署无法运行,发布到服务器可以 这是因为 8888 端口被占用了 在命令窗口里输入:netstat -ano 找到pid是 16316, 然后 tasklist|findstr 16316 ,如下: 关闭python.exe 就行 ...
  • gin-vue-admin端 1.路由处router/user_token.go package router import ( "gin-vue-admin/api/v1" "github.com/gin-gonic/gin" ) func InitUserToken(Router *gin.RouterGroup) { UserToken := Router.Group(...
  • 线上部署 AdminLinux 编译后的执行程序 config.yaml 配置文件 resource/rbac_model.conf 权限配置文件 都不能少,放在同一目录下就好 ./AdminLinux 执行
  • GVA后端server部署时,需要准备这三个文件(夹) 这样,执行main.exe启动时就不会报500错误
  • gin-vue-admin 自动代码生成API 接口

    千次阅读 2021-11-11 10:08:30
    1、Mysql 数据中获取所有的表 ...2、gin-vue-admin 接口调用顺序 /api/init/initdb /api/base/captcha /api/init/checkdb /api/base/login /api/menu/getMenu /api/autoCode/getDB 查看 ...
  • gin-vue-admin 遇到问题汇总

    千次阅读 2020-06-17 17:47:25
    gin-vue-admin 框架,遇到的问题汇总一下: 1. 获取传过来的参数, get 用ShouldBindQuery,DELETE 、 POST、PUT用ShouldBindJSON 2. 能得到参数,并且有返回空列表,那有可能不是接口的问题,可能是数据的问题...
  • 使用gin-vue-admin的分支gin-vue-admin_v1_stable mysql8.0容器 端口为3307 初始化mysql容器中的数据库 通过以下命令将qmplus.sql文件拷贝到容器中 cd ~/gin-vue-admin/QMPlusServer/db/qmplus.sql docker cp ./...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,159
精华内容 463
关键字:

gin-vue-admin