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
اسم المستخدم التجريبي: admin
اختبار كلمة المرور: 123456
مرحبًا، أولاً، شكرًا لك على استخدام gin-vue-admin.
Gin-vue-admin عبارة عن مجموعة من أطر العمل مفتوحة المصدر مع بنية فصل للواجهة الأمامية والخلفية المعدة للبحث والتطوير السريع، وهي مصممة لبناء مشاريع صغيرة ومتوسطة الحجم بسرعة.
لا يمكن فصل نمو Gin-vue-admin عن دعم الجميع. إذا كنت على استعداد للمساهمة بالكود أو تقديم اقتراحات لـ gin-vue-admin، فيرجى قراءة المحتوى التالي.
تُستخدم المشكلات فقط لإرسال الأخطاء أو الميزات، وقد يتم إغلاق المحتوى الآخر المتعلق بالتصميم مباشرةً.
قبل إرسال أي مشكلة، يرجى البحث لمعرفة ما إذا كان قد تم طرح المحتوى ذي الصلة.
يرجى تفرع نسخة لمشروعك الخاص أولاً، ولا تقم بإنشاء فرع أسفل المستودع مباشرة.
يجب ملء معلومات الالتزام على شكل [文件名]: 描述信息، مثل README.md: fix xxx bug .
إذا كنت تقوم بإصلاح الخلل، يرجى تقديم معلومات الوصف في العلاقات العامة.
يتطلب دمج الكود مشاركة اثنين من المشرفين: أحدهما يقوم بالمراجعة والموافقة، والآخر يقوم بالمراجعة مرة أخرى، ويمكن دمجهما بعد اجتياز المراجعة.
- 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 go generator# Run go run.
# أدخل مجلد الويب cd web # تثبيت التبعيات npm install # ابدأ مشروع الويب npm run server
اذهب لتثبيت github.com/swaggo/swag/cmd/swag@latest
خادم القرص المضغوط غنيمة الحرف الأول
بعد تنفيذ الأمر أعلاه، ستظهر الملفات الثلاثة
docs.goوswagger.jsonوswagger.yamlالموجودة في مجلد المستندات في دليل الخادم. بعد بدء خدمة go، أدخل http://localhost:8888/swagger في ملف browser./index.html لعرض وثائق التفاخر
استخدم VSCode لفتح ملف مساحة العمل gin-vue-admin.code-workspace في الدليل الجذر. يمكنك رؤية ثلاثة أدلة افتراضية في الشريط الجانبي: backend ، frontend ، root .
يمكنك أيضًا رؤية ثلاث مهام في التشغيل وتصحيح الأخطاء: Backend و Frontend و Both (Backend & Frontend) . يمكن أن يؤدي تشغيل Both (Backend & Frontend) إلى بدء مشاريع الواجهة الأمامية والأمامية في نفس الوقت.
يوجد حقل go.toolsEnvVars في ملف تكوين مساحة العمل، وهو متغير بيئة أداة go المستخدم لـ VSCode نفسه. بالإضافة إلى ذلك، في الأنظمة ذات إصدارات go المتعددة، يمكنك تحديد الإصدار قيد التشغيل من خلال gopath و go.goroot .
"go.gopath": فارغ،"go.goroot": فارغ،
الواجهة الأمامية: استخدم العنصر المستند إلى Vue لإنشاء الصفحات الأساسية.
الواجهة الخلفية: استخدم Gin لإنشاء واجهة برمجة تطبيقات أساسية ذات نمط مريح بسرعة. Gin هو إطار عمل ويب مكتوب بلغة go.
قاعدة البيانات: استخدم محرك قاعدة بيانات الإصدار 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
قيود تسجيل الدخول متعدد النقاط: تحتاج إلى تغيير use-multipoint في system إلى صحيح في config.yaml (تحتاج إلى تكوين معلمات 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) فيديو تعليمي أساسي لجولانج
بيليبيلي: 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
