如果未在根访问单页Web应用程序(SPA),则保证HTML信息

时间:2015-06-21 23:37:15

标签: javascript html node.js express

假设我有一个完全单页面的应用程序,它只提供HTML服务:

使用node.js Express服务器,可能如下所示:

{{1}}

我的问题是,如果最终用户拥有一个完全干净的缓存并且他点击应用程序的根目录,那么服务器将发送html文件(标题为' index.html')并且一切都很顺利。但是,如果用户具有完全干净的缓存并且除了根路径之外还有其他任何东西,那么用户的Web浏览器如何知道DOM应该是什么样的?换句话说,作为单页面应用程序设计器,如何确保此索引html页面始终代表应用程序在整个前端生命周期中的布局?

1 个答案:

答案 0 :(得分:1)

根据一些评论进行修改

您所指的概念称为 UI路由,这是单页面应用程序中常见的范例。 (Google Backbone UI路由器,AngularJS UI路由器等等。您将看到大量预先构建的示例,它们将为您提供如何实现自己的示例。)

从概念上讲,您在前端使用路由器,对于每个路由,它只是发送index.html的GET请求(第一次访问该页面)。然后,路由器解析路由(例如,/some-view),并根据该路由显示或隐藏index.html页面的特定部分。这不是一件小事,这就是人们为它构建框架的原因,但你一定可以自己实现它。

换句话说,每当用户访问路由www.yourwebsite.com/some-view时,它永远不会发送任何其他文件的GET请求......无论如何,您总是发送对根/的GET请求(但只是第一次加载页面。如果用户从一开始就转到/some-viewindex.html仍然被加载,但前端的路由器会解析该路由,并且逻辑只显示或隐藏页面的一部分。)

更多详情

您有几个选择:

  1. 您需要在后端为所有可能的路线创建路线(这不是单页应用)
  2. 您需要在前端处理UI路由(例如,在AngularJS中,您可以使用ngRoute,它只显示index.html的不同视图路由更改时的页面,但从不向服务器发送请求。)
  3. 在这种情况下,你实际上想要在后端做这样的事情:

    app.get('*',function(req,res,next){
    
       res.render('index',{});
    
    });
    

    因为用户可以在他们想要的任何UI路由中输入您的应用程序,但是每次都需要加载index.html页面(只需在前端使用不同的视图)。

    当然,您需要不同的路线来提供静态内容等,但这只是一个例子。

    旁注:如果使用ngRoute,我认为您不需要使用*制作一个包罗万象的路线。我想我们会告诉所有这些:“这取决于你正在使用的路由框架”。

相关问题