让骨干路由与 pushstate 和 node.js/express 作为服务器一起工作答案

【问题标题】：Getting backbone routing to work with pushstate and node.js/express as server让骨干路由与 pushstate 和 node.js/express 作为服务器一起工作
【发布时间】：2014-03-27 19:06:03
【问题描述】：

我正在尝试构建一个单页面应用程序，前端使用backbone.js 和node.js/express 作为服务器，我想为根目录创建一个基本HTML 文件，然后当用户导航到任何路径时作为

mydomain.com/foo/bar

我希望能够通过 javascript 在客户端处理该路径，而不是往返于服务器。我正在阅读有关骨干路由和 HTML5 推送状态的信息。在this article 他这样描述推送状态，

事实上，PushState 只不过是 JavaScript 的标准 API，它允许我们通过将完整的 URL “推送”到浏览器的 URL 中来操纵浏览器历史记录，而无需往返服务器，并且使用 Javascript 响应 URL 的变化——所有这些都不需要使用 URL 哈希片段。

但是当我使用推送状态时，它确实会发出服务器请求并期望服务器在 /foo/bar 下提供内容。我不明白我怎么能避免这种情况。

现在让我们假设即使处于推送状态，当您直接访问此 URL 时，您的客户端也会在 mydomain.com/foo/bar 下发出服务器请求。在这种情况下，由于我提供的是默认 HTML 文件，并且此默认 HTML 文件中包含指向脚本的链接：

<script type="text/javascript" src="/scripts/myscript.js" ></script>

当这个 HTML 加载时，它开始在 /foo 目录而不是根目录下寻找脚本，因为服务器是在 /foo 下请求的，而 /foo 显然不存在。我该如何解决这个问题？

此时我真的很困惑。我想知道 URL 路由通常是如何在单页应用程序中完成的。任何帮助将不胜感激。您也可以参考我发布的关于同一问题的另一个问题：Backbone Router : Get rid of # in the URL

【问题讨论】：

前几天我也遇到了同样的问题。除了我在后端使用 node.js 和 express 来提供路由。我认为，根据我的经验，推送状态可能需要一些服务器端响应，对此持保留态度。在服务器上，我允许 express 在此路由 localhost:3300/chat 上呈现文件，而在客户端，我允许推送状态并在此路由被命中时呈现视图 localhost:3300/chat。
另一件有帮助的事情是像这样编写backbone.history Backbone.history.start({pushState: true, root: '/'}); 尝试添加根/ 您的应用程序/站点是否从主路由开始/
然后确保你的路由器设置正确appRoutes: { '' : 'profile', 'chat' : 'chat' }
默认根设置为 '/' 所以这不是问题。
是的，我在后端使用 express.js，但由于它是一个单页应用程序，因此对于不同的 url，我并没有真正的不同内容。它只是一个 HTML 文件。但问题是，当我从不同的路线交付它时，该 HTML 中链接的所有脚本也会变得混乱。

标签： javascript url backbone.js express url-routing

【解决方案1】：

您尝试实施的解决方案非常有趣，但并不那么简单。当您的服务器收到对mydomain.com/foo/bar 的请求时，您应该使用前端（JavaScript）应用程序可以获取的一些参数重定向到您的根目录，以了解原始请求的目的。例如：

客户端发送 GET http://mydomain.com/foo/bar
服务器重定向（响应 302 并设置 Location 标头）到 http://mydomain.com/#!/foo/bar
您的 SPA 已加载到浏览器中，在启动时您检查哈希并找到 #!/foo/bar，因此您删除哈希并触发 /foo/bar 路由（这是一个推送状态）。生成的 URL 又是 http://mydomain.com/foo/bar：用户浏览到的原始 URL。

Grooveshark 做了类似的事情，尽管它实际上用一个页面来响应在 1. 中发送的请求，它在客户端进行哈希替换，然后向服务器发送另一个请求。这对我来说似乎没有必要，也许我忽略了一些东西。

【讨论】：