تنزيل vue store - تنزيل رمز مصدر vue store

vue store

فئات أخرى

1.0.0

تنزيل

المتجر (ارجع إلى Xiaomi Mall)

مقدمة

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

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

يوضح

تم فصل الواجهة الأمامية والخلفية لهذا المشروع، ويتم تنفيذ الواجهة الأمامية بالرجوع إلى Xiaomi Mall، ومع ذلك، لا علاقة لها بموقع Xiaomi الرسمي، فهي مجرد فوضى شخصية منتجات Xiaomi، يرجى الذهاب إلى مركز Xiaomi الرسمي.

هذه هي الواجهة الأمامية لهذا المشروع، يرجى الانتقال إلى خادم المتجر للواجهة الخلفية.

تم نشر الواجهة الأمامية على Alibaba Cloud، ونرحب بزيارتك http://101.132.181.9/ (وهي غير متوافقة مع الأجهزة المحمولة، يرجى استخدام جهاز كمبيوتر للوصول إليها).

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

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

إذا كنت تعتقد أن هذا المشروع جيد، يمكنك النقر على Star في الزاوية اليمنى العليا لدعمه. ^_^

مقدمة المشروع

تم فصل الواجهة الأمامية والخلفية لهذا المشروع. تعتمد الواجهة الأمامية على Vue + Vue-router + Vuex + Element-ui + Axios ، ويتم تنفيذها بالرجوع إلى Xiaomi Mall. يتم تنفيذ الواجهة الخلفية بناءً على Node.js(Koa框架) + Mysql .

تحتوي الواجهة الأمامية على 11 صفحة: الصفحة الرئيسية، تسجيل الدخول، التسجيل، جميع المنتجات، صفحة تفاصيل المنتج، عنا، مجموعتي، سلة التسوق، صفحة تسوية الطلب، صفحة طلبي ومعالجة الأخطاء.

يقوم بتنفيذ عرض المنتج، واستعلام تصنيف المنتج، ومنتج البحث عن الكلمات الرئيسية، وعرض معلومات تفاصيل المنتج، وتسجيل الدخول، والتسجيل، وعربة تسوق المستخدم، وتسوية الطلب، وطلب المستخدم، وقائمة مفضلات المستخدم، ووظائف معالجة الأخطاء.

تعتمد الواجهة الخلفية نموذج MVC، ويتم تصميم الواجهة المقابلة وطبقة التحكم وطبقة استمرارية البيانات وفقًا لوحدات البيانات التي تتطلبها الواجهة الأمامية. خادم متجر عنوان تسليم الواجهة الخلفية.

كومة التكنولوجيا

الواجهة الأمامية: Vue + Vue-router + Vuex + Element-ui + Axios
الواجهة الخلفية: Node.js ، Koa框架
قاعدة البيانات: Mysql

وحدة الوظيفة

تستخدم الصفحة Dialog element-ui لتحقيق تأثير ظهور مربع حوار القناع. يتم تعيين زر登录في مكون جذر App.vue، ويتم التحكم في ما إذا كان مربع تسجيل الدخول معروضًا من خلال حالة showLogin في vuex .

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

غالبًا ما تكون البيانات المدخلة من قبل المستخدمين غير موثوقة، لذلك يتم التحقق من معلومات تسجيل الدخول على كلا الجانبين الأمامي والخلفي لهذا المشروع. تعتمد الواجهة الأمامية على طريقة التحقق من نموذج element-ui ولديها قواعد تحقق مخصصة للتحقق.

يسجل

تستخدم الصفحة أيضًا Dialog element-ui لتحقيق تأثير ظهور مربع حوار القناع. يتم تعيين زر注册في مكون جذر App.vue، وتتحكم القيمة التي تم تمريرها عبر المكون الأصلي والفرعي في ما إذا كان مربع التسجيل معروضًا أم لا. .

غالبًا ما تكون البيانات المدخلة من قبل المستخدمين غير موثوقة، لذلك يتم التحقق من معلومات التسجيل أيضًا على الواجهتين الأمامية والخلفية لهذا المشروع. تعتمد الواجهة الأمامية على طريقة التحقق من نموذج element-ui ولديها قواعد تحقق مخصصة للتحقق.

الصفحة الأولى

الصفحة الرئيسية مخصصة بشكل أساسي لعرض المنتجات، مع عرض دائري للمنتجات الموصى بها والمنتجات الشائعة المعروضة حسب الفئة.

جميع المنتجات

تدمج صفحة المنتج بالكامل عرض المنتج بالكامل واستعلام تصنيف المنتج وعرض نتائج البحث عن المنتج بناءً على الكلمات الرئيسية.

صفحة تفاصيل المنتج

تعرض صفحة تفاصيل المنتج بشكل أساسي المعلومات التفصيلية لمنتج معين، حيث يمكن للمستخدمين إضافة منتجاتهم المفضلة إلى عربة التسوق أو قائمة المفضلة.

عربة التسوق الخاصة بي

يتم تنفيذ عربة التسوق باستخدام vuex، ويشير تأثير الصفحة إلى عربة التسوق في Xiaomi Mall.

للحصول على تفاصيل عملية التنفيذ، يرجى الاطلاع على: تنفيذ سلة تسوق Xiaomi Mall استنادًا إلى Vuex

تسوية الطلب

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

مجموعتي

يمكن للمستخدمين إضافة منتجاتهم المفضلة إلى قائمة المفضلة عن طريق النقر فوق الزر "إضافة إعجاب" في صفحة تفاصيل المنتج.

طلبي

عرض جميع الطلبات المقدمة من قبل المستخدم.

تشغيل المشروع

يلاحظ:

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

 1. Clone project

git clone https://github.com/hai-27/vue-store.git

2. Project setup

cd vue-store
npm install

3. Compiles and hot-reloads for development

npm run serve

4. Compiles and minifies for production

npm run build