感谢分享这篇文章 - 这是一篇很棒的文章(对我来说非常及时)。
您实际上是在问两个问题 - 1)如何在没有客户端交互的情况下加载数据以呈现 html 客户端,以及 2)如何在用户实际请求路由时将静态文件发送到浏览器。
在没有用户交互的情况下渲染页面和我在客户端 MVC 上的 ¢2
1)您需要在页面加载后运行所有初始化/数据加载/渲染代码来渲染页面。如果您在客户端使用 jQuery(就像大多数 Web 应用程序一样):
$(document).ready(function(){
// Your code here
});
它只是从jQuery docs复制而来。
大多数人使用主干/下划线在客户端构建 MVC 层。尽管有很多更高级(并且看起来更强大)的客户端框架可以做到这一点,但这对夫妇为您提供了足够的功能,而不会限制您的选择或降低您在某些时候肯定需要的灵活性。下划线(无论如何都是骨干依赖)除了许多非常有用的功能(如果你花一个小时阅读整个一页手册,你会惊讶于 JavaScript 的可能)有自己的模板,这些模板看似简单,同时time 非常强大,因为它们只是在模板中运行所有 javascript。
尽管在模板中包含应用程序逻辑通常是一件坏事(因为下划线允许,而大多数更高级和“更强大”的模板引擎则不允许),但能够在模板中添加一些逻辑通常非常方便且更好当您发现自己处于某个狭窄的角落时(通常会这样),而不是重新设计大量应用程序逻辑或添加额外的模板。
另外,我的意见是避免使用 require.js 或任何其他模块加载器(直到你真的必须使用它们),就像我在这里写的那样。
为任何路由提供静态 html,为 node-as-api 提供 nginx 配置
2)您需要重写对所有路由的请求,以使用相同的静态 html 文件(或多个依赖于路由的 html 文件)进行响应。根据您的偏好或应用程序要求,它可以是具有空正文的文件(在这种情况下,用户将看到一个空白页面,直到您的数据被加载并且页面在正文中呈现/插入),一些欢迎页面甚至一些模板页面,其中显示的是纺车而不是数据。
重写请求的方式取决于用于提供静态内容和代理请求的 Web 服务器。如果您使用 Apache(Node 不太可能选择,因为它是同步的),您需要使用 .htaccess 文件。如果您像大多数使用 node 的人一样使用 Nginx,则需要在配置文件中的 server 块内使用 rewrite 指令,如下例所示:
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 )。应用程序内部的所有导航(当用户单击任何按钮或内部链接时 - 您需要捕获所有单击事件)都会发生,而不需要对已加载的页面或静态资产的额外请求,只有数据请求被发送到服务器。
我希望它有所帮助。
搜索引擎优化更新
nginx 的建议配置仅适用于您不需要任何由机器人索引的页面并且对需要静态 html 的其他 Web 应用程序可见的页面,例如 facebook,例如对于您想要索引的页面,您需要添加条件以不同的方式路由来自机器人的请求(基于 $http_user_agent),并为这些路由呈现一些静态 html。但它可以是不同的纯语义 html(更小,没有设计图像、布局 div/类、UI 元素和 javascript 以减少来自爬虫机器人和 Web 应用程序的请求)。