将数据从 Node-Express 后端传递到 Vue 组件答案

【问题标题】：Passing Data from Node-Express backend to Vue component将数据从 Node-Express 后端传递到 Vue 组件
【发布时间】：2018-02-07 19:06:19
【问题描述】：

我仍在学习 Vue.js 2，所以如果这个问题有点愚蠢，我深表歉意。我正在使用 MongoDB、Node、Express 和 Vue 构建一个应用程序。通常我会使用模板引擎，例如 Ejs，通过 Express 的 res.render 方法传递的数据可以很容易地在模板中捕获。

是否有类似的方式将数据从后端传递到根 Vue 组件？例如，通常一个 get 请求从 Mongodb 获取一些数据，express 将渲染模板文件并将数据传递给它。

app.get("/gallery/:id", function(res, req) {

var id = req.params.id;

database.findById(id, function(err, data) {
....
res.render("home", data);

}
});

现在我的根 Vue 应用程序已附加到 html 文件。我希望能够使用从数据库返回的数据动态呈现应用程序。

在从 api 流式传输数据并通过套接字将其传递给我的 Vue 组件之前，我已经构建了一个应用程序，但我觉得在这种情况下使用套接字是不必要的。

【问题讨论】：

标签： node.js mongodb express vue.js vuejs2

【解决方案1】：

使用 http。有什么问题？您可以使用 XmlHttp，或者很多人似乎都在使用 Axios。在页面的 onload 中触发调用，或使用 vue 生命周期挂钩之一。非常好的 vue 文档对于如何以及何时执行此操作没有太多要说的。我们在页面的onload中做，页面数据请求返回的时候实例化vue。

【讨论】：

是的，我刚刚想通了。我只是在关注文档并构建东西，不知道有一个 vue-resource 包。谢谢你的帮助:)
Vue-resource 已被移至次要位置。我没有意见。我们仍然在我写的 xmlhttp 上使用一个瘦 Promise 包装器。需要变得现代。

【解决方案2】：

问题已经得到解答，但我想分享我的方法。我一直在尝试使用 res.render() 渲染一个对象服务器端，将它放在一个 div 中 display: none，然后在客户端抓取对象并将其传递给 Vue 的数据属性。

【讨论】：