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

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

ينقسم نظام إدارة المحتوى Alibaba Baixiu إلى وظيفتين أساسيتين: إدارة المحتوى وعرض المحتوى.

1. وحدة الوظيفة

1.1 إدارة المحتوى

وحدة وظيفة
مستخدم تسجيل الدخول، الخروج، إضافة المستخدم، الحذف، التعديل والاستعلام
شرط إدارة المادة
تصنيف إدارة التصنيف
تعليق إدارة التعليقات
إعدادات الموقع الكلمات الرئيسية، الوصف، شعار الموقع، الصورة الدائرية

1.2 عرض المحتوى

وحدة وظيفة
الصفحة الأولى الملاحة، وعرض بيانات المادة
صفحة القائمة عرض قائمة المقالات حسب الفئة
صفحة التفاصيل عرض تفاصيل المقالة وتنفيذ وظيفة التعليق

2. وضع التطوير

2.1 نموذج التطوير المختلط للواجهة الأمامية والخلفية

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

02

سؤال:

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

2.2 نموذج تطوير فصل الواجهة الأمامية والخلفية

03

المزايا: مسؤوليات واضحة وتقسيم العمل، والتنمية المستقلة، وعدم وجود تأثير على بعضها البعض.

3. هيكل المشروع

طبقات النظام استخدم التكنولوجيا
طبقة البيانات mongoDB
طبقة الخدمة Node.js (سريع)
عميل قالب فني، مسج، خط رائع، انتقاد

4. إعداد بيئة تشغيل المشروع (أشياء يجب أن تعرفها لتشغيل المشروع)

  1. قم بتثبيت برنامج Node.js واختبر ما إذا كان قد تم تثبيته بنجاح أم لا
    1. Win + R يفتح البرنامج قيد التشغيل في نظام الويندوز، أدخل بوويرشيل في البرنامج قيد التشغيل واضغط على Enter لفتح برنامج سطر الأوامر
    2. أدخل الأمر node -v للتحقق من إصدار العقدة.js إذا تم إخراج رقم الإصدار في برنامج سطر الأوامر ولم يتم الإبلاغ عن أي خطأ، فهذا يعني أن التثبيت ناجح.
  2. قم بتثبيت برنامج mongodb وmongodb-compass
  3. انسخ مجلد مشروع Alibaba Baixiu إلى القرص الصلب (برنامج من جانب الخادم)
  4. انتقل إلى الدليل الجذر للمشروع في أداة سطر الأوامر
    1. اضغط باستمرار على مفتاح Shift، ثم انقر بزر الماوس الأيمن وحدد فتح نافذة PowerShell هنا
  5. استخدم الأمر npm install لتثبيت ملفات التبعية المطلوبة للمشروع
  6. افتح ملف app.js وقم بتعديل قسم اتصال قاعدة البيانات في السطر 47: 'mongodb://itcast:itcast@localhost:27017/alibaixiu'

لـ "mongodb://localhost:27017/alibaixiu"

​ (1) السبب: لم تقم بإنشاء حساب اتصال قاعدة بيانات mongodb ومعلومات كلمة المرور. لقد اخترنا استخدام الطريقة الافتراضية لتسجيل الدخول إلى قاعدة بيانات mongodb.

​ (2) إذا كنت تريد تسجيل الدخول إلى قاعدة البيانات باستخدام حسابك وكلمة المرور. يرجى الرجوع إلى: https://www.cnblogs.com/b02330224/p/10049395.html

أدخل الأوامر بالتسلسل في سطر الأوامر: use alibaixiu #أدخل قاعدة بيانات alibaixiu

db.createUser({user:'itcast',pwd:'itcast',roles:['readWrite']}) # إنشاء مستخدم قاعدة البيانات

​ إذا طُلب منك أن الأذونات غير كافية، فيرجى الرجوع إلى الرابط أعلاه وتسجيل الدخول إلى قاعدة البيانات باستخدام حساب مسؤول mongodb أولاً.

7. (خطوة جديدة) تم مؤخرًا تحميل بيانات قاعدة بيانات db_data، ويمكن إدخال قاعدة بيانات alibaixiu من خلال برنامج mongodb-compass.

