JDdaojia

jddaojia

مقدمة

JDDAOJIA عبارة عن بريد إلكتروني للهاتف المحمول على شبكة الإنترنت تم تصميمه عن طريق تقليد jd.com . هذا المستودع هو مشروع الواجهة الأمامية. للحصول على جزء واجهة API الخلفية ، انظر: jddaojia-backapi.

ينفذ هذا المشروع العمليات الأساسية على جانب مستخدم E-Mall ، بما في ذلك تسجيل تسجيل الدخول ، وعرض منتج المتجر ، وعربة التسوق ، ووضع الطلب ، والاستعلام التاريخي للطلب ، وعنوان توفير وتحرير ، ويحاول استعادة نمط واجهة المستخدم الفريد لـ JD.com.

انظر الفيديو التجريبي: فيديو Bilibili.

التكنولوجيا المستخدمة

• Vue3 + Vuex + Vue-Router + Vue-Cli
• البديهية
• eslint
• WebPack
• SCSS
• ES6

عمليات سطر الأوامر الأساسية:

تثبيت إعداد مشروع المشروع

 npm install

التجميع والأحمال الساخنة للتنمية

 npm run serve

يجمع ويعزز الإنتاج

 npm run build

الوبرات وتصلح الملفات

 npm run lint

تخصيص التكوين

انظر انظر:
مرجع التكوين.

تشغيل بنجاح

إذا استمرت العملية بسلاسة وتم تشغيل المشروع بنجاح في بيئة DEV ، فسيعرض سطر الأوامر موجهًا مشابهًا لما يلي.

استخدم عنوان URL المعطى فيه للوصول إلى الصفحة. ومع ذلك ، يجب عليك تشغيل خادم الواجهة الخلفية للمشروع أولاً ، واستخدام المنفذ 3000 افتراضيًا.

تَلمِيح

• يمكنك تسجيل الدخول إلى المركز التجاري مباشرة من خلال اسم المستخدم: المسؤول وكلمة المرور: المسؤول لتجاوز عملية التسجيل. بالإضافة إلى ذلك ، لا يحتوي المركز التجاري الآن على وظيفة تسجيل الدخول عبر الهاتف المحمول ، يرجى استخدام اسم المستخدم وكلمة المرور لتسجيل الدخول.
• يستخدم المشروع مخطط REM لتحقيق التصميم التكيفي.
• تم اختبار المشروع فقط على متصفحات Firefox و Edge. قد تصادف متصفحات الكروم و Safari بقايا تخطيط. إذا وجدت أي شيء ، يرجى الاتصال بي لتعديله.
• يستفيد التصميم بالكامل من Flex ويبسط رمز CSS.
• تستخدم وظيفة عربة التسوق بشكل أساسي Vuex و SessionStorage لإدارة البيانات على جانب العميل ، وهو هدفي في ممارسة قدرات إدارة المعلومات الموضعية. وظائف أخرى بشكل رئيسي معالجة البيانات على الواجهة الخلفية.
• يتم تخزين معلومات تسجيل الدخول في SessionStorage.

اتجاهات التحسين

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