Aplikacje na jednej stronie mogą wyświetlać różne treści bez wczytywania nowej strony. Do zrobienia więc używają modułów obsługi kliknięć w linkach i interfejsie History API. Historia API umożliwia manipulowania historią sesji przeglądarki. Dzięki temu możemy zaktualizować URL, gdy pokazywanie innej strony (zwykle jest to nazywane „widokiem” w aplikacjach jednostronicowych). Dodatkowo sprawdź, czy przycisk Wstecz w przeglądarce działa zgodnie z oczekiwaniami.
W ramach tego ćwiczenia z programowania przyjrzymy się aplikacji składającej się z pojedynczej strony. Wyświetla kota lub piesa i linki do przełączania się między nimi. Wygląda na to, że działa dobrze!
Wykrywanie tajemnicze 404
Niestety w aplikacji występuje drobny błąd. Spójrzmy!
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij
Pełny ekran
- Kliknij link Doggos. Zwróć uwagę, jak zmienił się adres URL.
- Załaduj ponownie aplikację.
Wyświetlono stronę z wartością „Cannot GET /doggos” to podstępny błąd 404. Jest niejasna,
Ponieważ aplikacja internetowa działa dobrze, o ile klikasz tylko linki
. Przestaje on działać przy użyciu adresów URL w nowym oknie przeglądarki lub przy odświeżaniu
stronę. Serwer nie wie, jak odpowiedzieć na żądanie dotyczące
tych adresów URL. Kod JavaScript w naszej aplikacji internetowej korzysta z interfejsu History API do
ale serwer nie wie, co z nimi zrobić.
Gdy serwer nie wie, co zrobić z żądanym adresem URL, odpowiada
z kodem stanu HTTP 404. Po jego użyciu serwer informuje, że nie znalazł
wszystkie wartości w żądanym adresie URL.
W tym przypadku wyszukiwarki nie zindeksują adresów URL, ponieważ użytkownik kliknąłby w wynikach wyszukiwania i wyświetla komunikat o błędzie, ale nie treść takich jak zdjęcia psów.
Naprawianie serwera
Ten projekt wykorzystuje serwer express.js napisany w języku JavaScriptu. Naprawmy serwer, by odpowiadał za pomocą pliku index.html i aplikacja strony zajmie się resztą.
- Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
- Wybierz plik
server.js.
Ten plik zawiera kod serwera. Konfiguruje serwer express.js i wysyła
zawartość pliku index.html. Konfiguracja trasy w wierszu 15 jest obsługiwana tylko przez aplikację internetową.
gdy żądania trafiają na adres URL /. Serwer powinien także podawać inne adresy URL,
utworzone przez użytkowników. Zmieńmy to ustawienie tak, by wyświetlały się wszystkie adresy URL, by wyświetlały się
o dodawaniu kolejnych adresów URL w przyszłości.
W tym celu możemy zmienić kod zaczynający się w wierszu 15 na taki:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* pasuje do dowolnego adresu URL, a serwer odpowiada teraz aplikacji internetowej w
index.html dla dowolnego adresu URL.
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij
Pełny ekran
Odświeżanie i otwieranie linków w nowym oknie incognito powinno teraz działać jako nie jest oczekiwany.