قم بإنشاء users comment slides categories posts ومجموعات settings بنفس اسم بيانات json في مجلد db_data

​ (مجموعة)، وأخيرًا قم باستيراد بيانات json المقابلة في كل مجموعة على حدة.

importdata

8. أدخل node app.js في أداة سطر الأوامر لبدء المشروع

5. الأشياء التي يجب ملاحظتها بعد تشغيل المشروع (الأشياء التي يجب أن تعرفها لتشغيل好看的项目)

1. افتح المتصفح وأدخل localhost:3000/admin/login.html في شريط عنوان المتصفح للدخول إلى صفحة تسجيل الدخول.

أدخل اسم المستخدم الافتراضي للنظام: (الأصلي) [email protected] (الآن) [email protected] كلمة المرور: 123456 أدخل صفحة المسؤول

2. نظرًا لعدم تحميل ملف قاعدة البيانات، يجب إضافة جميع البيانات يدويًا (إذا تم تقديم بيانات json في db_data، فتخطى الخطوات من 2 إلى 10)

3. أدخل إلى صفحة المسؤول وقم أولاً بتغيير معلومات حسابك (تغيير كلمة المرور، وما إلى ذلك) وقم بتحميل الصورة الرمزية للمستخدم.

4. ثم قم بإضافة معلومات المقالة، ومعلومات إعداد النظام، ومعلومات الصورة الدائرية (الترتيب غير مطلوب، والإضافة تعني ملء معلومات النموذج، واختيار ملفات الصور، وما إلى ذلك)

5. لاحظ أنه عند تغيير معلومات التصنيف يجب البحث في أيقونة معلومات التصنيف على الخط الرائع مثل: fa-phone، fa-gift وغيرها.

تنسيق اسم فئة الصورة الذي تم البحث عنه في الخط الرائع هو: fa fa-xxx-xxx، ما عليك سوى إضافة الجزء fa-xxx-xxx بعده.

6. بعد إضافة معلومات قاعدة البيانات الأساسية، يمكنك اختيار تسجيل الخروج وتسجيل مستخدم جديد (المستخدم المسجل هو المستخدم العادي بشكل افتراضي)

أو استخدم حقوق إضافة المستخدم الخاصة بالمسؤول لإضافة مستخدمين عاديين.

7. بعد إضافة بيانات الخلفية، استخدم حساب مستخدم عادي للدخول إلى صفحة عرض المقالة الأمامية (إذا كنت تريد أن يكون محتوى الصفحة أكثر ثراءً

يوصى بإضافة حوالي 15 جزءًا من معلومات المقالة وحوالي 4 أجزاء من معلومات الفئة)

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

أدخل localhost:3000 في شريط العناوين للدخول إلى صفحة عرض المقالة الأمامية

9. إذا قام المسؤول بتشغيل وظيفة التعليق، فسيتم عرض وظيفة التعليق على صفحة تفاصيل المقالة الأمامية. إذا قام المسؤول بإيقاف تشغيل وظيفة التعليق، فسيتم عرض وظيفة التعليق على صفحة تفاصيل المقالة الأمامية.

لا تعرض الصفحة وظيفة التعليق

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

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

سيتم عرضه في صفحة تفاصيل المقالة.

11. إذا كان المشروع لا يزال غير قادر على العمل، يرجى الاتصال بي على 1565066165

6. عنوان المشروع

الصفحة الرئيسية: http://luoxu.ltd:3000/ (تم تغييرها مؤقتًا إلى http://luoxucoder.icu أثناء تسجيل اسم النطاق)

صفحة تسجيل الدخول: http://luoxu.ltd:3000/admin/login.html (بالمثل)

عرض تأثير المشروع

1. صفحة عرض المقالة الأمامية

فِهرِس

2. صفحة تصنيف المقالات الأمامية

فئة

3. صفحة تفاصيل المقالة الأمامية

بريد

4. صفحة تسجيل الدخول

تسجيل الدخول

5. صفحة التسجيل

يسجل

6. صفحة إدارة الخلفية

