يمكن لتطبيقات الصفحة الواحدة عرض محتوى مختلف بدون تحميل صفحة جديدة. للقيام بذلك، لذلك، يستخدم معالِجات النقرات على الروابط و History API. التاريخ واجهة برمجة التطبيقات تسمح معالجة سجل جلسة المتصفح. بهذه الطريقة يمكننا تحديث عنوان URL عند تعرض صفحة مختلفة (عادةً ما يُطلق عليها "عرض" في تطبيقات الصفحة الواحدة). وكذلك من أن زر الرجوع في المتصفح لا يزال يعمل كما هو متوقع.
ألقِ نظرة على "تطبيق الصفحة الواحدة" في هذا الدرس التطبيقي حول الترميز. يظهر فيه قطة أو كلب الصور وتوفر روابط للتبديل بين الحيوانين. يبدو أنّها تعمل جيد!
الكشف عن خطأ 404 المخادع
يوجد خطأ بسيط في التطبيق. لنلقي نظرة الآن
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط
ملء الشاشة
- انقر على رابط Doggos. لاحِظ كيف تغيّر عنوان URL.
- أعِد تحميل التطبيق.
أنت تحصل على صفحة تحتوي على "Cannot GET /doggos" تظهر فيها عبارة 404 خداعية. إنه أمر "خداعي"،
لأنه يبدو أن تطبيق الويب يعمل بشكل جيد طالما أنك تنقر فقط على الروابط داخل
بها. تتوقف عن العمل عند استخدام عناوين URL في نافذة متصفح جديدة أو عند تحديث
. تكمن المشكلة في أن الخادم لا يعرف كيفية الاستجابة لطلب
عناوين URL هذه. يستخدم رمز JavaScript في تطبيق الويب History API من أجل
التنقل بينهما، إلا أن الخادم لا يعرف ماذا يفعل بهما.
وعندما لا يعرف الخادم ما يجب فعله بشأن عنوان URL المطلوب، فإنه يستجيب
برمز حالة HTTP 404. باستخدام هذا الرمز، يقول الخادم إنّه لم يعثر على الجهاز
أي شيء خاص بعنوان URL المطلوب.
ولن تفهرس محركات البحث عناوين URL في هذه الحالة، لأن المستخدم قد ينقر على في إحدى نتائج البحث والعثور على رسالة الخطأ، وليس المحتوى الذي التي تبحث عنها، مثل صور الكلاب.
إصلاح الخادم
يستخدم هذا المشروع خادم express.js مكتوبًا بلغة JavaScript. لنصلح الخادم، لذا يستجيب باستخدام index.html وسيعتني تطبيق الصفحة بالباقي.
- انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.
- اختَر الملف "
server.js".
يحتوي هذا الملف على رمز الخادم. فهي تقوم بإعداد خادم Express.js وترسل
محتوى ملف index.html. لا يخدم إعداد المسار في السطر 15 سوى تطبيق الويب
عندما تنتقل الطلبات إلى عنوان URL /. ينبغي أن يعرض الخادم أيضًا عناوين URL الأخرى التي
أنشأوها. لنقم بتغيير هذا ليتم عرض جميع عناوين URL، لذا يعمل أيضًا مع
عناوين URL إضافية في المستقبل.
للقيام بذلك، يمكننا تغيير التعليمة البرمجية التي تبدأ من السطر 15 إلى هذا:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
يتطابق /* مع أي عنوان URL ويستجيب الخادم الآن مع تطبيق الويب في
index.html لأي عنوان URL محدَّد.
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط
ملء الشاشة
ينبغي أن تعمل إعادة تحميل الروابط وفتحها في نافذة التصفح المتخفي الجديدة الآن كـ متوقع.