แอปหน้าเดียวแสดงเนื้อหาที่แตกต่างกันได้โดยไม่ต้องโหลดหน้าเว็บใหม่ สิ่งต้องทำ ดังนั้นจึงใช้เครื่องจัดการคลิกกับลิงก์และ History API ประวัติ API ช่วยให้ จัดการประวัติเซสชันของเบราว์เซอร์ วิธีนี้จะทำให้เราสามารถอัปเดต URL เมื่อ แสดงหน้าที่ต่างกัน (ปกติเรียกว่า "การดู" ในแอปหน้าเดียว) และ ตรวจดูให้แน่ใจว่าปุ่มย้อนกลับของเบราว์เซอร์ยังคงทำงานตามที่คาดหมาย
ลองดูแอปหน้าเดียวใน Codelab นี้ รูปภาพแมวหรือสุนัข รูปภาพและให้ลิงก์เพื่อสลับระหว่างสัตว์ 2 ตัว ดูเหมือนว่าจะได้ผล โอเค
ไขปริศนา 404
ขออภัย มีข้อบกพร่องเล็กๆ น้อยๆ ในแอป เรามาดูรายละเอียดกัน
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด
เต็มหน้าจอ
- คลิกลิงก์ Doggos สังเกตว่า URL เปลี่ยนไป
- โหลดแอปซ้ำ
คุณจะได้รับหน้าที่มี "Cannot GET /doggos" 404 ที่แอบแฝงอยู่ นี่คือ "การแอบแฝง"
เพราะดูเหมือนว่าเว็บแอปจะทำงานปกติดี ตราบใดที่คุณคลิกลิงก์ภายใน
ได้ เบรกพอยท์เมื่อใช้ URL ในหน้าต่างเบราว์เซอร์ใหม่หรือเมื่อรีเฟรช
ปัญหาคือ เซิร์ฟเวอร์ไม่ทราบว่าจะตอบกลับคำขอของ
URL เหล่านี้ โค้ด JavaScript ในเว็บแอปของเราใช้ 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 ที่กำหนด
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด
เต็มหน้าจอ
ตอนนี้การรีเฟรชและการเปิดลิงก์ในหน้าต่างที่ไม่ระบุตัวตนใหม่ควรทำงานเป็น ที่คาดไว้