javascript - Express - 在单个请求中向浏览器发送页面和自定义数据？

Question

如何同时呈现页面并将我的自定义数据传输到浏览器。据我了解，它需要发送两层:第一层是模板，第二层是 JSON 数据。我想通过主干处理这些数据。

我从教程中了解到 express 和 bb app 交互如下:

1. res.render 向浏览器发送页面
2. 当document.ready触发jQuery.get到app.get('/post')
3. app.get('/post', post.allPosts) 发送数据到页面

这是三个步骤，如何一步完成？

var visitCard = {
  name: 'John Smit',
  phone: '+78503569987'
};

exports.index = function(req, res, next){
  res.render('index');
  res.send({data: visitCard}); 
};

我应该如何在页面上捕获这个变量 - document.card？

Answer 1

我创建了自己的小中间件函数，它向 res 对象添加了一个名为 renderWithData 的辅助方法。

app.use(function (req, res, next) {
    res.renderWithData = function (view, model, data) {
        res.render(view, model, function (err, viewString) {
            data.view = viewString;
            res.json(data);
        }); 
    };
    next();
});

它包含 View 名称、 View 模型以及您要发送到浏览器的自定义数据。它调用 res.render 但传入一个回调函数。这指示 express 将编译后的 View 标记作为字符串传递给回调，而不是立即将其传递到响应中。获得 View 字符串后，我将其作为 data.view 添加到数据对象中。然后我使用 res.json 将数据对象发送到浏览器并完成编译 View :)

编辑:

上面的一个警告是，请求需要使用 javascript 进行，因此它不能是整页请求。您需要一个初始请求来拉下包含将发出 ajax 请求的 javascript 的主页。

这对于当用户通过 AJAX 导航到新页面时尝试更改浏览器 URL 和标题的情况非常有用。您可以将新页面的部分 View 连同页面标题的一些数据一起发送回浏览器。然后，您的客户端脚本可以将部分 View 放在页面上它所属的位置，更新页面标题栏，并在需要时更新 URL。

如果您想将一个完整的 HTML 文档连同一些初始 JavaScript 数据一起发送到浏览器，那么您需要将该 JavaScript 代码编译到 View 本身中。这样做绝对有可能，但我从来没有找到不涉及一些字符串魔法的方法。

例如:

// controller.js
var someData = { message: 'hi' };
res.render('someView', { data: JSON.stringify(someData) });

// someView.jade
script.
    var someData = !{data};

注意:使用 !{data} 代替 #{data} 因为jade默认会转义 HTML，这会将所有引号转换为 " 占位符。

一开始看起来很奇怪，但它确实有效。基本上，您在服务器上获取一个 JS 对象，将其转换为字符串，将该字符串呈现到编译后的 View 中，然后将其发送到浏览器。当文档最终到达浏览器时，它应该如下所示:

// someSite.com/someView
<script type="text/javascript">
    var someData = { "message": "hi" };
</script>

希望这是有道理的。如果我要重新创建我原来的辅助方法来减轻第二种情况的痛苦，那么它看起来像这样:

app.use(function (req, res, next) {
    res.renderWithData = function (view, model, data) {
        model.data = JSON.stringify(data);
        res.render(view, model);
    };
    next();
});

所有这一切都是获取您的自定义数据对象，为您将其字符串化，将其添加到 View 的模型中，然后正常渲染 View 。现在你可以调用 res.renderWithData('someView', {}, { message: 'hi' });;您只需确保在 View 中的某个位置抓取该数据字符串并将其呈现为变量赋值语句。

html
    head
        title Some Page
        script.
            var data = !{data};

不会撒谎，这整件事感觉有点恶心，但如果它为您节省了一次额外的服务器之旅，而这就是您所追求的，那么这就是您需要做的事情。也许有人可以想出一些更聪明的方法，但我只是不明白如何才能让数据已经出现在第一次呈现的完整 HTML 文档中。

编辑2:

这是一个工作示例:https://c9.io/chevex/test

您需要拥有一个(免费)Cloud9 帐户才能运行该项目。登录，打开 app.js，然后点击顶部的绿色运行按钮。