如何在快递中动态呈现/加载页面？

Question

我需要使用 express (>3.0) 框架在 nodejs (v1.8.15) 中动态加载/渲染页面的一部分。一般来说，我想创建一个单页应用程序。

我在页面顶部有一个带有链接的菜单。单击链接将更改下面的内容，就像在 AJAX 页面加载中一样。

例如：

>home|login|signup|chat
..content for home..

如果我点击“注册”链接：

home|login|>signup|chat
..content for signup..

在快递中，我在服务器上有路由：

var express = require('express');
var app = express();

app.get('/signup', function(req, res) {
    // render signup.jade
    res.render('signup');
}
app.post('/signup', function(req, res) {
    // .. work with information
    if (ok) res.send('ok', 200); else res.send(error, 200);
}

阅读this 后，我发现我应该使用socket.io。我很了解套接字，因此很容易将有关“单击链接”的数据从客户端发送到服务器。

Q1：如何像我在 express 中写的那样动态渲染/加载页面？

是的，我可以使用 AJAX 进行页面加载，但它是否适用于 express 中的 .post 方法？ 我应该如何组织我的想法来创建这样一个网站？

顺便说一句，我读过Derby和SocketStream，但我不明白。

Q2：我可以在我的目标中使用 Derby 或 SocketStream（网站功能：登录、注册、聊天）吗？怎么样？

如果我需要 SocketStream，那就太糟糕了，因为 Heroku 不能使用它。

Answer 1

Q1) 这其实很简单，不需要 Socket.io、Derby 什么的。你可以通过ajax用任何方法调用任何expess路由，使用jQuery让ajax变得非常简单。在您的示例中，假设您的容器 HTML 文件有一个 id 为“容器”的 div，这是您希望 ajax 加载的内容所在的位置：

$.ajax({ url: 'http://yoursite.com/signup'
     , type: 'GET'
     , dataType: 'html'
    })
.done(function(data) {
  $('#container').html(data);
})
.fail(function() {
  console.log("Something went wrong!");
});

Express 支持所有 HTTP 动词（GET、POST、PUT 等）。对于动态加载页面，使用 GET，然后当用户输入一些登录信息时，您可以将其发布到 Express 路由，该路由会告诉您它是否有效，然后您使用 jQuery 相应地修改 DOM。

Q2) 正如在 Q1 中所说，无需使用 Derby 或 SocketStream。普通的旧 jQuery + 基本 Express 将带你到你想要的地方！