单页应用无需加载新页面即可显示不同的内容。为此,它们会对链接使用点击处理脚本和 History API。History API 可用于操控浏览器会话历史记录。这样,我们就可以在显示其他页面(在单页应用中通常称为“查看”)时更新网址。还可确保浏览器的后退按钮仍按预期工作。
查看此 Codelab 中的单页应用。它会显示猫或狗的图片,并提供用于在两种动物之间切换的链接。看起来一切正常!
揭露狡猾的 404 错误
很遗憾,该应用中存在一个细微的错误。我们一起来看看吧!
- 如需预览网站,请按 View App(查看应用)。然后按 Fullscreen(全屏)。
- 点击 Doggos 链接。请注意网址的变化。
- 重新加载应用。
您会看到一个包含“Cannot GET /doggos
”的页面,这是一个狡猾的 404 页面。之所以说它“狡猾”,是因为只要您只点击其中的链接,Web 应用似乎就能正常运行。在新的浏览器窗口中使用这些网址或刷新网页时,会出现中断。问题在于,服务器不知道如何响应对这些网址的请求。Web 应用中的 JavaScript 代码使用 History API 在这些网址之间导航,但服务器不知道如何处理这些网址。每当服务器不知道如何处理请求的网址时,都会返回 HTTP 状态代码 404
。出现此代码时,服务器会表示未找到请求的网址。
在这种情况下,搜索引擎不会将网址编入索引,因为用户点击搜索结果后会看到错误消息,但找不到他们要查找的内容(例如狗狗图片)。
修复服务器
此项目使用以 JavaScript 编写的 express.js 服务器。我们来修复一下服务器,使其响应为 index.html,然后单页应用会处理其余事宜。
- 点击 Remix to Edit 即可修改项目。
- 选择
server.js
文件。
此文件包含服务器代码。它会设置一个 express.js 服务器,并发送 index.html 的内容。只有当请求发送到网址 /
时,第 15 行中的路由设置才会提供 Web 应用。服务器还应该传送我们已经创建的其他网址我们将其更改为处理所有网址,以便将来也能处理其他网址。
为此,我们可以将从第 15 行开始的代码更改为以下代码:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/*
会匹配任何网址,并且服务器现在会针对任何给定网址使用 index.html
中的 Web 应用进行响应。
- 如需预览网站,请按 View App(查看应用)。然后按 Fullscreen(全屏)。
现在,刷新并在新的无痕式窗口中打开链接应该可以按预期运行。