الصفحة الرئيسية>PHP كود المصدر>فئات أخرى
تنزيل

ربيع بقية المشرف

مقدمة

هذا المشروع عبارة عن مشروع أمامي لمكتب الإدارة يعتمد على Vue وElementUI، ويتم استخدامه جنبًا إلى جنب مع Spring-Rest Backend، ويأتي رمز إطار العمل من Vue-Element-Admin، مع إجراء بعض التغييرات على أساسه. تم تحسين وظيفة إدارة الحقوق بشكل أساسي. انقر هنا للوصول إلى العرض التوضيحي عبر الإنترنت .

تحسين

  • يتم إنشاء أذونات القائمة تلقائيًا بناءً على تكوين التوجيه ومزامنتها مع قاعدة البيانات الخلفية بواسطة المسؤول؛

  • يمكنك إضافة وتعديل وحذف أذونات الأزرار ضمن أذونات القائمة المتزامنة؛

  • بالإضافة إلى أذونات الأزرار، يتم إنشاء البيانات التعريفية لأذونات القائمة وأذونات الواجهة تلقائيًا بواسطة الواجهة الأمامية والخلفية على التوالي. حتى إذا تم مسح جميع سجلات قاعدة البيانات، يحتاج المسؤول فقط إلى مزامنتها مرة أخرى، دون إدراج سجلات الجدول يدويًا؛

  • عند إضافة أذونات الزر، يتم إنشاء البادئة تلقائيًا ويتم ملء الأجزاء الضرورية فقط لمنع ارتباك التنسيق؛

  • تمت إضافة الوظيفة لربط أذونات القائمة وأذونات الأزرار بأذونات الواجهة فقط.

  • عند مصادقة عناصر الصفحة، استخدم ثوابت التعداد لتجنب استخدام سلاسل الأذونات مباشرة لتسهيل الصيانة؛

  • تحديد التسلسل الهرمي لفئة واجهة برمجة التطبيقات (API) ليكون متسقًا مع التسلسل الهرمي لفئة واجهة الخلفية للتخلص من التكرار وتحسين إعادة استخدام التعليمات البرمجية؛

  • إصلاح الخلل في مكون el-scrollbar : عندما يتم تصغير المتصفح إلى حد معين، سيتم كشف شريط التمرير المخفي الأصلي، وكلما زادت نسبة التخفيض، أصبحت الظاهرة أكثر وضوحًا.

إعداد بيئة التطوير

إعداد بيئة Node.js

يوصى باستخدام الإصدار 12 لإصدار Node.js ويبدو أن الإصدارات الأخرى جيدة.

يوصى باستخدام nvm لإدارة إصدارات Node.js في Linux وMacOS. لا يدعم nvm Windows، ولكن يمكنك استخدام نوافذ nvm البديلة.

خذ nvm-windows ضمن Windows كمثال (يعمل تحت git bash): 

 # 设置 nvm 下载 node 和 npm 的镜像地址（直接访问外网太慢）
$ nvm node_mirror https://npm.taobao.org/mirrors/node/
$ nvm npm_mirror https://npm.taobao.org/mirrors/npm/

# 设置 npm 下载包的镜像地址
$ npm config set registry https://registry.npm.taobao.org

# 查看可用的 Node.js版本
$ nvm list available

# 挑选一个最新的 v12 的 LTS 版本进行安装
$ nvm install 12.20.1
$ nvm use 12.20.1

# 查看已经安装的所有 Node.js 版本
$ nvm list
# 切换希望使用的版本
$ nvm use < nodeVersion >

# 查看当前的 Node.js 版本 和 npm 版本
$ node -v
$ npm -v

الخروج من المشروع وتشغيله

ملاحظة: قبل تشغيل الواجهة الأمامية لوحدة التحكم الإدارية، من الأفضل تشغيل خلفية الخادم أولاً. 

