spa starter kit

مجموعة أدوات بدء تطبيق الصفحة الواحدة من Codecast

مجموعة أدوات بدء تطبيق صفحة واحدة ذات رأي عالٍ مبنية على Vue.js وLaravel.

تحتوي هذه الحزمة على مشروعين منفصلين ليكونا بمثابة نقطة بداية لتطبيق صفحة واحدة: مشروع Vue.js (تم إنشاؤه باستخدام قالب vue-cli + webpack) ومشروع Laravel 5.3.

إنها ليست مجرد مشاريع تم إنشاؤها حديثًا ولكنها تطبيق يعمل بكامل طاقته ويمكن تعديله وتوسيعه ليصبح تطبيقك الخاص.

تجريبي

يمكن العثور على العرض التوضيحي المباشر على https://spa.codecasts.rocks/.

سمات

1. جانب العميل
   • تم إنشاء مشروع Vue.js 2.0 باستخدام قالب vue-cli + webpack
   • إدارة الدولة المركزية مع Vuex
   • إدارة الطريق باستخدام Vue-router
   • المصادقة مع JWT
   • حافظ على تسجيل دخول المستخدم باستخدام المعلومات المخزنة محليًا
   • طلبات HTTP مع Axios
   • ESLint مع AirBNB مسبقا
   • تم دمج ترقيم الصفحات مع LengthAwarePaginator الخاص بـ Laravel
   • التنبيهات وتنبيهات التأكيد المقدمة من SweetAlert
2. جانب الخادم
   • لارافيل 5.3
   • المصادقة مع JWT
   • كسورية
   • خدمة الويب RESTful مع Dingo (مخطط لها)

المتطلبات الأساسية

تأكد من تثبيت Node and Yarn (أحدث الإصدارات) بالإضافة إلى PHP 7 و MySQL .

تثبيت

استنساخ

ستقوم هذه الأوامر بتنزيل المستودع وإعداده لك.

 git clone --depth 1 -b master [email protected]:codecasts/spa-starter-kit.git
cd spa-starter-kit
rm -rf ./.git/
git init
git add --all
git commit -m "init"

يثبت

1. جانب العميل - هذا مشروع Vue.js تم إنشاؤه باستخدام vue-cli
   • مع cd client && yarn && yarn run dev .
2. جانب الخادم - هذا مشروع Laravel 5.3
   • مع المحطة:
     • انتقل إلى مجلد خدمة الويب ثم:
     • composer install لتثبيت Laravel وحزم الطرف الثالث
     • touch database/database.sqlite لإنشاء ملف قاعدة بيانات فارغ
     • cp .env.example .env لتكوين التثبيت
     • php artisan key:generate بإنشاء مفتاح فريد للمشروع
     • php artisan jwt:secret لإنشاء مفتاح فريد للمشروع
     • php artisan migrate لإنشاء جميع الجداول
     • php artisan db:seed لملء الجداول ببيانات مزيفة
     • php artisan serve على خدمة التطبيق على المضيف المحلي:8000

الاستخدام

1. جانب العميل
   • سيكون طلبك متاحًا على http://localhost:8080
2. جانب الخادم
   • نقطة نهاية واجهة برمجة التطبيقات هي http:// localhost:8000/api

اختبار

انتقل إلى مجلد خدمة الويب وقم بتشغيل البرنامج النصي لاختبار الملحن

$ composer test 

أشياء تستحق الذكر

1. تتم معالجة الأخطاء عالميًا من خلال الاستفادة من أجهزة اعتراض Axios. ولكن لا يزال بإمكانك .catch() أخطاء داخل المكونات لتنفيذ الإجراءات المتعلقة بهذا النطاق. راجع /client/src/plugins/http.js؛

2. بنفس الطريقة التي تعيش بها رسائل الخطأ في مكون واحد واحد (/client/src/modules/general/alerts.vue) ويتم التحكم في رؤيتها من خلال خاصية Vuex. لذا، فإن إظهار/إخفاء الرسائل هو مجرد مسألة إرسال إجراء Vuex من داخل أي مكون؛

3. يتم أيضًا التحكم في القرص الدوار الذي يتم عرضه أثناء طلبات الخادم (انظر أعلى اليمين بالقرب من تعريف المستخدم) بواسطة خاصية Vuex. إجراء إظهار/إخفاء هو نفس الإجراء الموضح في البند 2 أعلاه؛

4. تعيش المسارات ووحدات Vuex بالقرب من الوحدات التي تعمل من أجلها. ابحث دائمًا عن Routes.js وstore.js داخل دليل الوحدة النمطية. راجع /client/src/modules/categories؛

5. هام : تم تعديل مشروع Laravel الموجود في دليل خدمة الويب بما يتجاوز إضافة المسارات ووحدات التحكم. على سبيل المثال: تم تعديل webservice/app/Exceptions/Handler.php من نسخته الأصلية لإرجاع كافة الاستثناءات إلى العميل، وليس فقط HttpExceptions. هناك تغييرات أخرى موجودة أيضًا. لذا ننصحك دائمًا باستخدام هذا المشروع لبناء مشروعك الخاص، بدلاً من نسخ وحدات التحكم والمسارات إلى مشروع جديد.

المساهمة

1. شوكة ذلك!
2. قم بإنشاء فرع الميزات الخاص بك من التطوير : git checkout -b feature/my-new-feature
3. اكتب الكود الخاص بك. قم بالتعليق على الكود الخاص بك.
4. تنفيذ تغييراتك: git commit -am 'Add some feature'
5. ادفع إلى الفرع: git push origin feature/my-new-feature
6. تقديم طلب سحب لتطوير الفرع :D

الاعتمادات

فابيو فيدوفيلي والمساهمين المتفانين.

رخصة

مرخص بموجب ترخيص MIT.