एक पेज वाले ऐप्लिकेशन, नया पेज लोड किए बिना अलग-अलग कॉन्टेंट दिखा सकते हैं. ऐसा करें इसलिए, वे लिंक और इतिहास एपीआई पर क्लिक हैंडलर का इस्तेमाल करते हैं. इतिहास API की मदद से ये काम किए जा सकते हैं आपके ब्राउज़र सत्र के इतिहास में हेर-फेर कर सकता है. इस तरह से हम यूआरएल को तब अपडेट कर सकते हैं जब कोई दूसरा पेज दिखाना (इसे आम तौर पर सिंगल पेज ऐप्लिकेशन में "व्यू" कहा जाता है). यह भी यह पक्का करता है कि ब्राउज़र का 'वापस जाएं' बटन अब भी उम्मीद के मुताबिक काम कर रहा हो.
इस कोडलैब में सिंगल पेज ऐप्लिकेशन को देखें. इसमें बिल्ली या कुत्ता दिख रहा है इमेज दिखाई गई हैं और दो जानवरों के बीच टॉगल करने के लिए लिंक दिए गए हैं. ऐसा लगता है कि यह काम कर रहा है ठीक है!
स्नीकी 404 का पता लगाना
माफ़ करें, ऐप्लिकेशन में एक छोटा सा बग है. चलिए, इस पर एक नज़र डालते हैं!
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद,
फ़ुलस्क्रीन
. - Doggos लिंक पर क्लिक करें. ध्यान दें कि यूआरएल कैसे बदला गया था.
- ऐप्लिकेशन को फिर से लोड करें.
आपको "Cannot GET /doggos" वाला पेज मिला है उस पर—स्नीकी 404 का कोड दिखाया गया है. यह "स्नीकी" है,
क्योंकि वेब ऐप्लिकेशन ठीक तरह से तब तक काम करता है, जब तक आप इसके अंदर के लिंक पर क्लिक करते हैं
इसे. यह नई ब्राउज़र विंडो में URL का उपयोग करने या
पेज. समस्या यह है कि सर्वर को यह पता नहीं होता कि
ये यूआरएल हैं. हमारे वेब ऐप्लिकेशन का JavaScript कोड, इतिहास एपीआई का इस्तेमाल इन कामों के लिए कर रहा है
एक से दूसरे पेज पर जाते हैं, लेकिन सर्वर को यह नहीं पता कि उनका क्या करना है.
जब सर्वर को यह पता नहीं होता कि अनुरोध किए गए यूआरएल के लिए क्या करना है, तो वह जवाब देता है
एचटीटीपी स्थिति कोड 404 के साथ. इस कोड के साथ सर्वर का कहना है कि उसे कोई जानकारी नहीं मिली
कुछ भी कर सकता है.
इस मामले में सर्च इंजन यूआरएल को इंडेक्स नहीं करेंगे, क्योंकि उपयोगकर्ता किसी वीडियो पर क्लिक करेगा गड़बड़ी का मैसेज ढूंढें, लेकिन गड़बड़ी का वह मैसेज नहीं जैसे कि कुत्ते की तस्वीरें.
सर्वर को ठीक करना
यह प्रोजेक्ट इसमें लिखे गए express.js सर्वर का इस्तेमाल करता है JavaScript. चलिए, सर्वर को ठीक करते हैं, तो यह index.html और बाकी काम पेज ऐप्लिकेशन संभाल लेगा.
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
server.jsफ़ाइल चुनें.
इस फ़ाइल में सर्वर कोड है. यह Express.js सर्वर सेट अप करता है और
index.html की सामग्री पंक्ति 15 के रास्ते के सेटअप में सिर्फ़ वेब ऐप्लिकेशन इस्तेमाल किया जाता है
जब अनुरोध यूआरएल / पर जाते हैं. सर्वर को ऐसे अन्य यूआरएल भी दिखाने चाहिए जिन्हें हम
ने बनाया है. इसे सभी यूआरएल को दिखाने के लिए बदलें, ताकि यह इनके साथ भी काम करे
यूआरएल भी मिलेंगे.
ऐसा करने के लिए, हम पंक्ति 15 से शुरू होने वाले कोड को इस पर बदल सकते हैं:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* किसी भी यूआरएल से मेल खाता है और सर्वर अब इसमें वेब ऐप्लिकेशन के साथ जवाब देता है
किसी भी दिए गए यूआरएल के लिए index.html.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद,
फ़ुलस्क्रीन
.
नई गुप्त विंडो में लिंक रीफ़्रेश करने और खोलने से अब इस तरह काम करना चाहिए उम्मीद है.