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

Question

我需要使用express(> 3.0)框架在nodejs(v1.8.15)中动态加载/呈现页面的一部分.通常,我想创建一个单页面的应用程序.

我在页面顶部有一个带有链接的菜单.单击链接将更改下面的内容,如在AJAX页面加载中.

例如:

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

如果我按'注册'链接:

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

在express中,我在服务器上有路由:

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);
}

看完这个,我想通了,我应该使用socket.io.我很了解套接字,因此很容易从客户端向服务器发送有关"点击链接"的数据.

Q1:如何动态渲染/加载页面,就像我在快递中写的那样？

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

顺便说一句,我读过有关Derby和SocketStream的内容,但我不明白.

Q2:我可以在我的目标中使用Derby或SocketStream(网站功能:登录,注册,聊天)吗？怎么样？

如果SocketStream是我需要的,那将是非常糟糕的,因为Heroku不能使用它.

Answer 1

Q1)这实际上很简单,不需要Socket.io,Derby等等.您可以通过ajax使用任何方法调用任何expess路由,使用jQuery使ajax非常容易.在你的例子中,假设你的容器HTML文件有一个id为'container'的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 + basic Express将为您提供所需的一切!