如何动态表达/加载快递页面？ [英] How to dynamically render/load pages in express?

问题描述

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

I need to dynamically load/render part of a page in nodejs (v1.8.15) with express (>3.0) framework. Generally, I want to create a single-page app.

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

I have a menu at the top of the page with links. Clicking on the links will change the content below, as in AJAX page loading.

例如：

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

如果我按下注册链接：

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

我在服务器上确实有路由：

In express I have routes on the server:

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。我知道套接字，因此可以很容易地将有关点击链接的数据从客户端发送到服务器。

After reading this, I figured out that I should use socket.io. I know sockets well, so it will be easy to send data about 'clicking on link' from the client to the server.

问题1：如何动态呈现/加载页面就像我在express中写的一样？

是的，我可以使用AJAX进行页面加载，但对 .post可以使用快速方法中的方法？
我应该如何组织我的想法来创建这样的网站？

Yes, I could use AJAX for page loading, but will it work for .post methods in express? How should I organize my thoughts to create such a site?

顺便说一句，我已经读过< a href = http://derbyjs.com/ rel = noreferrer>德比和 SocketStream ，但我听不懂。

By the way, I've read about Derby and SocketStream, but I didn't understand.

第二季度：我能否在目标中使用Derby或SocketStream（站点功能：登录，注册，聊天）？

如果我需要SocketStream，那将非常糟糕，因为Heroku无法使用它。

If SocketStream is what I need, that would be very bad, because Heroku doesn't work with it.

推荐答案

Q1）实际上非常简单，不需要Socket.io，Derby或其他任何东西。您可以通过ajax以任何方法调用任何expess路由，使用jQuery使ajax非常容易。在您的示例中，让我们假设您的容器HTML文件具有一个ID为 container的div，在该div中您希望将加载了ajax的内容放到这里：

Q1) This is in fact very simple, no need for Socket.io, Derby or whatever. You can call any expess route with any method through ajax, using jQuery makes ajax very easy. In your example, let's suppose your container HTML file has a div with id 'container', which is where you want the ajax-loaded content to go:

$.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。

Express supports all HTTP verbs (GET, POST, PUT etc.). For loading pages dynamically, use GET, then when a user enters some login information you can POST it to an Express route that will tell you if it is valid or not, and you use jQuery to modify the DOM accordingly.

Q2）如Q1所述，无需使用Derby或SocketStream。普通的旧jQuery +基本Express将使您到达想要的地方！

Q2) As said in Q1, no need to use Derby or SocketStream. Plain old jQuery + basic Express will get you where you want!

这篇关于如何动态表达/加载快递页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！