مسؤل

وظيفة المشروع

1. وظائف المستخدم

1.1 تسجيل الدخول

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

1.2 اعتراض تسجيل الدخول

  1. استخدم علامة البرنامج النصي لتحميل عنوان الواجهة الذي يوفره الخادم
  2. حدد قيمة المتغير isLogin إذا كانت القيمة خاطئة، فانتقل إلى صفحة تسجيل الدخول.

1.3 إضافة مستخدم

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

1.4 عرض قائمة المستخدمين

  1. أرسل طلب Ajax إلى الخادم لطلب بيانات قائمة المستخدمين
  2. الخطوة الثانية هي استخدام محرك القالب لربط البيانات وقالب html.
  3. الخطوة الثالثة هي عرض المحتوى المقسم على الصفحة

1.5 تحميل الصورة الرمزية للمستخدم

  1. أضف حدث onchange إلى عنصر التحكم في اختيار الملف واحصل على الملف المحدد بواسطة المستخدم في وظيفة معالجة الحدث.
  2. قم بإنشاء كائن formData لتحميل ملفات الصور
  3. اتصل بواجهة تحميل ملف الصورة لتنفيذ تحميل الصورة
  4. قم بإضافة حقل مخفي جديد في نموذج إضافة مستخدم جديد وقم بتخزين عنوان الصورة في الحقل المخفي

1.6 عرض قائمة المستخدمين

  1. أرسل طلب Ajax إلى الخادم عند تحميل الصفحة لطلب بيانات قائمة المستخدمين
  2. استخدم محرك القالب لربط البيانات وقوالب HTML
  3. عرض المحتوى المقسم على الصفحة

1.7 تعديل معلومات المستخدم

  1. أضف أحداثًا لنقرات زر التحرير من خلال تفويض الحدث
  2. احصل على قيمة المعرف للمستخدم الحالي الذي تم النقر عليه في وظيفة معالجة الأحداث
  3. الحصول على المعلومات التفصيلية للمستخدم بناءً على معرف المستخدم، وعرض المعلومات التفصيلية للمستخدم في النموذج الموجود على اليسار من خلال محرك القالب
  4. أضف حدث نقرة لزر التعديل، واحصل على المحتوى الذي أدخله المستخدم في النموذج في وظيفة معالجة الحدث، واستدعاء واجهة تعديل معلومات المستخدم لتنفيذ وظيفة تعديل معلومات المستخدم.

1.8 حذف المستخدم

  1. إضافة حدث النقر لزر الحذف
  2. تأكيد ما إذا كان المستخدم يريد حذف العملية
  3. احصل على معرف المستخدم الذي تم النقر عليه حاليًا
  4. اتصل بواجهة مستخدم الحذف لحذف المستخدم بناءً على المعرف. إذا نجح الحذف، فقم بتحديث الصفحة الحالية حتى تعرض الصفحة أحدث محتوى.

1.9 حذف المستخدمين على دفعات

  1. إدارة حالة مربعات الاختيار المحددة
    1. عند تحديد الزر تحديد الكل، يتم تحديد جميع المستخدمين؛ وعندما يتم إلغاء تحديد الزر تحديد الكل، يتم إلغاء تحديد جميع المستخدمين.
    2. عندما تتغير حالة زر خانة الاختيار أمام المستخدم، تحقق مما إذا كان أي مستخدم في حالة غير محددة. إذا كان الأمر كذلك، قم بإلغاء الحالة المحددة لزر تحديد الكل. إذا لم يكن الأمر كذلك، فهذا يعني أن جميع المستخدمين في حالة الحالة المحددة في هذا الوقت، حدد الزر المحدد للحالة المحددة
  2. إدارة حالة أزرار الحذف المجمعة
    1. عند تحديد الزر "تحديد الكل"، يتم عرض الزر "حذف الدفعة". وعندما يتم إلغاء تحديد الزر "تحديد الكل"، يتم إخفاء الزر "حذف الدفعة".
    2. عندما تتغير حالة زر خانة الاختيار أمام المستخدم، تحقق من الحالة المحددة لجميع المستخدمين. إذا تم تحديد أي مستخدم، فاعرض زر الحذف الدفعي. إذا لم يتم تحديد جميع المستخدمين، قم بإخفاء زر الحذف الدفعي.
  3. تنفيذ وظيفة الحذف الدفعي للمستخدمين
    1. أضف حدث نقرة إلى زر حذف الدُفعة في وظيفة معالجة حدث النقر، قم بتخزين جميع معرفات المستخدمين المحددة في صفيف.
    2. اتصل بواجهة مستخدم الحذف لتنفيذ وظيفة حذف المستخدم

