gin vue admin
2024/10/20
Englisch |. Vereinfachtes Chinesisch
Online-Dokumentation: https://www.gin-vue-admin.com
Initialisierung
Von der Umgebung bis zum Bereitstellungs-Anleitungsvideo
Entwicklungslehre (Mitwirkende: LLemonGreen und Fann)
Kommunikationsgemeinschaft
Plug-in-Markt
1. Dieses Projekt verfügt über Dokumentation und detaillierte Video-Tutorials vom Start über die Entwicklung bis zur Bereitstellung.
2. Für dieses Projekt müssen Sie über gewisse Kenntnisse in Golang und Vue verfügen
3. Sie können alle Vorgänge über unsere Tutorials und Dokumente durchführen, daher bieten wir keine kostenlosen technischen Dienste mehr an. Wenn Sie Dienste benötigen, bieten Sie bitte kostenpflichtigen Support an.
4. Wenn Sie dieses Projekt für kommerzielle Zwecke nutzen, halten Sie sich bitte an die Apache2.0-Vereinbarung und bewahren Sie die Erklärung des Autors zum technischen Support auf. Sie müssen die folgenden Informationen zur Urheberrechtserklärung sowie die in Protokollen und Code enthaltenen Informationen zur Urheberrechtserklärung aufbewahren. Die erforderlichen gespeicherten Informationen sind textlicher Natur und haben keinen Einfluss auf geschäftliche Inhalte. Wenn Sie sich für eine kommerzielle Nutzung entscheiden [Geschäftsaktivitäten, die Einnahmen generieren, handelt es sich ausschließlich um kommerzielle Nutzungen] oder wenn diese gelöscht werden müssen, erwerben Sie bitte eine Genehmigung.
Gin-vue-admin ist eine auf Vue und Gin basierende Full-Stack-Entwicklungsplattform, die Front- und Back-End trennt. Sie integriert JWT-Authentifizierung, dynamisches Routing, dynamisches Menü, Casbin-Authentifizierung, Formulargenerator, Codegenerator und andere Funktionen viele Beispieldateien, sodass Sie sich mehr auf die Geschäftsentwicklung konzentrieren können.
Online-Vorschau: http://demo.gin-vue-admin.com
Testbenutzername: admin
Testpasswort: 123456
Hallo! Zunächst einmal vielen Dank, dass Sie gin-vue-admin nutzen.
Gin-vue-admin ist eine Reihe von Open-Source-Frameworks mit einer Front-End- und Back-End-Trennarchitektur, die für schnelle Forschung und Entwicklung konzipiert ist. Es ist für die schnelle Erstellung kleiner und mittlerer Projekte konzipiert.
Das Wachstum von Gin-vue-admin kann nicht von der Unterstützung aller getrennt werden. Wenn Sie bereit sind, Code beizutragen oder Vorschläge für gin-vue-admin zu machen, lesen Sie bitte den folgenden Inhalt.
Probleme werden nur zum Einreichen von Fehlern oder Funktionen und designbezogenen Inhalten verwendet. Andere Inhalte können direkt geschlossen werden.
Bevor Sie ein Problem einreichen, suchen Sie bitte nach, ob der relevante Inhalt angesprochen wurde.
Bitte erstellen Sie zunächst eine Kopie in Ihr eigenes Projekt. Erstellen Sie keinen Zweig direkt unter dem Lager.
Die Commit-Informationen sollten in der Form [文件名]: 描述信息ausgefüllt werden, z. B. README.md: fix xxx bug .
Wenn Sie einen Fehler beheben, geben Sie bitte Beschreibungsinformationen in der PR an.
Das Zusammenführen des Codes erfordert die Beteiligung von zwei Betreuern: Eine Person überprüft und genehmigt, die andere überprüft erneut und kann nach bestandener Überprüfung zusammengeführt werden.
- node版本 > v16.8.3 - golang版本 >= v1.22 - IDE推荐：Goland
Verwenden Sie Bearbeitungstools wie Goland , um das Serververzeichnis zu öffnen. Öffnen Sie nicht das Stammverzeichnis von gin-vue-admin.
# Klonen Sie das Projekt git clone https://github.com/flipped-aurora/gin-vue-admin.git# Geben Sie den Serverordner cd server ein# Verwenden Sie go mod und installieren Sie das go-Abhängigkeitspaket go generic# Führen Sie go run aus.
# Geben Sie den Webordner cd web ein. # Installieren Sie die Abhängigkeiten. NPM Install. Starten Sie das Webprojekt. NPM Run Serve
Installieren Sie github.com/swaggo/swag/cmd/swag@latest
CD-Server Swag-Init
Nach dem Ausführen des obigen Befehls werden die drei Dateien
docs.go,swagger.jsonundswagger.yamlim Ordner docs im Serververzeichnis angezeigt. Geben Sie nach dem Starten des go-Dienstes http://localhost:8888/swagger ein Browser. /index.html, um die Swagger-Dokumentation anzuzeigen
Verwenden Sie VSCode , um die Arbeitsbereichsdatei gin-vue-admin.code-workspace im Stammverzeichnis zu öffnen. In der Seitenleiste werden drei virtuelle Verzeichnisse angezeigt: backend , frontend , root .
Außerdem können Sie beim Ausführen und Debuggen drei Aufgaben sehen: Backend , Frontend , Both (Backend & Frontend) . Wenn Sie Both (Backend & Frontend) ausführen, können Sie die Frontend- und Frontend-Projekte gleichzeitig starten.
In der Arbeitsbereichskonfigurationsdatei gibt es das Feld go.toolsEnvVars , bei dem es sich um die Go-Tool-Umgebungsvariable handelt, die für VSCode selbst verwendet wird. Darüber hinaus können Sie in Systemen mit mehreren Go-Versionen die laufende Version über gopath und go.goroot angeben.
„go.gopath“: null, „go.goroot“: null,
Frontend: Verwenden Sie Vue-basiertes Element, um grundlegende Seiten zu erstellen.
Backend: Verwenden Sie Gin, um schnell eine grundlegende API im erholsamen Stil zu erstellen. Gin ist ein in der Go-Sprache geschriebenes Web-Framework.
Datenbank: Verwenden Sie MySql > (5.7)-Version der Datenbank-Engine InnoDB und verwenden Sie gorm, um grundlegende Vorgänge in der Datenbank zu implementieren.
Caching: Verwenden Sie Redis , um das jwt -Token des aktuell aktiven Benutzers aufzuzeichnen und Mehrpunkt-Anmeldebeschränkungen zu implementieren.
API-Dokumentation: Verwenden Sie Swagger , um Automatisierungsdokumentation zu erstellen.
Konfigurationsdatei: Verwenden Sie fsnotify und viper, um die Konfigurationsdatei im yaml -Format zu implementieren.
Protokollierung: Verwenden Sie zap, um die Protokollierung zu implementieren.
├── 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
Berechtigungsverwaltung: Berechtigungsverwaltung basierend auf jwt und casbin .
Datei-Upload und -Download: Implementieren Sie Datei-Upload-Vorgänge basierend auf七牛云,阿里云und腾讯云(entwickeln Sie bitte Ihre eigene Anwendung für den entsprechenden token oder entsprechenden key auf jeder Plattform).
Paging-Kapselung: Das Frontend verwendet mixins um Paging zu kapseln, und die Paging-Methode ruft nur mixins auf.
Benutzerverwaltung: Der Systemadministrator weist Benutzerrollen und Rollenberechtigungen zu.
Rollenverwaltung: Erstellen Sie das Hauptobjekt für die Berechtigungssteuerung und weisen Sie Rollen verschiedene API-Berechtigungen und Menüberechtigungen zu.
Menüverwaltung: Realisieren Sie die dynamische Menükonfiguration des Benutzers und realisieren Sie verschiedene Menüs für verschiedene Rollen.
API-Verwaltung: Verschiedene Benutzer haben unterschiedliche Berechtigungen für die API-Schnittstellen, die sie aufrufen können.
Konfigurationsverwaltung: Konfigurationsdateien können an der Rezeption geändert werden (diese Funktion ist auf der Online-Erlebnisseite nicht verfügbar).
Bedingte Suche: Fügen Sie Beispiele für die bedingte Suche hinzu.
Beruhigendes Beispiel: Sie können auf die Beispiel-API im Benutzerverwaltungsmodul verweisen.
Front-End-Dateireferenz: web/src/view/superAdmin/api/api.vue
Hintergrunddateireferenz: server/router/sys_api.go
Multipoint-Anmeldebeschränkungen: Sie müssen use-multipoint in system in config.yaml auf „true“ ändern (Sie müssen Redis und Redis-Parameter in Config selbst konfigurieren. Bitte melden Sie während der Testphase rechtzeitig etwaige Fehler).
Mehrteiliger Upload: Bietet Beispiele für den mehrteiligen Datei-Upload und den mehrteiligen Upload großer Dateien.
Formularersteller: Formularersteller mit Hilfe von @Variant Form.
Codegenerator: grundlegende Hintergrundlogik und einfacher Quarkcodegenerator.
https://www.yuque.com/flipped-aurora
Es sind Lehrvideos zum Front-End-Framework enthalten. Wenn Sie glauben, dass das Projekt für Sie hilfreich ist, können Sie meinen persönlichen WeChat hinzufügen: shouzi_1994. Sie können gerne wertvolle Anfragen stellen.
(1) Schritt-für-Schritt-Anleitungsvideo
https://www.bilibili.com/video/BV1Rg411u7xH/
(2) Einführung in die Anpassung der Back-End-Verzeichnisstruktur und deren Verwendung
https://www.bilibili.com/video/BV1x44y117TT/
(3) Golang-Grundlehrvideo
Bilibili: https://space.bilibili.com/322210472/channel/detail?cid=108884
(4) Grundlehre des Gin-Frameworks
Bilibili: https://space.bilibili.com/322210472/channel/detail?cid=126418&ctype=0
(5) Einführungsvideo zur Gin-Vue-Admin-Versionsaktualisierung
Bilibili: https://www.bilibili.com/video/BV1kv4y1g7nT
