vue commerce lab
1.0.0
يضم هذا المستودع لوحة تحكم تجريبية للتجارة الإلكترونية تعمل كتطبيق عملي لتعلم Laravel وتنفيذه. لقد دعمت هذا باستخدام Laravel Breeze واستخدمت Laravel Valet للتنمية المحلية.
route() ، مما يسمح بإنشاء مسار سهل في مكونات Vue.يعد هذا المشروع بمثابة مثال شامل لأي شخص مهتم بتطوير تطبيقات ويب كاملة الميزات باستخدام هذه التقنيات.
انسخ المستودع (في دليل مواقع Valet الخاص بك):
git clone [email protected]:gregrickaby/vue-commerce-lab.gitتثبيت التبعيات:
composer install && npm install إنشاء ملف .env :
cp .env.example .env إنشاء ملف database.sqlite :
touch database/database.sqliteإنشاء مفتاح التطبيق:
php artisan key:generateتشغيل الترحيل:
php artisan migrate:freshبذرة قاعدة البيانات:
php artisan db:seedاضبط إصدار PHP على 8.3:
valet isolate [email protected]تأمين الموقع:
valet secureبدء خادم التطوير:
npm run devقم بزيارة الموقع: https://vue-commerce-lab.test وقم بتسجيل الدخول باستخدام بيانات الاعتماد التالية:
password توجد النماذج في دليل app/Models . يحتوي كل نموذج على مصنع وبذارة مناظرين في database/factories وأدلة database/seeders .
النماذج مسؤولة عن إدارة بيانات التطبيق. يتلقون المدخلات من وحدة التحكم، ويتحققون من صحتها، ثم يرسلونها إلى قاعدة البيانات.
يستخدم هذا التطبيق Vue وInertia، لذا تكون العروض موجودة في دليل resources/js/pages ويتم توجيهها عبر ملف web.php.
طرق العرض هي المسؤولة عن عرض البيانات للمستخدم. يتلقون البيانات من وحدة التحكم، ثم يقدمونها إلى المتصفح.
توجد وحدات التحكم في دليل app/Http/Controllers . كل وحدة تحكم لديها اختبار مطابق في دليل tests/Feature
وحدات التحكم مسؤولة عن التعامل مع الطلبات وإرجاع الاستجابات. يتلقون مدخلات من المستخدم، ويتحققون من صحتها، ثم يمررونها إلى النموذج.
توجد الطرق في دليل routes . يحتوي ملف web.php على كافة المسارات الخاصة بالتطبيق.
توجد ملفات Vue.js في دليل resources/js .
تتبع بنية الدليل اصطلاحات Laravel القياسية، مع إضافة دليل types لواجهات وأنواع TypeScript، ودليل utils لوظائف الأداة المساعدة والمساعد.
├── resources
│ ├── css
│ │ └── app.css <-- TailwindCSS
│ ├── js
│ │ ├── Components
│ │ │ ├── Atoms
│ │ │ │ ├── ApplicationLogo
│ │ │ │ │ ├── ApplicationLogo.stories.ts <-- Storybook
│ │ │ │ │ ├── ApplicationLogo.test.ts <-- Test
│ │ │ │ │ ├── ApplicationLogo.test.ts.snap <-- Snapshot
│ │ │ │ │ └── ApplicationLogo.vue <-- Vue Component
│ │ │ ├── Molecules
│ │ │ ├── Organisms
│ │ ├── Layouts
│ │ ├── Pages
│ │ │ ├── Customers
│ │ │ │ ├── Create.vue
│ │ │ │ ├── Index.vue
│ │ │ │ └── {customer} <-- Dynamic route
│ │ │ │ ├── Edit.vue
│ │ │ │ └── Show.vue
│ │ ├── app.ts <-- Vue app
│ │ ├── types
│ │ │ └── index.d.ts <-- Typescript interfaces and types
│ │ └── utils
│ │ └── index.ts <-- Utility and helper functions
│ └── views
│ ├── app.blade.php
│ └── welcome.blade.php
المجلدات التي تحتوي على {} حولها هي مسارات ديناميكية. على سبيل المثال، /Pages/Customers/{customers}/Edit.vue هو مسار ديناميكي يطابق أي معرف عميل. يتوفر المعرف بعد ذلك في مكون Edit.vue .
وقد تم تجهيز هذا التطبيق بكل من PHPUnit وVitest للاختبار. كما أنه يستفيد أيضًا من إجراءات Github للتكامل والاختبار المستمر، وStorybook لتطوير مكونات واجهة المستخدم بشكل منفصل.
وقد تم تجهيز هذا التطبيق مع اختبارات PHPUnit لجميع النماذج ووحدات التحكم. توجد اختبارات PHP في الدليل /tests :
├── tests
│ ├── Feature
│ │ ├── Auth
│ │ │ ├── AuthenticationTest.php
│ │ └── ExampleTest.php
│ └── Unit
│ └── ExampleTest.php
تُرجع مسارات Laravel استجابات القصور الذاتي التي تعتمد على وجود مكونات Vue. بدون أصول الواجهة الأمامية المضمنة، لن تكون هذه المكونات متاحة، مما يؤدي إلى فشل في الاختبارات التي تقدم طلبات إلى هذه المسارات. لتجنب ذلك، يجب عليك تشغيل خادم التطوير في الخلفية أثناء إجراء الاختبارات .
ابدأ خادم التطوير:
npm run devقم بإجراء اختبارات PHPUnit باستخدام:
php artisan testقم بإجراء اختبار محدد باستخدام:
php artisan test --filter=CustomerTest تم تجهيز هذا التطبيق بكل من Vitest (عداء الاختبار الرسمي) وVue Test Utils (مكتبة الاختبار الرسمية) لاختبار مكونات Vue. يجب وضع الاختبارات بجانب المكون وتسميتها ComponentName.test.ts :
├── resources
│ ├── js
│ │ ├── Components
│ │ │ ├── Atoms
│ │ │ │ ├── ApplicationLogo
│ │ │ │ │ ├── ApplicationLogo.stories.ts <-- Storybook
│ │ │ │ │ ├── ApplicationLogo.test.ts <-- Test
│ │ │ │ │ ├── ApplicationLogo.test.ts.snap <-- Snapshot
│ │ │ │ │ └── ApplicationLogo.vue <-- Vue Component
يمكنك إجراء الاختبارات باستخدام:
npm run testسيقوم Vitest بإجراء الاختبارات في وضع المراقبة، حتى تتمكن من إجراء تغييرات على المكون ورؤية النتائج في الوقت الفعلي.
تتم كتابة اختبارات المكونات بلغة TypeScript وتستخدم واجهة برمجة تطبيقات Vitest للتأكيدات. هنا مثال:
import ApplicationLogo from '@/Components/Atoms/ApplicationLogo/ApplicationLogo.vue'
import { mount } from '@vue/test-utils'
import { describe , expect , test } from 'vitest'
/**
* Define a test suite.
*
* @see https://vitest.dev/api/#describe
*/
describe ( 'ApplicationLogo' , ( ) => {
/**
* Mount the component.
*
* @see https://vue-test-utils.vuejs.org/api/#mount
*/
const wrapper = mount ( ApplicationLogo )
/**
* Assert the component renders.
*
* @see https://vitest.dev/api/expect.html
*/
test ( 'component renders' , ( ) => {
expect ( wrapper ) . toBeTruthy ( )
} )
/**
* Assert the component is a SVG.
*/
test ( 'component is SVG' , ( ) => {
wrapper . find ( 'svg' )
} )
/**
* Assert the component matches the snapshot.
*
* @see https://vitest.dev/api/expect.html#tomatchsnapshot
*/
test ( 'component matches snapshot' , ( ) => {
expect ( wrapper . html ( ) ) . toMatchSnapshot ( )
} )
} ) ستقوم Github Actions أيضًا بإجراء الاختبارات على كل العلاقات العامة للفرع main .
تم تجهيز هذا التطبيق بـ ESLint وتم تكوينه لتحليل TypeScript. يتم إجراء الفحص التلقائي لملفات JavaScript وVue on_save .
يمكنك أيضًا تشغيل الوبر يدويًا:
npm run lint وقد تم تجهيز هذا التطبيق مع Stylelint والمكون الإضافي Prettier لـ TailwindCSS. تتم عملية الفحص والتنسيق التلقائي on_save .
يتم تكوين التنسيق التلقائي لكل من ملفات JavaScript وPHP لـ on_save . يرجى الاطلاع على إعدادات VSCode وتكوينات الامتداد لمزيد من المعلومات.
قم بتشغيل Prettier و Pint يدويًا باستخدام:
npm run format && composer run lintعرض القصص المصورة: https://gregrickaby.github.io/vue-commerce-lab/
تم تجهيز هذا التطبيق بـ Storybook لتطوير مكونات واجهة المستخدم بشكل منفصل. يجب كتابة القصص بتنسيق CSF، ووضعها بجوار المكون في دليل resources/js/Components . يجب تسمية القصص باسم ComponentName.stories.ts :
├── resources
│ ├── js
│ │ ├── Components
│ │ │ ├── Atoms
│ │ │ │ ├── ApplicationLogo
│ │ │ │ │ ├── ApplicationLogo.stories.ts <-- Storybook
│ │ │ │ │ ├── ApplicationLogo.test.ts <-- Test
│ │ │ │ │ ├── ApplicationLogo.test.ts.snap <-- Snapshot
│ │ │ │ │ └── ApplicationLogo.vue <-- Vue Component
تشغيل القصص المصورة باستخدام:
npm run storybookبناء القصص المصورة مع:
npm run build:storybookرخصة معهد ماساتشوستس للتكنولوجيا (MIT). يرجى الاطلاع على الترخيص
