Ứng dụng trang đơn có thể hiển thị nội dung khác mà không cần tải trang mới. Việc cần làm vì vậy, chúng sử dụng trình xử lý lượt nhấp trên các đường liên kết và API Lịch sử. Lịch sử API cho phép thao túng nhật ký phiên duyệt web của bạn. Bằng cách này, chúng tôi 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). Điều 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 tìm hiểu về Ứng dụng một trang trong lớp học lập trình này. Màn hình cho thấy mèo hoặc chó hình ảnh và cung cấp các liên kết để chuyển đổi giữa hai động vật. Có vẻ như có hiệu quả tốt!
Khám phá lỗi 404 lén lút
Rất tiếc là có một lỗi nhỏ trong ứng dụng. Hãy cùng tìm hiểu nào!
- Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn
Toàn màn hình
. - Nhấp vào đường liên kết Chó chó. Hãy lưu ý cách URL thay đổi.
- Tải lại ứng dụng.
Bạn thấy một trang có "Cannot GET /doggos" đó là lỗi 404 lén lút. Video này mang tính "bí mật",
vì ứng dụng web có vẻ hoạt động tốt miễn là bạn chỉ nhấp vào liên kết trong
nó. 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
. Vấn đề là máy chủ không biết cách phản hồi một yêu cầu
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ử để
điều hướng giữa chúng nhưng máy chủ không biết phải làm gì với chúng.
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 không tìm thấy
bất kỳ nội dung nào cho URL được yêu cầu.
Công cụ tìm kiếm sẽ không lập chỉ mục URL trong trường hợp này, bởi vì người dùng sẽ nhấp vào trên kết quả tìm kiếm và tìm thông báo lỗi nhưng không tìm thấy nội dung tìm kiếm, chẳng hạn như hình ảnh về chó.
Sửa lỗi máy chủ
Dự án này sử dụng máy chủ express.js được viết bằng JavaScript. Hãy khắc phục sự cố máy chủ để máy phản hồi bằng http://index.html và 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 có 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ủaindex.html. Quy trình thiết lập tuyến đường trong dòng 15 chỉ phân phát qua ứng dụng web
khi các yêu cầu chuyển đến URL /. Máy chủ cũng sẽ phân phối các URL khác mà chúng tôi
đã tạo. Hãy thay đổi điều này để phân phối tất cả URL để nó 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 bất kỳ URL nào và máy chủ hiện phản hồi bằng ứng dụng web trong
index.html cho bất kỳ URL cụ thể nào.
- Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn
Toàn màn hình
.
Tính năng làm mới và mở liên kết trong cửa sổ ẩn danh mới giờ đây sẽ hoạt động như như dự kiến.