单页应用可以显示不同的内容,而无需加载新页面。待办事项 因此,它们在链接和 History API 上使用点击处理程序。历史 API 允许 操纵浏览器会话历史记录。这样,当我们更新网址时 显示其他页面(在单页应用中通常称为“视图”)。它还 确保浏览器的后退按钮仍能按预期发挥作用。
请查看此 Codelab 中的单页应用。显示的是猫或狗 图片,并提供可在两种动物之间切换的链接。似乎可以正常使用 很好!
发现欺骗性 404
遗憾的是,该应用存在一个细微的错误。一起来看看吧!
- 如需预览网站,请按查看应用。然后按 全屏 。
- 点击 Doggos 链接。请注意网址的变化。
- 重新加载应用。
您访问了包含“Cannot GET /doggos
”的网页上面是欺骗性的 404 代码。它是“欺骗性”的
因为只要你点击此列表中的链接,
。在新的浏览器窗口中使用网址或刷新
页面。问题在于,服务器不知道如何响应
这些网址。我们的 Web 应用中的 JavaScript 代码使用 History API 来
可在它们之间导航,但服务器不知道如何处理它们。
只要服务器不知道对请求的网址执行什么操作,它就会做出响应
HTTP 状态代码 404
。服务器说它没有找到此代码
任何与请求的网址有关的内容
在这种情况下,搜索引擎不会将网址编入索引,因为用户点击 并找到错误消息,但找不到错误消息 例如狗的图片。
修复服务器
此项目使用采用以下编程语言编写的 express.js 服务器: JavaScript。让我们来修复服务器,使其以 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
。
- 如需预览网站,请按查看应用。然后按 全屏 。
现在,刷新并打开链接在新无痕式窗口中应该如下所示: 符合预期。