1.10 تغيير كلمة المرور

  1. أضف سمة اسم إلى كل عنصر نموذج في نموذج تغيير كلمة المرور. يجب أن تكون قيمة سمة الاسم متوافقة مع اسم المعلمة في الواجهة.
  2. أضف حدث إرسال نموذج إلى نموذج تغيير كلمة المرور، وفي وظيفة معالج الأحداث، امنع سلوك الإرسال الافتراضي للنموذج
  3. الحصول على المحتوى الذي أدخله المستخدم في النموذج
  4. اتصل بواجهة تعديل كلمة المرور لتنفيذ وظيفة تعديل كلمة المرور. إذا تم تعديل كلمة المرور بنجاح، فانتقل إلى صفحة تسجيل الدخول واسمح للمستخدم بتسجيل الدخول مرة أخرى.

1.11 عرض معلومات المستخدم الذي قام بتسجيل الدخول

  1. وفقًا لقيمة متغير معرف المستخدم، احصل على معلومات المستخدم الذي قام بتسجيل الدخول حاليًا من الخادم.
  2. عرض معلومات المستخدم على الجانب الأيسر من الصفحة

2. وظيفة التصنيف

2.1 إضافة فئة

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

2.2 عرض البيانات المصنفة

  1. أرسل طلب Ajax إلى الخادم لطلب بيانات صفحة الفئة
  2. استخدم محرك القالب لربط البيانات التي يعرضها الخادم مع قالب HTML
  3. عرض المحتوى المقسم على الصفحة

2.3 تعديل البيانات المصنفة

  1. أضف حدث نقرة إلى زر التحرير من خلال تفويض الحدث، واحصل على معرف بيانات التصنيف المراد تعديله في وظيفة معالجة الحدث.
  2. اتصل بالواجهة وفقًا للمعرف للحصول على معلومات مفصلة عن البيانات السرية
  3. استخدم محرك القالب لربط البيانات المصنفة وأحرف HTML بعد اكتمال الربط، سيتم عرض المحتوى في الصفحة.
  4. أضف حدث نقرة إلى زر التعديل، واحصل على المحتوى الذي أدخله المسؤول في النموذج في وظيفة معالج الأحداث
  5. اتصل بواجهة بيانات تصنيف التعديل لتنفيذ وظيفة تعديل بيانات التصنيف.

2.4 حذف البيانات السرية

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

3. وظيفة المادة

3.1 إضافة مقالة

  1. الحصول على بيانات تصنيف المقالة وعرض البيانات في القائمة المنسدلة للفئة ليختارها المسؤول
  2. قم بتحميل صورة غلاف المقالة واحفظ عنوان الصورة التي تم تحميلها في حقل مخفي
  3. أضف سمة اسم لكل عنصر نموذج في نموذج إضافة المقالة، ويجب أن تكون قيمة سمة الاسم متوافقة مع اسم المعلمة المطلوبة في الواجهة
  4. قم بربط حدث إرسال النموذج بنموذج إضافة مقالة، ومنع إرسال النموذج افتراضيًا في وظيفة معالج الأحداث.
  5. احصل على المحتوى الذي أدخله المسؤول في النموذج
  6. أرسل طلبًا لإضافة مقال إلى الخادم لتنفيذ وظيفة إضافة المقالة. بعد إضافة المقالة بنجاح، ستنتقل إلى صفحة قائمة المقالات.

