gin-vue-admin - vite+vue3+gin に基づいて構築された開発基盤プラットフォーム (TS、JS ハイブリッドのサポート)、統合 jwt 認証、アクセス許可管理、動的ルーティング、暗黙的な制御コンポーネント、ページングカプセル化、マルチポイントログインインターセプト、リソースアクセス許可、アップロードダウンロード、コードジェネレータ、フォームビルダーなどの開発に必要な機能。

(基于vite+vue3+gin搭建的开发基础平台（支持TS,JS混用），集成jwt鉴权，权限管理，动态路由，显隐可控组件，分页封装，多点登录拦截，资源权限，上传下载，代码生成器，表单生成器等开发必备功能。)

Created at: 2019-09-01 21:22:35

Language: Go

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

License: Apache-2.0

English | 簡体字中国語

異なるバージョン

次の 18 つのバージョンは継続的に維持され、独自のバージョンで使用するように選択します。最新のテクノロジスタックは、多言語 (I<>N) をサポートする組み合わせ API バージョンです。

複合 API エディション (メイン) | 複合 API 多言語 (i18n) バージョン | 宣言 API バージョン | 宣言型 API 多言語 (i18n) バージョン

プロジェクトドキュメント

オンラインドキュメント : https://www.gin-vue-admin.com

初期化します

環境から教育ビデオの展開まで

開発教育 (貢献者: LLemonGreen And Fann)

コミュニティを交換します

プラグイン市場

重要なヒント

1. このプロジェクトは、開発から展開まで、ドキュメントと詳細なビデオチュートリアルで始まります

2.このプロジェクトでは、特定のgolangとvueの基礎が必要です

3.あなたは完全に私たちのチュートリアルやドキュメントを介してすべてを行うことができますので、我々はもはや無料の技術サービスを提供していません、サービスが必要な場合は、有料サポートを受けてください

4. このプロジェクトを商業目的で使用する場合は、Apache2.0 契約に従い、著者のテクニカルサポート声明を保持してください。お客様は、以下の著作権表示情報を保持する必要があり、残りの情報機能に制限はありません。削除するには、購入承認を受けてください

1. 基本紹介

1.1 プロジェクトの紹介

Gin-vue-admin は、vue と gin に基づいて開発されたフルスタックフロントバックエンド分離開発基盤プラットフォームであり、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 は、バグや Feature の提出、および設計関連のコンテンツのみを目的としており、その他のコンテンツは直接閉じられる可能性があります。使用中に質問がある場合は、Slack または Gitter でお問い合わせください。
issue を送信する前に、関連するコンテンツが提示されたかどうかを確認します。

1.2.2 Pull Request 仕様

まず、自分のプロジェクトの下にコピーを fork し、倉庫の下にブランチを直接構築しないでください。
commit 情報は、などの形式で入力する必要があります。
```
[文件名]: 描述信息
```
```
README.md: fix xxx bug
```
バグを修正する場合は、PR に説明を入力します。
マージコードには、review 後 approve と review の 2 人のメンテナが関与する必要があります。

2. 使用上の注意

- node版本 > v16.8.3
- golang版本 >= v1.16
- IDE推荐：Goland

2.1 server プロジェクト

などの編集ツールを使用して、gin-vue-admin ルートを開く前に server ディレクトリを開きます

Goland

# 克隆项目
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

# 安装依赖
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

上記のコマンドを実行すると、docs フォルダにサーバーディレクトリが表示され、8888 つのファイルが更新され、go サービスが開始されると、ブラウザで http://localhost:<>/swagger/index.html を入力すると、swagger ドキュメントが表示されます
docs.go
swagger.json
swagger.yaml

2.4 VSCode ワークスペース

2.4.1 開発

開いているルートディレクトリの下のワークスペースファイルを使用すると、サイドバーに 3 つの仮想ディレクトリが表示されます、、。

VSCode

gin-vue-admin.code-workspace

backend

frontend

root

2.4.2 実行/デバッグ

実行とデバッグには、、、。の 3 つの task も表示されます。実行は、フロントバックエンドプロジェクトを同時に開始できます。

Backend

Frontend

Both (Backend & Frontend)

Both (Backend & Frontend)

2.4.3 settings

ワークスペースプロファイルには、独自のgoツール環境変数に使用されるフィールドがあります。また、マルチgoバージョンのシステムでは、実行バージョンを指定できます。

go.toolsEnvVars

VSCode

gopath

go.goroot

    "go.gopath": null,
    "go.goroot": null,

3. 技術選択

