Tek Sayfalık Uygulamalar yeni bir sayfa yüklemeden farklı içerik gösterebilir. Yapılacaklar bu nedenle bağlantılar ve Geçmiş API'sindeki tıklama işleyicileri kullanır. Geçmiş API şunları sağlar: Tarayıcı oturum geçmişini değiştirme. Bu şekilde, aşağıdaki durumlarda URL'yi güncelleyebiliriz: farklı bir sayfa gösteren (Tek Sayfalık Uygulamalarda genellikle "görüntüleme" olarak adlandırılır). Aynı zamanda tarayıcının geri düğmesinin beklendiği gibi çalışmaya devam etmesini sağlar.
Bu codelab'deki Tek Sayfalık Uygulamaya göz atın. Kedi veya köpek gösteriliyor resimler ve iki hayvan arasında geçiş yapmak için bağlantılar sağlar. İşe yarıyor gibi görünüyor iyi!
Gizli 404'ü ortaya çıkarma
Ne yazık ki uygulamada küçük bir hata var. Şimdi bunları inceleyelim.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından,
Tam ekran
.
- Doggos bağlantısını tıklayın. URL'nin nasıl değiştiğine dikkat edin.
- Uygulamayı yeniden yükleyin.
"Cannot GET /doggos
" içeren bir sayfayla karşılaşıyorsunuz bir hata alırdı. "Gizli"dir,
çünkü yalnızca içindeki bağlantıları tıkladığınız sürece web uygulaması iyi çalışıyor gibi görünür.
somut olarak ortaya koyar. URL'ler yeni bir tarayıcı penceresinde kullanılırken veya sayfa yenilenirken bozuluyor
sayfasını ziyaret edin. Sorun, sunucunun bir isteğe nasıl yanıt vereceğini bilmemesidir;
kullanmayın. Web uygulamamızdaki JavaScript kodu, şu amaçlarla Geçmiş API'sini kullanıyor:
ancak sunucu bunlarla ne yapacağını bilmiyor.
Sunucu, istenen URL için ne yapılacağını bilmiyorsa
404
HTTP durum koduyla değiştirin. Bu kodla sunucu bulunamadı
herhangi bir şey URL'si giremez.
Bu durumda arama motorları URL'leri dizine eklemez çünkü bir kullanıcı ve hata mesajını bulur. Ancak, görüntülenen içeriği değil, köpek resimleri gibi.
Sunucuyu düzeltme
Bu proje, şu dilde yazılmış bir express.js sunucusu kullanır: JavaScript'e dokunun. Şimdi sunucuyu düzeltelim. Böylece, index.html ve tek sayfa uygulaması gerisini halleder.
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
server.js
dosyasını seçin.
Bu dosya sunucu kodunu içerir. Bir express.js sunucusu kurar ve
index.html'nin içeriği hakkında daha fazla bilgi edinin. 15. satırdaki rota ayarı yalnızca web uygulamasını sunar
İstekler /
URL'sine gittiğinde. Sunucu, istediğimiz diğer URL'leri de
oluşturuyor. Bunu tüm URL'leri sunacak şekilde değiştirelim. Böylece
ek URL'ler ekleyin.
Bunun için, 15. satırdan başlayan kodu aşağıdaki şekilde değiştirebiliriz:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/*
herhangi bir URL ile eşleşir ve sunucu artık web uygulamasıyla şurada yanıt verir:
Belirli bir URL için index.html
.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından,
Tam ekran
.
Bağlantıları yeni bir gizli pencerede yenileyip açmak artık bekleniyor.