gin vue admin
2024/10/20
英語 | 簡体字中国語
オンラインドキュメント: https://www.gin-vue-admin.com
初期化
環境から導入までの説明ビデオ
開発指導 (寄稿者: LLemonGreen と Fann)
コミュニケーションコミュニティ
プラグイン市場
1. このプロジェクトには、スタートアップから開発、展開までのドキュメントと詳細なビデオ チュートリアルが含まれています。
2. このプロジェクトでは、golang と vue の一定の基礎が必要です
3. すべての操作はチュートリアルとドキュメントを通じて完了できるため、無料の技術サービスは提供されなくなりました。サービスが必要な場合は、有料サポートをご利用ください。
4. このプロジェクトを商業目的で使用する場合は、Apache2.0 契約に従い、作成者のテクニカル サポート ステートメントを保管してください。ログやコードに含まれる著作権記述情報に加えて、次の著作権記述情報も保持する必要があります。必要な保持情報はコピーライティングの性質のものであり、商業的に使用することを決定した場合（収益を生み出す事業活動はすべて商業利用です）、または削除する必要がある場合は、承認を購入してください。
gin-vue-admin は、vue と gin をベースとしたフロントエンドとバックエンドを分離したフルスタック開発プラットフォームで、jwt 認証、動的ルーティング、動的メニュー、casbin 認証、フォームジェネレーター、コードジェネレーターなどの機能を統合して提供します。多くの機能を備えたサンプル ファイルにより、ビジネス開発により多くの時間を集中できます。
オンライン プレビュー: http://demo.gin-vue-admin.com
テストユーザー名: 管理者
テストパスワード: 123456
こんにちは! まず、gin-vue-admin をご利用いただきありがとうございます。
Gin-vue-admin は、迅速な研究開発のために準備されたフロントエンドとバックエンドの分離アーキテクチャを備えたオープンソース フレームワークのセットで、小規模および中規模のプロジェクトを迅速に構築できるように設計されています。
Gin-vue-admin の成長は皆様のサポートから切り離すことはできません。コードを提供したり、gin-vue-admin に提案を提供していただける場合は、次の内容をお読みください。
問題はバグまたは機能を送信するためにのみ使用され、その他のコンテンツは直接閉じられる場合があります。
問題を送信する前に、関連するコンテンツが提起されているかどうかを検索して確認してください。
最初にコピーを独自のプロジェクトにフォークしてください。ウェアハウスの直下にブランチを作成しないでください。
コミット情報は[文件名]: 描述信息( README.md: fix xxx bugの形式で入力する必要があります。
バグを修正している場合は、PR に説明情報を提供してください。
コードをマージするには、2 人のメンテナの参加が必要です。1 人がレビューして承認し、もう 1 人が再度レビューし、レビューに合格した後にマージできます。
- node版本 > v16.8.3 - golang版本 >= v1.22 - IDE推荐：Goland
Golandなどの編集ツールを使用してサーバー ディレクトリを開きます。 gin-vue-admin ルート ディレクトリは開かないでください。
# プロジェクトのクローンを作成します。 git clone https://github.com/flipped-aurora/gin-vue-admin.git# サーバー フォルダーに入ります。 cd server# go mod を使用し、go 依存関係パッケージをインストールします。 gogenerate# go run を実行します。
# Web フォルダーに入ります cd web # 依存関係をインストールします npm install # Web プロジェクトを開始します npm runserve
github.com/swaggo/swag/cmd/swag@latest をインストールしてください
CDサーバー 盗品の初期化
上記のコマンドを実行すると、 docs フォルダー内の 3 つのファイル
docs.go、swagger.json、およびswagger.yamlがサーバー ディレクトリに表示されます。 go サービスを開始した後、ディレクトリに http://localhost:8888/swagger と入力します。ブラウザー /index.html で Swagger ドキュメントを表示します。
VSCode使用して、ルート ディレクトリにあるワークスペース ファイルgin-vue-admin.code-workspaceを開きます。サイドバーに 3 つの仮想ディレクトリ ( backend 、 frontend 、 root ) が表示されます。
実行中とデバッグ中に、 Backend 、 Frontend 、 Both (Backend & Frontend) 3 つのタスクも表示されます。 Both (Backend & Frontend)を実行すると、フロントエンドとフロントエンドのプロジェクトを同時に開始できます。
ワークスペース構成ファイルにはgo.toolsEnvVarsフィールドがあります。これは、 VSCode自体に使用される go ツール環境変数です。さらに、複数の go バージョンがあるシステムでは、 gopathおよびgo.gorootを通じて実行中のバージョンを指定できます。
"go.gopath": null、"go.goroot": null、
フロントエンド: Vue ベースの要素を使用して基本的なページを構築します。
バックエンド: 基本的な RESTful スタイル API を迅速に構築するには、Gin を使用します。Gin は、Go 言語で書かれた Web フレームワークです。
データベース: MySql > (5.7) バージョンのデータベース エンジン InnoDB を使用し、gorm を使用してデータベースの基本操作を実装します。
キャッシュ: Redis使用して、現在のアクティブ ユーザーのjwtトークンを記録し、マルチポイント ログイン制限を実装します。
API ドキュメント: Swagger使用して自動化ドキュメントを作成します。
構成ファイル: fsnotify と viper を使用して、 yaml形式で構成ファイルを実装します。
ロギング: zap を使用してロギングを実装します。
├── 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
権限管理: jwtとcasbinに基づく権限管理。
ファイルのアップロードとダウンロード:七牛云、阿里云、および腾讯云に基づいてファイル アップロード操作を実装します (各プラットフォームで対応するtokenまたは対応するkeyに対応する独自のアプリケーションを開発してください)。
ページングのカプセル化: フロントエンドはmixins使用してページングをカプセル化し、ページング メソッドはmixinsを呼び出すだけです。
ユーザー管理: システム管理者は、ユーザーの役割と役割の権限を割り当てます。
ロール管理: 権限制御用のメイン オブジェクトを作成し、さまざまな API 権限とメニュー権限をロールに割り当てます。
メニュー管理: ユーザーの動的なメニュー構成を実現し、異なる役割に応じた異なるメニューを実現します。
API 管理: ユーザーごとに、呼び出すことができる API インターフェイスに対する権限が異なります。
構成管理：フロントデスクにて構成ファイルの変更が可能です（オンライン体験サイトではこの機能は利用できません）。
条件付き検索: 条件付き検索の例を追加します。
残りの例: ユーザー管理モジュールでサンプル API を参照できます。
フロントエンド ファイル参照: web/src/view/superAdmin/api/api.vue
バックグラウンドファイル参照:server/router/sys_api.go
マルチポイント ログインの制限: config.yamlでsystemのuse-multipoint true に変更する必要があります (Config で Redis と Redis パラメーターを自分で設定する必要があります。テスト段階でバグがあればすぐに報告してください)。
マルチパート アップロード: マルチパート ファイルのアップロードと大きなファイルのマルチパート アップロードの例を示します。
フォーム ビルダー: @Variant Form を使用したフォーム ビルダー。
コード ジェネレーター: バックグラウンドの基本ロジックとシンプルなカード コード ジェネレーター。
https://www.yuque.com/flipped-aurora
フロントエンド フレームワークの教育ビデオが含まれています。このプロジェクトが役立つと思われる場合は、私の個人的な WeChat: shouzi_1994 を追加してください。貴重なリクエストをお待ちしております。
(1) ステップバイステップの説明ビデオ
https://www.bilibili.com/video/BV1Rg411u7xH/
(2) バックエンドのディレクトリ構造調整とその使い方の紹介
https://www.bilibili.com/video/BV1x44y117TT/
(3) golang 基礎教則ビデオ
ビリビリ: https://space.bilibili.com/322210472/channel/detail?cid=108884
(4) ジンフレームワークの基礎指導
ビリビリ: https://space.bilibili.com/322210472/channel/detail?cid=126418&ctype=0
(5) gin-vue-admin バージョンアップ紹介動画
ビリビリ: https://www.bilibili.com/video/BV1kv4y1g7nT
