單一頁面應用程式可以顯示不同內容,不必載入新網頁。方法是使用連結和 History API 的點擊處理常式。記錄 API 可讓您管理瀏覽器工作階段記錄。如此一來,當顯示其他網頁 (通常在單頁應用程式中稱為「檢視」) 時,我們就能更新網址。這也能確保瀏覽器的返回按鈕正常運作。
查看本程式碼研究室中的單頁應用程式。當中會顯示貓或狗的圖片,並提供切換這兩種動物的連結。看起來還不錯!
發掘幕後花絮 404
很抱歉,應用程式存在細微錯誤。一起來看看!
- 如要預覽網站,請按下「查看應用程式」,然後按下「全螢幕」圖示 。
- 點選「Doggos」連結。請注意網址的異動。
- 重新載入應用程式。
您有一個頁麵包含「Cannot GET /doggos
」- 這很神聖 404。這算是「幕後花絮」,因為只要您只按一下其中的連結,網頁應用程式看起來就能正常運作。在新的瀏覽器視窗中使用網址,或是重新整理頁面時,網址就會損毀。問題在於伺服器不知道如何回應這些網址的要求。網頁應用程式中的 JavaScript 程式碼會使用 History API 來瀏覽,但伺服器不會不知道該如何因應。每當伺服器不知道要如何處理要求的網址時,就會回應 HTTP 狀態碼 404
。收到這個程式碼後,伺服器表示
已找不到任何要求的網址
在此情況下,搜尋引擎將不會為網址建立索引,因為使用者點選搜尋結果後找到錯誤訊息,而不是要尋找的內容 (例如犬隻圖片)。
修正伺服器
這項專案使用以 JavaScript 編寫的 express.js 伺服器。讓我們修正該伺服器,如此一來,伺服器就會回應 index.html,而單一頁面應用程式就會接手完成剩下的工作。
- 按一下「Remix to Edit」,讓專案可供編輯。
- 選取
server.js
檔案。
這個檔案包含伺服器程式碼。它會設定 express.js 伺服器,並傳送 index.html 的內容。第 15 行的路徑設定只有在要求前往 /
網址時,才會提供網頁應用程式。該伺服器也會提供我們先前建立的其他網址。請進行變更以便提供所有網址,日後也能用於其他網址。
為此,我們可以從第 15 行開始變更程式碼,如下所示:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/*
會比對任何網址,而伺服器現在會針對任何指定網址以 index.html
中的網頁應用程式回應。
- 如要預覽網站,請按下「查看應用程式」,然後按下「全螢幕」圖示 。
現在在新的無痕式視窗中重新整理及開啟連結後,應該就能正常運作。