$ git clone https://github.com/bianyun1981/spring-rest-admin.git
$ cd spring-rest-admin
$ npm install

ملاحظة: إذا تم الإبلاغ عن خطأ عند تنفيذ أمر npm install ، وكانت رسالة الخطأ هي npm install npm ERR! Failed at the [email protected] install script. 

$ npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

إذا تم الإبلاغ عن أخطاء أخرى أثناء مرحلة تثبيت npm، فقد يكون ذلك بسبب عدم إمكانية تنزيل بعض الحزم من محطة مرآة Taobao ويجب تنزيلها مباشرة من بعض عناوين الشبكة الخارجية التي لا يمكن الوصول إليها، ومع ذلك، يمكنك محاولة التنزيل قم بإضافة تكوين الوكيل حاول مرة أخرى لاحقًا. 

$ npm config set proxy http://username:password@host:port
$ npm config set https-proxy http://username:password@host:port

إذا تم تنفيذ npm install بنجاح ولم يتم الإبلاغ عن أي أخطاء، فيمكنك متابعة التشغيل. 

$ npm run serve

بعد لحظة، سيتم فتح المتصفح تلقائيًا والانتقال إلى العنوان http://localhost:9527/login حدد مستخدمًا مدمجًا لتسجيل الدخول مباشرة.

ملحوظة: يجب تشغيل خلفية الخادم قبل أن تتمكن من تسجيل الدخول بنجاح.

ملف تكوين البيئة

يدعم vue-element-admin تكوينات البيئة المتعددة. تنسيق اسم ملف تكوين البيئة هو .env.[环境名] . إذا كانت معلومات تكوين البيئة هذه تحتاج إلى استخدامها محليًا فقط، فقم بإضافة اللاحقة .local إلى نهاية الملف. اسم الملف، بحيث لا يتم تحميل ملف التكوين إلى المستودع بواسطة git ، وسيتم الاحتفاظ به محليًا فقط.

ملاحظة: بالإضافة إلى تكوين بيئة التطوير .env.development و .env.development.local ، تحتاج ملفات تكوين البيئة الأخرى إلى تعيين NODE_ENV = production ، ويجب أن يتوافق اسم البيئة ENV مع الجزء الموجود بين .env و .local بالإضافة إلى ذلك، يجب أيضًا تعديل بادئة عنوان استدعاء الواجهة VUE_APP_BASE_API .

ملاحظة: إذا كنت تريد تعريف متغيرات البيئة الأخرى في ملف التكوين، فيجب أن تبدأ بـ VUE_APP_ والحصول عليها من خلال process.env.VUE_APP_xxxx في الكود.

نشر الحزمة

ملحوظة: قبل التعبئة، يرجى التأكد من أنه يمكن تنفيذ npm run serve npm install وتشغيل npm بشكل طبيعي دون أخطاء.

أمر التغليف هو: npm run build -- --mode <环境名> في الشكل أعلاه كمثال، أمر التغليف هو: 

$ npm run build -- --mode vm-centos7

بعد تنفيذ الأمر بنجاح، سيكون ملف نتائج التغليف موجودًا في دليل dist.

ملاحظة: يمكن للمكون الإضافي لضغط التعليمات البرمجية compression-webpack-plugin استخدام الإصدار السابق v6 فقط، ولا يمكنه استخدام الإصدار الأحدث v7، وإلا فسيتم الإبلاغ عن خطأ.

بالإضافة إلى ذلك، تم تكوين وضع التوجيه لهذا المشروع كوضع السجل. إذا كنت تريد التشغيل في هذا الوضع، فيجب تكوين nginx وفقًا لذلك (راجع التوجيه باستخدام history.pushState لمزيد من التفاصيل). وفي الوقت نفسه، يجب إضافة التكوين المرتبط بـ gzip (يلزم فقط سطر التكوين هذا): 

 location / {
  gzip_static on ;
  try_files $uri $uri / /index.html;
}
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل