node.js和单页web应用程序

我正在查看后端的express.js和客户端的js。
我的应用程序是一个单页Web应用程序

服务器只提供JSON消息,我的问题是关于express的“路由”。
是否应该使用路由来连接UI和服务器端业务逻辑?
这将如何与我的单页应用程序一起工作

比如说,客户机向服务器发出Ajax调用,在数据库中查找值,并且有一个服务器端脚本将JSON返回到UI。这个UI和节点脚本关系是如何设置的

有人能解释一下吗

单页应用程序是那些生活在单个HTML文档上的应用程序。这意味着,如果希望根据应用程序的状态向用户显示一些不同的内容,则需要执行一些DOM操作(剪切当前文档的某些元素并用不同的HTML替换),以便更新用户看到的“视图”。对不起,如果这对你来说很明显,请不要生气。我想我应该从这里开始。跟我来,我会向你解释你的路线情况(或多或少)会怎样

URL由几个不同的部分组成,每个部分向浏览器通知下载用户试图访问的资源所需的特定信息位。通常,您正在查找的资源位于某个服务器上的某个位置,而浏览器知道这一点,因为URL中有“协议”(“http:”)和“主机”(“www.mydomain.com”)等内容,所以它会转到该服务器以查找您请求的内容。URL中还有“查询”参数,这些参数向服务器提供有关特定操作的一些附加信息,如搜索查询的搜索词。在查询参数之后是“hash”。散列是单页应用程序的神奇之处。。。呃,嗯,有点

首先是关于散列的一点。将“#”添加到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)的路由,您有负责处理应用程序数据的路由(在数据库中创建新实例、登录和注销、编辑或销毁数据库中的实例以及获取数据…)通过AJAX请求调用

这实际上是一个相当复杂的情况,HTML5允许我们放弃散列(借助服务器上的一些链接重写),也可以使用“后退”和“前进”按钮,就好像我们已经离开了原始文档一样(我们没有这样做,因为我们只将浏览器指向了完全相同的URL,只有经过修改的哈希值,因此没有出现新的页面加载)。传统的站点导航和链接可以通过利用浏览器的历史API来实现,该API可用于从版本10开始的IE(我相信),其他大型浏览器供应商早就开始使用它了,因此利用这项技术的框架将允许用户在URL中不使用散列来导航应用程序。解释这是一种消遣,对于理解单页应用程序中的路由是不必要的,但这很有趣,你必须学会不管怎么说,可能

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

所以,总而言之,您将有两组路由。一组在客户端(作为客户端框架(如AngularJS或EmberJS)的一部分,列表还有很多……我更喜欢AngularJS,但这一组的学习曲线相当陡峭。),一个在服务器上。当您考虑“服务器路由”时,请考虑数据API。当您考虑“页面路由”时,请记住,所有这些都是在客户机上通过初始服务器响应交付的javascript处理的(这是将HTML呈现到浏览器、加载“index.HTML”以及所有必要的脚本和样式表等时唯一必需的服务器端路由)。您将使用express.static中间件来服务静态文件,因此您不必担心为这些文件分配路由

编辑对AJAX实现的简要介绍。
在服务器上,您将拥有类似于Alex作为示例提供的路由,并且您将使用任何XMLHttpRequest(XHR)从客户端调用这些URL对象是由您选择的框架或库公开的。现在,框架/库将这些请求作为承诺来实现或多或少被认为是标准和最佳实践http://wiki.commonjs.org/wiki/Promises/A. 您应该自己阅读一些关于它的内容,但我可以总结一下,它是一个异步操作系统定量与同步操作中的“try、catch、throw”类似。您将实例化一个promise对象,并通过它尝试从服务器加载数据,例如,通过GET请求。确保您已分配函数来处理向您发出请求的URL发出的请求(服务器端路由)!您实例化并随后通过该对象向服务器发出请求,该对象承诺在从服务器返回请求结果后将返回给您(无论请求是否成功)如果成功,它将调用您编写的函数,并向其提供来自服务器的数据。如果失败,它将调用另一个同样由您编写的函数,并向其提供错误对象(或“失败原因”),以便您可以适当地处理错误

希望这有助于回答你的问题

发表评论