ecommerce management system

نظام إدارة الواجهة الخلفية للعنصر

نظام إدارة الواجهة الخلفية للتجارة الإلكترونية يعتمد على Vue، باستخدام نموذج تطوير فصل الواجهة الأمامية والخلفية. تتضمن مجموعات تقنيات الواجهة الأمامية المستخدمة في المشروع Vue وvue-router وElement-UI وAxios وEcharts وما إلى ذلك.

اختيار التكنولوجيا

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

• فيو
• جهاز التوجيه
• عنصر واجهة المستخدم
• أكسيوس
• الرسوم البيانية

وظيفة العمل

النقاط الفنية المتعلقة بالوظائف

1. تسجيل دخول المستخدم

• بعد تسجيل دخول المستخدم بنجاح، يتذكر العميل حالة تسجيل الدخول الخاصة به ويحافظ عليها من خلال sessionStorage والرمز token .

• التحكم في أذونات وصول المستخدم من خلال router.beforeEach حارس التنقل على الطريق. منع المستخدمين الذين لم يقوموا بتسجيل الدخول من محاولة الوصول إلى صفحات أخرى غير صفحة تسجيل الدخول من خلال عنوان URL.

2. تخطيط الصفحة الرئيسية

• تَخطِيط
  • قم بتنفيذ تخطيط الصفحة الرئيسية من خلال مكتبة مكونات Element-UI .
  • استخدم <el-menu> لتنفيذ شريط التنقل الجانبي، وأضف سمة activePath إلى sessionStorage لإبقاء شريط التنقل مميزًا.
  • يستخدم الرمز الموجود في شريط التنقل الجانبي مكتبة أيقونات Iconfont Alibaba المتجهة.
• طلب البيانات
  • اطلب بيانات الواجهة من خلال Axios وأضف رمزًا مميزًا إلى معترض طلب axios لضمان الإذن بالحصول على البيانات.
  • استخدم شريط التقدم NProgress لعرض تقدم تحميل الصفحة (طلب البيانات).

3. قائمة المستخدمين لإدارة المستخدم

• استخدم <el-form> لإضافة نماذج المستخدم، وتخصيص قواعد التحقق من النموذج، وتنفيذ إعادة تعيين النموذج والتحقق المسبق قبل الإرسال.

• استخدم slot-scope للحصول على بيانات المكونات وتخصيص قوالب العرض.

4. إدارة الأذونات

• قائمة الأدوار

  • استخدم حلقة v-for ثلاثية الطبقات لعرض أذونات المستوى الأول والثاني والثالث للدور على التوالي.

  • استخدم عنصر تحكم الشجرة <el-tree> لعرض قائمة بالأذونات القابلة لتعيين الدور.

• قائمة الأذونات

5. إدارة السلع

• قائمة المنتجات

  • استخدم عامل التصفية الشامل Vue.filter لتخصيص تنسيق العرض لكائنات التاريخ.

• أضف المنتج

  • استخدم مكون شريط الخطوات <el-steps> لتوجيه المستخدمين لملء نموذج إضافة المنتج وفقًا للعملية.

  • استخدم مكون <el-upload> للسماح للمستخدمين بتحميل صور المنتج.

  • استخدم محرر النصوص المنسق vue-quill-editor للسماح للمستخدمين بملء محتوى المنتج.

  • استخدم <el-form> لإكمال نموذج إضافة المنتج، وتخصيص قواعد التحقق من النموذج، وتنفيذ التحقق المسبق قبل إرسال النموذج.

• معلمات التصنيف

• تصنيف المنتج

  • استخدم مكون الجدول الشجري vue-table-with-tree-grid لعرض تصنيف المنتج من المستوى الأول والثاني والثالث.

6. قائمة أوامر إدارة الطلب

• استخدم مكون المخطط الزمني <el-timeline> لعرض المعلومات اللوجستية الخاصة بالطلب.

7. إحصاءات البيانات - تقارير البيانات

• استخدم Echarts لعرض تقارير بيانات مصدر المستخدم.

---

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

تشغيل التبعيات

• أكسيوس => أرسل الطلب
• الرسوم البيانية => الرسوم البيانية
• element-ui => مكتبة مكونات Element-UI
• lodash => النسخ العميق ودمج الكائنات
• nprogress => شريط التقدم
• vue-quill-editor => محرر نص منسق
• vue-table-with-tree-grid => جدول الشجرة

تبعيات التنمية

• بابل => تحويل بناء الجملة ES6
• eslint/babel-eslint => التحقق من بناء الجملة
• sass/sass-loader => بناء جملة sass
• babel-plugin-transform-remove-console => إزالة وحدة التحكم من بيئة الإنتاج
• @babel/plugin-syntax-dynamic-import => التحميل البطيء للمسارات

تحسين المشروع

1. إنشاء تقرير التغليف

اعرض تقارير التعبئة من خلال لوحة تصور Vue UI وقم بتحليل كيفية تحسين/ضغط الملفات الكبيرة جدًا.

2. تكوين Webpack

• حدد ملفات إدخال التغليف المختلفة لوضع التطوير ووضع الإصدار من خلال chainWebpack

  1. ملف إدخال وضع التطوير src/main-dev.js
  2. تحرير ملف إدخال الوضع src/main-prod.js

• في بيئة الإنتاج، سيتم تقديم بعض مكتبات الجهات الخارجية الكبيرة جدًا باستخدام CDN

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

  من أجل حل المشكلات المذكورة أعلاه، يمكنك تكوين التبعيات التي تحتاج إلى تحميل موارد CDN الخارجية من خلال العقدة externals لـ Webpack. لن يتم حزم أي حزم تبعية تابعة لجهة خارجية تم الإعلان عنها في العناصر الخارجية.

• تخصيص محتوى الصفحة الرئيسية لبيئات مختلفة من خلال المكونات الإضافية (على سبيل المثال، استخدم الاستيراد لاستيراد الحزم التابعة في وضع التطوير، واستخدم CDN للاستيراد في وضع الإصدار)

   // Vue.config.js
  config . plugin ( 'html' ) . tap ( args => {
      args [ 0 ] . isProd = true / false
      return args
  } ) 

   <!-- index.html -->
  < title > < %= htmlWebpackPlugin.options.isProd ? '' : 'dev-' % > Element后台管理系统</ title >
  < % if(htmlWebpackPlugin.options.isProd) { % >
      此处为CDN引入的第三方资源
  < % } % > 

3. التحميل البطيء للطرق

عند تعبئة المشاريع، ستؤثر حزم js الكبيرة جدًا على سرعة تحميل الصفحة.

استخدم المكون الإضافي @babel/plugin-syntax-dynamic-import وقم بتغيير التوجيه للتحميل عند الطلب. سيتم تحميل المكون المقابل فقط عند الوصول إلى المسار.

إعداد المشروع

 npm install

يجمع ويعيد التحميل السريع للتطوير

 npm run serve

يجمع ويصغر للإنتاج

 npm run build

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

 npm run lint