感谢您分享这篇文章 - 这是一篇很棒的文章(对我来说非常及时)。
您实际上在问两个问题 - 1)如何加载数据以在没有客户端交互的情况下渲染 html 客户端;2)当用户实际请求路由时如何将静态文件发送到浏览器。
没有用户交互的渲染页面和客户端 MVC 上的我的 2
1) 页面加载后,您需要运行所有初始化/数据加载/渲染代码来渲染页面。如果您在客户端中使用 jQuery(就像大多数 Web 应用程序一样):
$(document).ready(function(){
// Your code here
});
它只是复制自jQuery 文档 http://docs.jquery.com/How_jQuery_Works#Launching_Code_on_Document_Ready.
大多数人使用主干/下划线在客户端构建 MVC 层。尽管有很多更奇特(并且看起来更强大)的客户端框架可以做到这一点,但这两个框架为您提供了足够的功能,而不会限制您的选择或降低您在某些时候肯定需要的灵活性。 Underscore(无论如何都是骨干依赖)除了许多非常有用的功能(如果你花一个小时阅读整页手册,你会惊讶于 JavaScript 的可能性)还有它自己的模板,这些模板看似简单,但同时time 非常强大,因为它们只在模板内运行所有 javascript。
尽管在模板中包含应用程序逻辑通常是一件坏事(因为下划线允许,而大多数更高级和“更强大”的模板引擎则不允许),但能够在模板中添加一些逻辑通常非常方便且更好当您发现自己陷入困境时(您经常会这样做),而不是重新设计大量应用程序逻辑或添加其他模板。
另外,我的观点是避免使用 require.js 或任何其他模块加载器(直到你真的必须使用它们),正如我所写的here https://stackoverflow.com/questions/14037727/best-backbone-js-and-require-js-boilerplate-for-huge-apps/14041967#14041967.
为任何路由提供静态 html 并为 node-as-api 提供 nginx 配置
2)您需要重写对所有路由的请求,以使用同一个静态html文件(或多个依赖于路由的html文件)进行响应。根据您的偏好或应用程序要求,它可以是带有空正文的文件(在这种情况下,用户将看到一个空白页面,直到您的数据加载并且页面呈现/插入到正文中)、一些欢迎页面甚至一些模板页面,其中显示的不是数据而是旋转轮。
重写请求的方式取决于您用于提供静态内容和代理请求的 Web 服务器。如果您使用 Apache(不太可能选择 Node,因为它是同步的),您需要使用 .htaccess 文件。如果您像大多数使用 Node 的人一样使用 Nginx,则需要在配置文件的服务器块内使用重写指令,如下例所示:
server {
listen 80;
server_name example.com;
root html/example;
access_log logs/example.log;
# location block below sends specific static assets from inside your app's
# public directory when routes /img, /js, /css, /views are requested
location ~ /(img|js|css|views)/ {
rewrite ^(.*)$ /public/$1 break;
}
# location block below proxies all data requests (/api route) to your node app
location /api {
proxy_pass http://localhost:3000/;
proxy_redirect http://localhost:3000/ http://example.com;
proxy_connect_timeout 30s;
proxy_read_timeout 30s;
proxy_cookie_domain localhost example.com;
#proxy_http_version 1.1;
}
# location block below rewrites all other routes to a specific html file
# that is sent to the client and that is supposed to load all JS and
# static assets to render a page
location / {
rewrite ^(.*)$ /public/app.html;
}
}
您在客户端中呈现页面的方式(以及您从服务器请求的数据)将取决于用户请求的路线(您可以在 javascript 中访问/更改该路线,也可以设置/访问/更改 cookie )。应用程序内部的所有导航(当用户单击任何按钮或内部链接时 - 您需要捕获所有单击事件)都会发生,而无需对已加载的页面或静态资源发出额外请求,仅将数据请求发送到服务器。
我希望它有帮助。
搜索引擎优化更新
仅当您不需要由机器人索引的任何页面并且对需要静态 html 的其他 Web 应用程序(例如 facebook)可见时,建议的 nginx 配置才适用。对于要编入索引的页面,您需要添加条件以不同方式路由来自机器人的请求(基于 $http_user_agent),并为这些路由呈现一些静态 html。但它可以是不同的纯语义 html(更小,没有设计图像、布局 div/类、UI 元素和 javascript,以减少来自爬行机器人和 Web 应用程序的请求)。