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

مشروع BAI_SHOP

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

مقدمة المشروع: يعتمد هذا المشروع على وضع الفصل الأمامي والخلف

مكدس تكنولوجيا المشروع الأمامي يوضح
Vue مجموعة من الإطار التدريجي لبناء واجهة المستخدم
Vue-Router Vue-Router هو مدير التوجيه الرسمي لـ Vue.js
Element-Ui Elementui Element ، مجموعة من مكتبة مكون Vue 2.0 التي تم إعدادها للمطورين والمصممين ومديري المنتجات ، توفر موارد التصميم الداعمة لمساعدة موقع الويب الخاص بك بسرعة على التبلور
البديهية Axios هي مكتبة HTTP قائمة على الوعد يمكن استخدامها في بيئة Node.js ومتصفحها
Echarts Echarts ببساطة في عملية تطوير الإنترنت.
مرة أخرى -مكدس تكنولوجيا المشروع يوضح
node.js Nodejs هو لغة تم تطويرها في الخادم مع C ++.
يعبر Express هو إطار لتطوير الويب المرن والمرن استنادًا إلى منصة Node.js.
JWT JSON Web Token هو معيار مفتوح يعتمد على JSON لفتح بيان في بيئة تطبيق الشبكة
MySQL قاعدة البيانات
تتمة يوفر Sequelize.js وصولاً بسيطًا إلى قواعد بيانات MySQL و MariaDB و SQLite و PostgreSQL ، لخريطة شرائط قاعدة البيانات إلى كائنات ، أو كائنات إلى شرائط قاعدة البيانات. باختصار ، هو orm (الكائنات العلمية). تتم كتابة Sequelize.js في JavaScript ، وهو مناسب لبيئة Node.js.

وصف الملف

1.vue_api_server وصف ملف

  • دليل ملف تكوين config
    • ملف التكوين الافتراضي default.json (والذي يحتوي على تكوين قاعدة البيانات ، تكوين JWT)
  • طبقة الوصول إلى بيانات dao ، قم بتخزين الإضافة والحذف والتغيير والتحقق من تشغيل قاعدة البيانات
    • طريقة قاعدة بيانات الوصول العامة التي توفرها DAO.js
  • تقوم models بتخزين ملفات نموذج قاعدة بيانات ORM محددة
  • modules النمطية لمشروع المشروع الحالي
    • authorization.js API API MODULE
    • وحدة قاعدة البيانات database.js (تحميل مكتبة NodeJS-Imm2)
    • يعتمد passport.js على تسجيل الدخول إلى وحدة جواز السفر
    • resextra.js واجهة إعادة إرجاع api api
  • يعتمد مشروع node_modules على وحدة ثالثة -
  • routes الموحدة
    • يوفر api واجهة API
    • يوفر mapp واجهة تطبيقات الجوال
    • يوفر mweb مواقع الويب المحمولة
  • طبقة خدمة services ، يتم كتابة رمز منطق العمل على هذه الطبقة ، ويتم تحويل البيانات التي تم الحصول عليها من خلال واجهات مختلفة إلى بيانات أمامية موحدة
  • ملف مدخل المشروع الرئيسي app.js
  • ملف تكوين مشروع package.json

2.vue_shop وصف ملف

  • مجلد مجلد dist تم إنشاؤه بعد التغليف (لبيئة الإنتاج)

    • بما في ذلك css ، fonts ، img ، js ، favicon.ico و index.html
    • ما عليك سوى بدء تشغيل خادم بسيط لتركيب المشروع ، وتشغيل الخادم ، والوصول إلى المنفذ الافتراضي
    • كيفية تشغيل عنصر Vue المعبأ: https://www.cnblogs.com/zhujiabin/p/10557982.html

  • مجلد المجلد public مع موارد ثابتة

    • بما في ذلك ملفات favicon.ico و index.html

  • مجلد مجلد src

    • assets : قم بتخزين بعض ملفات الموارد الكبيرة ، مثل: الصور ، الخطوط ، إلخ.

    • components : store item vue sub -component

    • plugins : مكونات element-ui التي قدمها المشروع

    • router : Project Route index.js

    • tools : فئة أدوات المشروع

    • App.vue : مكون Vue Root

    • main.js : مدخل الويب

  • ملفات التكوين الأخرى

    • .browserslistrc : يمكن لهذا التكوين مشاركة إصدار المتصفح المستهدف و NodeJS في أدوات مختلفة من الأمام.
    • .editorconfig
    • .eslintignore : تعيين الملفات التي لم يتم التحقق منها بواسطة ESLINT ( ESLINT عبارة عن قواعد جافا سكريبت قابلة للتكوين وقواعد النحوية القابلة للتكوين وأدوات فحص الكود -ستون))))
    • .eslintrc.js : ملف تكوين ESLINT
    • .gitignore : تعيين الملفات التي تم تجاهلها بواسطة git
    • .prettierrc : عندما نستخدم التنسيق الصحيح للربط ، سنساعدنا تلقائيًا في تعويض الرمز ، لكن بعض الرموز ستقوم بالإبلاغ عن الأخطاء النحوية في ESLINT.
    • babel.config.js : ملف تكوين بابل ( بابل عبارة البيئات.

3.vue_shop_server وصف ملف

  • مجلد dist vue_shop ملف بيئة الإنتاج المعبأة
  • بما في ذلك css ، fonts ، img ، js ، favicon.ico و index.html
    • عند تشغيل المشروع ، قم أولاً بحذف حزمة التبعية node_modules ، ثم أدخل دليل vue_shop_server ، وقم بتنفيذ npm install لإعادة تحميل الحزمة التابعة الجديدة
    • بعد تنزيل حزمة التبعية ، قم بتنفيذ الأوامر nodemon app.js في نافذة DOC والوصول إلى http://localhost:3000 يمكنها رؤية الصفحة الأمامية للمشروع.
  • يقوم خادم ملف app.js بتشغيل ملف الدخول ، والذي يحتوي على بعض التكوين الأساسي للخادم

3. احتياطات تشغيل المشروع

1. تنزيل وإلغاء ضغط BAI_SHOP.zip

2. أدخل مجلد vue_api_server/db ، استيراد ملف قاعدة بيانات mydb.sql ضمن مجلد DB في قاعدة بيانات MySQL

3. بعد استيراد البيانات بنجاح ، افتح ملف default.json في مجلد config لتكوين db_config فيه

4. افتح نافذة أمر المستند ، أدخل دليل vue_api_server ، قم بتشغيل أمر npm install لتحميل التبعيات المطلوبة للمشروع المطلوب

5. بعد الاعتماد على التحميل ، قم بإجراء تشغيل nodemon app.js

6. افتح نافذة أمر مستند جديد ، أدخل دليل Vue_Shop ، قم بتشغيل أمر npm install لتحميل التبعيات المطلوبة للمشروع

7. بعد الاعتماد على التحميل ، قم بتشغيل أمر npm run serve لتشغيل المشروع في النافذة الحالية ، كما تم Compiled successfully in xxxxms ، افتح المتصفح لزيارة localhost:8080

8. بوستسكريبت: بشكل عام ، مشروع نموذج التطوير ناجح! ملاحظة: يجب أن يكون لديك بيئة NodeJS أولاً! وتثبيت رمز الاعتماد العالمي NODEMON: npm install nodemon -g

إذا كنت ترغب في تثبيت العناصر في وضع الإنتاج ، فابحث عن وصف ملف VUE_SHOP أعلاه و VUE_SHOP_SERVER الوصف أعلاه.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل