Ứng dụng trang đơn có thể hiển thị nhiều nội dung mà không cần tải trang mới. Để làm việc này, họ sử dụng trình xử lý lượt nhấp trên các đường liên kết và History API. History API cho phép thao tác với nhật ký phiên của trình duyệt. Bằng cách này, chúng ta có thể cập nhật URL khi hiển thị một trang khác (thường được gọi là "chế độ xem" trong Ứng dụng trang đơn). Thao tác này cũng đảm bảo nút quay lại của trình duyệt vẫn hoạt động như mong đợi.
Hãy xem Ứng dụng trang đơn trong lớp học lập trình này. Ứng dụng này hiển thị hình ảnh mèo hoặc chó và cung cấp các đường liên kết để chuyển đổi giữa hai loài động vật này. Có vẻ như ứng dụng hoạt động bình thường!
Phát hiện lỗi 404 lén lút
Rất tiếc, có một lỗi nhỏ trong ứng dụng. Hãy cùng xem nhé!
- Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng). Sau đó, nhấn vào biểu tượng
Fullscreen (Toàn màn hình)
. - Nhấp vào đường liên kết Doggos. Hãy chú ý đến cách URL thay đổi.
- Tải lại ứng dụng.
Bạn nhận được một trang có nội dung "Cannot GET /doggos" – một trang 404 giả mạo. Lỗi này "lén lút" vì ứng dụng web có vẻ hoạt động bình thường miễn là bạn chỉ nhấp vào các đường liên kết trong đó. Nó sẽ bị hỏng khi sử dụng URL trong cửa sổ trình duyệt mới hoặc khi làm mới trang. Vấn đề là máy chủ không biết cách phản hồi yêu cầu cho các URL này. Mã JavaScript trong ứng dụng web của chúng ta đang sử dụng API Lịch sử để di chuyển giữa các URL, nhưng máy chủ không biết phải làm gì với các URL đó.
Bất cứ khi nào máy chủ không biết phải làm gì cho một URL được yêu cầu, máy chủ sẽ phản hồi bằng mã trạng thái HTTP 404. Với mã này, máy chủ cho biết rằng máy chủ không tìm thấy
bất kỳ nội dung nào cho URL được yêu cầu.
Trong trường hợp này, công cụ tìm kiếm sẽ không lập chỉ mục các URL vì người dùng sẽ nhấp vào một kết quả tìm kiếm và thấy thông báo lỗi, chứ không phải nội dung họ đang tìm kiếm, chẳng hạn như hình ảnh về chó.
Sửa máy chủ
Dự án này sử dụng máy chủ express.js được viết bằng JavaScript. Hãy sửa máy chủ để máy chủ phản hồi bằng index.html và ứng dụng trang đơn sẽ xử lý phần còn lại.
- Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.
- Chọn tệp
server.js.
Tệp này chứa mã máy chủ. Thao tác này sẽ thiết lập một máy chủ express.js và gửi nội dung của index.html. Chế độ thiết lập tuyến đường ở dòng 15 chỉ phân phát ứng dụng web khi các yêu cầu được gửi đến URL /. Máy chủ cũng phải phân phát các URL khác mà chúng ta đã tạo. Hãy thay đổi điều này để phân phát tất cả URL, nhờ đó, nó cũng hoạt động với các URL bổ sung trong tương lai.
Để làm việc này, chúng ta có thể thay đổi mã bắt đầu từ dòng 15 thành:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* khớp với mọi URL và máy chủ hiện phản hồi bằng ứng dụng web trong index.html cho mọi URL nhất định.
- Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng). Sau đó, nhấn vào biểu tượng
Fullscreen (Toàn màn hình)
.
Giờ đây, thao tác làm mới và mở đường liên kết trong cửa sổ ẩn danh mới sẽ hoạt động như mong đợi.