如何使用 vue.js 将服务器端数据绑定到一些 html 元素答案

【问题标题】：How to bind server side data to some html element using vue.js如何使用 vue.js 将服务器端数据绑定到一些 html 元素
【发布时间】：2017-12-07 16:17:00
【问题描述】：

我有一个服务器端节点应用程序，我想为该应用程序添加一些基本的 Web 界面。我正在关注introductory vue.js tutorials，但没有看到任何与我正在尝试做的事情相关的内容。

想象一下，我有这个服务器端节点应用程序：

var state = { message: 'hello world', count: 0 };
function work() {
    state.message = 'hello world ' + (state.count++);
}
setInterval(work, 1000);

现在，为了添加应用程序的 Web 界面，我添加了一些基本的 http 服务器代码：

var state = { message: 'hello world', count: 0 };
function work() {
    state.message = 'hello world ' + (state.count++);
}
setInterval(work, 1000);

var http = require('http');
var port = process.env.PORT || 1337;

http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('message: ' + state.message+'\n');
}).listen(port);

它“有效”：如果我刷新页面，我会看到我的应用程序 state 的值。现在我想更新这个简单的应用程序以自动更新客户端的视图，以反映在服务器端完成的任何状态更改。我可以更改该网页以每秒自动刷新或类似的方式以反映任何服务器更改，但我正在寻找旨在完成此操作的东西。最终，我需要使该 Web 界面能够更改某些服务器状态（例如更改 state.count）。如何使用vue.js 完成此操作，或者我应该为此使用其他东西，或者我应该简单地编写所有逻辑以使用 http POST/GET 将更新的 state.count 传递到我的 Web 界面？

【问题讨论】：

你应该尝试拆分你的“前端”和“后端”——至少如果你真的想用 vue.js 构建一些东西的话。如果您真的只想提供一个页面，您可以简单地使用任何模板语言（如 Jade）并将数据传递给在特定时间后刷新的视图

标签： javascript node.js vue.js vuejs2

【解决方案1】：

您所描述的是 websockets。使用您当前的代码，您正在创建一个连接，然后在您调用 res.end 时关闭该连接。

您需要允许服务器和前端之间打开连接而不需要持续请求的东西。看看https://socket.io/和具体的Vue实现：

https://medium.com/@michaelmangial1/getting-started-with-vue-js-socket-io-8d385ffb9782

【讨论】：