node.js和单页Web应用程序

单页应用程序是指驻留在单个HTML文档上的应用程序。这意味着，如果要根据应用程序的状态向用户显示一些不同的内容，则需要进行一些DOM操作（用不同的HTML剪切并替换当前文档的某些元素）以进行更新用户看到的“视图”。如果您觉得这很对不起，请不要冒犯。我想我将从这里开始。和我呆在一起，我将解释（或多或少）您的路由情况如何发生。

URL由几个不同的部分组成，每个部分都通知浏览器特定的信息位，以便下载用户尝试访问的资源。通常，您正在寻找的资源不在某处的服务器上，并且浏览器知道这一点是因为URL中的部分（例如“协议”（“ http：”）和“主机”（“ www.mydomain.com”）），因此它会转到该服务器以查找您的请求。URL中还有“查询”参数，这些参数可向服务器提供有关特定操作的一些附加信息，例如搜索查询的搜索字词。在查询参数之后，是“哈希”。哈希是单页应用程序发生魔术的地方...嗯，好吧.....

首先介绍一下哈希。当您在URL中添加“＃”时，浏览器随后会将其后的信息解释为当前显示的文档中的某个位置（元素）。这意味着，如果您具有一个'id'为'main'的元素，并且将'#main'添加到URL的末尾，例如：'http：//www.example.com#main'，则浏览器将“滚动”（通常是“跳转”）到该元素的开头，以便您可以看到它。但是请注意，如果您键入“ http://www.example.com/#main ”（哈希与URL以斜杠分隔），则会强制重新加载整个页面，浏览器将尝试查找服务器上名称为“ #main”的文件（我敢打赌找不到）。

这里的要点是，如果URL中存在哈希，浏览器将不会尝试导航到当前文档，但上面提到的情况当然是例外，这很好，因为单页应用程序不想从页面导航或从服务器请求新文档。（看看单页应用程序的路由有何不同？）

现在，关于散列的全部内容对于单页应用程序来说并不重要，因为您无需处理所有内容就可以创建一个。您真正需要的就是一堆单击处理程序和DOM操作...但是，这意味着用户将无法共享应用程序中特定视图的链接。该URL将永远不会更改，并且我们将永远无法直接导航到任何特定视图。我们将始终从您应用的起始位置开始，这很容易会令人讨厌。

如果您的单页应用程序将具有不同的视图，并且您希望用户能够通过书签或链接直接导航到特定视图，则除了前端应用程序之外，您还需要在前端实施某种形式的路由您将需要在后端上实现的路由（数据API等的路由），这意味着您将需要使用哈希。

我不想研究不同的框架如何在前端完成路由，但这基本上是在用户单击链接时更新浏览器的地址字段，并查看地址栏以确定当前URL是什么的问题，将与该URL关联的HTML加载到文档树中指定位置的DOM中。

因此，在单页应用程序中，您在服务器上有一条路由来处理呈现应用程序HTML文档（index.html），并且有一些路由来负责处理应用程序的数据（在Windows中创建新实例）。数据库，登录和注销，编辑或销毁数据库中的实例，以及获取数据...），这些都是通过AJAX请求调用的。

实际上，这是一个相当复杂的情况，HTML5允许我们放弃哈希（借助于服务器上的某些链接重写），还能够像使用“返回”按钮和“前进”按钮一样使用“返回”按钮实际上已经离开了原始文档（我们之所以没有这样做，是因为我们仅将浏览器指向完全相同的URL，仅使用经过修改的哈希值，因此没有新的页面加载发生）。传统的网站导航和链接可以通过使用浏览器的History API来实现，该API从IE 10开始就可以用于IE（我相信），其余的大型浏览器供应商早就使用了它，因此可以利用这些框架这项技术将允许您的用户浏览您的应用，而无需在URL中添加哈希。

应该使用AJAX从服务器请求JSON。AJAX请求将始终命中您的服务器，因为您没有在AJAX请求中包含哈希符号（这样做很可笑，因为哈希仅用于文档内浏览），因此服务器端路由必须负责公开您的数据API（考虑RESTful）。尽管这不是他们在单页应用程序中的唯一目的，但这也许是他们最重要的目的。

总结一下，您将有两组路线。一个在客户端（作为AngularJS或EmberJS这样的客户端框架的一部分，该列表继续出现……我更喜欢Angular，但是该学习曲线相当陡峭。），另一个在服务器上。当您考虑“服务器路由”时，请考虑数据API。当您想到“页面路由”时，请记住，所有这些操作都是由您在初始服务器响应中附带的javascript在客户端上处理的（这是向浏览器呈现HTML所涉及的唯一且唯一必要的服务器端路由，加载您的“ index.html”以及所有必要的脚本和样式表等）。您将使用express.static中间件来提供静态文件，因此您不必担心为这些东西分配路由。

编辑快速介绍AJAX实现。在服务器上，您将拥有与Alex所提供的示例类似的路由，并且将使用您的框架或所选库公开的XMLHttpRequest（XHR）对象从客户端对这些URL进行调用。现在，对于框架/库来说，将这些请求作为Promises来实现或多或少是标准和最佳实践，网址为http://wiki.commonjs.org/wiki/Promises/A。您应该自己阅读一些有关它的内容，但是我可以通过说它是一个异步操作来总结一下它，它类似于同步操作中的“尝试，捕捉，抛出”。您将实例化一个Promise对象，并通过它尝试通过GET请求从服务器加载数据。确保已分配功能来处理对发出请求的URL的请求（服务器端路由）！您实例化并随后通过服务器向服务器发出请求的该对象承诺，一旦请求从服务器返回，该请求的结果将返回给您（无论是否成功）。如果成功，它将调用您编写的函数，并将向其提供来自服务器的数据。如果失败，它将调用其他函数，

希望能帮助回答您的问题。