フロントエンド: Vue ベースの Element を使用して、基になるページを構築します。
バックエンド: go 言語で記述された Web フレームワークである Gin を使用して、基になる restful スタイル API をすばやく構築します。
データベース: > (5.7) バージョンデータベースエンジン InnoDB を使用して、gorm を使用してデータベースの基本的な操作を実装します。
```
MySql
```
キャッシュ: 実装を使用して、現在アクティブなユーザーのトークンを記録し、マルチポイントログイン制限を実装します。
```
Redis
```
```
jwt
```
API ドキュメント: 使用してオートメーションドキュメントを作成します。
```
Swagger
```
プロファイル: fsnotify と viper を使用してフォーマットされたプロファイルを実装します。
```
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
        ├── 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 -- 初始化数据  
        |   |   |   ├── index -- 新版本
        |   |   |   ├── 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

5.主な機能

権限管理: 基になる権限管理と実装されたアクセス許可管理。
```
jwt
```
```
casbin
```
ファイルアップロードダウンロード:ベース、、ファイルアップロード操作を実現します(各プラットフォームへの独自のアプリケーション対応または対応を開発してください)。
```
七牛云
```
```
阿里云
```
```
腾讯云
```
```
token
```
```
key
```
ページングフットプリント: フロントエンドは、ページングメソッド呼び出しをカプセル化します。
```
mixins
```
```
mixins
```
ユーザー管理: システム管理者は、ユーザーロールとロールのアクセス許可を割り当てます。
ロール管理: 異なる api アクセス許可とメニューアクセス許可をロールに割り当てることができるアクセス許可制御のプライマリオブジェクトを作成します。
メニュー管理: ユーザーの動的メニュー構成を実装し、異なるロールで異なるメニューを実装します。
api 管理: ユーザーが呼び出すことができる api インターフェイスのアクセス許可が異なります。
構成管理: プロファイルはフォアグラウンドで変更できます (オンラインエクスペリエンスサイトではこの機能は使用できません)。
条件検索: 条件検索の例を増やします。
restful サンプル: ユーザー管理モジュールのサンプル API を参照できます。
- フロントエンドファイルリファレンス: web/src/view/superAdmin/api/api.vue
- バックグラウンドファイルリファレンス: server/router/sys_api.go
マルチサインオンの制限: true に変更する必要があります (Redis と Config の Redis パラメータを自分で構成する必要があります。
```
config.yaml
```
```
system
```
```
use-multipoint
```
シャード長伝: ファイルシャードアップロードと大ファイルシャードアップロード機能の例を提供します。
フォームビルダー: フォームビルダーは @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://www.bilibili.com/video/BV1kv4y1g7nT

7. 联系方式

7.1 技术群

QQ交流群：622360840

QQグループ

WeChatコミュニケーショングループ

微信

WeChat を追加し、「gin-vue-admin エクスチェンジに参加する」

私たちについて

8. 貢献者

gin-vue-adminにご貢献いただき、ありがとうございます。

9. 寄付

このプロジェクトが役に立ったと思われる場合は、著者に飲み物🍹を頼んで私を注文してください

10. 業務上の注意

このプロジェクトを商業目的で使用する場合は、Apache2.0 契約に従い、作成者のテクニカルサポートステートメントを保持します。

(基于vite+vue3+gin搭建的开发基础平台（支持TS,JS混用），集成jwt鉴权，权限管理，动态路由，显隐可控组件，分页封装，多点登录拦截，资源权限，上传下载，代码生成器，表单生成器等开发必备功能。)

異なるバージョン

プロジェクトドキュメント

重要なヒント

1. 基本紹介

1.1 プロジェクトの紹介

1.2 貢献ガイド

1.2.1 Issue 仕様

1.2.2 Pull Request 仕様

2. 使用上の注意

2.1 server プロジェクト

2.2 Webプロジェクト

2.3 swagger オートメーション API ドキュメント

2.3.1 swagger をインストールします

(1)外国のウェブサイトにアクセスできる

(2)外国サイトへのアクセスができません

2.3.2 API ドキュメントを生成します

2.4 VSCode ワークスペース

2.4.1 開発

2.4.2 実行/デバッグ

2.4.3 settings

3. 技術選択

4. プロジェクトアーキテクチャ

4.1 システムアーキテクチャ図

4.2 フロントエンド詳細設計図 (プロバイダー: baobeisuper)

4.3 ディレクトリ構造

5.主な機能

6. ナレッジベース

6.1 团队博客

6.2 教学视频

7. 联系方式

7.1 技术群

QQ交流群：622360840

WeChatコミュニケーショングループ

私たちについて

8. 貢献者

9. 寄付

10. 業務上の注意

About

Author：flipped-aurora

(基于vite+vue3+gin搭建的开发基础平台（支持TS,JS混用），集成jwt鉴权，权限管理，动态路由，显隐可控组件，分页封装，多点登录拦截，资源权限，上传下载，代码生成器，表单生成器等开发必备功能。)

異なるバージョン

プロジェクト ドキュメント

重要なヒント

1. 基本紹介

1.1 プロジェクトの紹介

1.2 貢献ガイド

1.2.1 Issue 仕様

1.2.2 Pull Request 仕様

2. 使用上の注意

2.1 server プロジェクト

2.2 Webプロジェクト

2.3 swagger オートメーション API ドキュメント

2.3.1 swagger をインストールします

(1)外国のウェブサイトにアクセスできる

(2)外国サイトへのアクセスができません

2.3.2 API ドキュメントを生成します

2.4 VSCode ワークスペース

2.4.1 開発

2.4.2 実行/デバッグ

2.4.3 settings

3. 技術選択

4. プロジェクトアーキテクチャ

4.1 システムアーキテクチャ図

4.2 フロントエンド詳細設計図 (プロバイダー: baobeisuper)

4.3 ディレクトリ構造

5.主な機能

6. ナレッジベース

6.1 团队博客

6.2 教学视频

7. 联系方式

7.1 技术群

QQ交流群：622360840

WeChatコミュニケーショングループ

私たちについて

8. 貢献者

9. 寄付

10. 業務上の注意

About

Author：flipped-aurora

プロジェクトドキュメント