3.2 عرض بيانات قائمة المقالات

  1. عندما تظهر الصفحة، أرسل طلبًا إلى الخادم للحصول على بيانات قائمة المقالات.
  2. استخدم محرك القالب لربط بيانات قائمة المقالات وHTML بعد اكتمال الربط، سيتم عرض المحتوى على الصفحة.
  3. تنفيذ وظيفة ترحيل بيانات القائمة بناءً على بيانات الترحيل

3.3 تصفية قائمة بيانات المقالة

  1. إرسال طلب إلى الخادم لطلب بيانات تصنيف المقالة وعرض البيانات في القائمة المنسدلة للفئة التي تنتمي إليها.
  2. أضف حدث نقرة إلى زر التصفية واحصل على المحتوى الذي حدده المستخدم في وظيفة معالج الأحداث
  3. إرسال طلب إلى الخادم لطلب بيانات قائمة المقالات التي طلبها المسؤول وعرض البيانات على الصفحة

3.4 تحرير المقال

  1. أضف رابطًا إلى زر التحرير وقم بتمرير معرف المقالة كمعلمة استعلام للارتباط إلى صفحة تحرير المقالة
  2. احصل على معلمة المعرف في شريط العناوين في صفحة تحرير المقالة
  3. احصل على تفاصيل المقالة بناءً على المعرف واعرض معلومات المقالة في نموذج تحرير المقالة
  4. قم بربط حدث إرسال النموذج لتعديل نموذج المقالة، ومنع إرسال النموذج افتراضيًا في وظيفة معالج الحدث.
  5. الحصول على المحتوى الذي أدخله المستخدم في النموذج
  6. أرسل طلبًا إلى الخادم لتنفيذ وظيفة تعديل معلومات المقالة. إذا تم تعديل معلومات المقالة بنجاح، فانتقل إلى صفحة قائمة المقالات.

3.5 حذف المادة

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

3.6 توصيات المقالات الشائعة

  1. أرسل طلبًا إلى الخادم للحصول على بيانات التوصية الشائعة

  2. استخدم محرك القالب لربط البيانات وقوالب html، وعرض المحتوى المقسم على الصفحة 

     var str = '<div>{{name}}</div>' ;
var obj = { name : '张三' }
var html = template . render ( str , obj ) ;

3.7 البحث عن المادة

  1. ربط حدث إرسال النموذج بنموذج البحث
  2. منع سلوك الإرسال الافتراضي للنموذج في معالج الأحداث واحصل على كلمات البحث الأساسية التي أدخلها المستخدم
  3. انتقل إلى صفحة نتائج البحث وقم بتمرير كلمات البحث الأساسية التي أدخلها المستخدم إلى صفحة نتائج البحث
  4. في صفحة نتائج البحث، يتم الحصول على الكلمات الرئيسية التي أدخلها المستخدم من معلمات الاستعلام في شريط العناوين.
  5. يتم استدعاء واجهة البحث وفقًا لكلمات البحث الأساسية التي أدخلها المستخدم. عندما يقوم الخادم بإرجاع البيانات، يتم ربط بيانات نتائج البحث وقالب HTML، ويتم عرض المحتوى المقسم أخيرًا على الصفحة.

4. وظيفة التعليق

4.1 عرض قائمة التعليقات

  1. إرسال طلب إلى الخادم للحصول على بيانات قائمة التعليقات
  2. استخدم محرك القالب لربط بيانات قائمة التعليقات وقالب HTML، ثم اعرض المحتوى على الصفحة بعد اكتمال الربط.
  3. تنفيذ وظيفة الترحيل بناءً على بيانات الترحيل

4.2 الإشراف على التعليقات

  1. قم بتغيير النص الموجود في زر الإشراف بناءً على حالة التعليق الحالي. إذا لم تتم مراجعة التعليق الحالي، فسيعرض الزر الموافقة؛ وإذا تمت مراجعة التعليق الحالي، فسيعرض الزر رفض.
  2. أضف حدث نقرة إلى زر المراجعة من خلال تفويض الحدث، واحصل على حالة التعليق الحالي في وظيفة معالجة الحدث
  3. أرسل طلبًا إلى الخادم وأخبر الخادم بالحالة التي يجب تغيير التعليق إليها. إذا نجح التعديل، قم بتحديث الصفحة بحيث يتم عرض أحدث البيانات على الصفحة.

