Ứng dụng một trang có thể hiển thị nhiều nội dung mà không cần tải trang mới. Để làm điều này, các trình duyệt sử dụng trình xử lý lượt nhấp trên các đường liên kết và API Nhật ký. History API cho phép thao tác với nhật ký phiên 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à "thành phần hiển thị" trong Ứng dụng một trang). Điều này cũng giúp đả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 một trang trong lớp học lập trình này. Trang này hiển thị hình ảnh con mèo hoặc con chó và cung cấp đường liên kết để chuyển đổi giữa hai con vật. Có vẻ như hoạt động tốt!
Khám phá lỗi 404 lén lút
Rất tiếc, ứng dụng có một lỗi nhỏ. Hãy cùng xem nhé!
- Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh
. - Nhấp vào đường liên kết Doggos. Hãy lưu ý cách URL thay đổi.
- Tải lại ứng dụng.
Bạn sẽ thấy một trang có "Cannot GET /doggos" trên đó – một trang 404 lén lút. Điều này "lén lút", vì ứng dụng web có vẻ hoạt động tốt miễn là bạn chỉ nhấp vào các đường liên kết trong ứng dụng đó. Lỗi này xảy ra khi sử dụng URL trong một 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 một yêu cầu đối với các URL này. Mã JavaScript trong ứng dụng web của chúng tôi đ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 không biết phải làm gì với 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ủ sẽ cho biết rằng không tìm thấy nội dung nào cho URL được yêu cầu.
Trong trường hợp này, các 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 mà họ đang tìm kiếm, chẳng hạn như hình ảnh 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 một trang sẽ xử lý phần còn lại.
- Nhấp vào Remix to Edit (Trộn 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ủ. Phương thức này 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 trong dòng 15 chỉ phân phát ứng dụng web khi các yêu cầu chuyển đến URL /. Máy chủ cũng sẽ phân phát các URL khác mà chúng tôi đã tạo. Hãy thay đổi giá trị này để phân phát tất cả URL, nhờ đó, giá trị này cũng sẽ hoạt động với các URL bổ sung trong tương lai.
Để làm như vậy, chúng ta có thể thay đổi mã bắt đầu từ dòng 15 thành mã sau:
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 Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh .
Giờ đây, tính năng làm mới và mở các đường liên kết trong một cửa sổ ẩn danh mới sẽ hoạt động như mong đợi.