單頁應用程式不需載入新頁面就能顯示不同的內容。待辦 因此,它們會對連結和 History API 使用點擊處理常式。「歷史」 API 可讓您 操控瀏覽器工作階段紀錄。以便我們在偵測到問題時 顯示不同網頁 (通常在單頁應用程式中稱為「檢視」)。此外, 確認瀏覽器的返回按鈕是否正常運作。
我們來看看本程式碼研究室中的單一頁面應用程式。顯示貓或狗 並提供切換介面的連結。似乎可以用 沒問題!
揭開幕後的 404 錯誤
遺憾的是,應用程式裡有細微錯誤。一起來看看!
- 如要預覽網站,請按下「查看應用程式」。然後按下
全螢幕
。
- 按一下「Doggos」連結。請注意網址的變更情形。
- 重新載入應用程式。
系統顯示了一個含有「Cannot GET /doggos
」的頁面出現 the neaky 404會說「偷襲」
因為只要您只在
基礎架構在新的瀏覽器視窗或重新整理
頁面。問題在於伺服器不知道如何回應
這些網址。網路應用程式中的 JavaScript 程式碼使用 History API
但伺服器不知道如何處理這些 Pod
當伺服器不知道要如何處理要求的網址時,
並顯示 HTTP 狀態碼 404
。伺服器指出找不到這個驗證碼
任何有關要求網址的資訊
在此情況下,搜尋引擎不會為網址建立索引,因為使用者 找到錯誤訊息,但找不到內容 例如狗狗的相片
修正伺服器
此專案使用 express.js JavaScript。讓我們修正伺服器,讓伺服器傳回 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
。
- 如要預覽網站,請按下「查看應用程式」。然後按下
全螢幕
。
在新的無痕式視窗中重新整理及開啟連結後,現在應可正常運作 。