4.3 حذف التعليق

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

5. وظيفة الرسم البياني الدائري

5.1 إضافة بيانات الصورة الدائرية

  1. قم بتنفيذ وظيفة تحميل الصورة واحفظ عنوان الصورة التي تم تحميلها في حقل مخفي
  2. أضف سمة اسم إلى كل عنصر نموذج في نموذج الصورة الدائرية. يجب أن تكون قيمة سمة الاسم متوافقة مع اسم المعلمة المطلوبة في الواجهة.
  3. قم بربط حدث إرسال النموذج بالنموذج الدائري للصور، ومنع إرسال النموذج افتراضيًا في وظيفة معالج الأحداث.
  4. احصل على المحتوى الذي أدخله المسؤول في النموذج
  5. أرسل طلبًا إلى الخادم لتنفيذ وظيفة إضافة بيانات دائري للصور. إذا تمت إضافة البيانات بنجاح، فقم بتحديث الصفحة.

5.2 عرض بيانات المخطط الدائري

  1. أرسل طلبًا إلى الخادم للحصول على بيانات قائمة الصور الدائرية
  2. استخدم محرك القالب لربط بيانات قائمة الصور الدائرية وقالب HTML بعد اكتمال الربط، سيتم عرض المحتوى على الصفحة.

5.3 حذف بيانات الصورة الدائرية

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

5.4 عرض بيانات المخطط الدائري (محدث)

  1. أرسل طلبًا إلى الخادم للحصول على بيانات الرف الدائري
  2. استخدم محرك القالب لربط البيانات وسلاسل HTML وعرض المحتوى المقسم على الصفحة
  3. انقل كود JavaScript الأصلي الذي ينفذ التأثير الدائري إلى نهاية وظيفة النجاح لطريقة ajax

6. وظيفة إعداد الموقع

6.1 إعدادات الموقع

  1. تنفيذ تحميل صور شعار موقع الويب وحفظ عنوان الصورة التي تم تحميلها في مجال مخفي
  2. أضف سمة اسم إلى كل عنصر نموذج في النموذج. يجب أن تكون قيمة سمة الاسم متوافقة مع اسم المعلمة المطلوبة في مستند الواجهة.
  3. قم بربط حدث الإرسال بالنموذج ومنع إرسال النموذج افتراضيًا في وظيفة معالج الأحداث.
  4. احصل على المحتوى الذي أدخله المسؤول في النموذج
  5. إرسال طلب إلى الخادم لتنفيذ وظيفة إضافة بيانات إعداد الموقع

6.2 عرض بيانات إعداد موقع الويب

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

7. وظيفة التحديث الأخير للموقع

7.1 تعرض الصفحة معلومات التعليق على المقالة

1. ابحث في تعليقات المقالة حسب معرف المقالة

2. سيتم عرض التعليقات المعتمدة مباشرة على الصفحة

3. تم تحسين أحدث التعليقات

4. سيتم وضع علامة حمراء على التعليقات غير المعتمدة على صفحة الإدارة

7.2 تحسين الصفحة

1. جميع أزرار الإعجاب تنفذ وظيفة الإعجاب

2. ينفذ رابط التعليق وظيفة الانتقال إلى مقال التعليق

3. تنفذ جميع أزرار التصنيف وظيفة الانتقال إلى صفحة التصنيف

7.3 صفحة التسجيل

1. تمت إضافة زر تسجيل المستخدم إلى صفحة تسجيل الدخول

2. ينفذ js الموجود على صفحة التسجيل التحقق الأساسي من معلومات التسجيل الأمامية

3. تم تطوير وظائف الصفحة باستخدام bootstrap

4. جميع المستخدمين المسجلين في صفحة التسجيل هم مستخدمون عاديون

5. تنفيذ وظيفة البحث عن المستخدمين بناءً على عناوين بريدهم الإلكتروني

للحصول على معلومات مفصلة، ​​يرجى الرجوع إلى وثائق الواجهة.

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