Ứng dụng một trang có thể hiển thị nội dung khác nhau mà không cần tải trang mới. Để làm vậy, chúng sử dụng trình xử lý lượt nhấp trên đường liên kết và API Lịch sử. API Lịch sử cho phép chỉnh sửa 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). Việ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ư dự kiến.
Hãy tìm hiểu Ứng dụng trang đơn trong lớp học lập trình này. Khung 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 con vật. Điều này có vẻ ổn!
Khám phá 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 xét!
- Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào
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 sẽ nhận được một trang có "Cannot GET /doggos" – mã lỗi 404 lén lút. Đây là hành động "ẩn mã" 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 đó. Lỗi này sẽ bị lỗi 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 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 những URL đó.
Bất cứ khi nào không biết cần làm gì đối 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ủ cho biết không tìm thấy bất kỳ mục 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 URL vì người dùng sẽ nhấp vào kết quả tìm kiếm và tìm thấy thông báo lỗi, nhưng không thấy nội dung họ đang tìm kiếm (chẳng hạn như hình ảnh các chú chó).
Sửa máy chủ
Dự án này sử dụng một 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 Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
- Chọn tệp
server.js.
Tệp này chứa mã máy chủ. Công 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 điều này để phân phát tất cả các URL, để URL này cũng hoạt động với các URL khác 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 như 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 cụ thể.
- Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào
Fullscreen
(Toàn màn hình).
Giờ đây, thao tác 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ư dự kiến.