Question

我使用NodeJS按照Microsoft docs上的文档查询Azure SQL数据库中的数据。

现在我有了数据，我打算在纯HTML上使用Plotly.js对其进行可视化。但是，老实说，我是NodeJS上的菜鸟，我不知道如何从Node JS脚本传输数据（我存储在JS数组中）并在HTML上捕获它（更准确地说，抓住它<script></script>标记中的Javascript代码，以便我可以填写Plotly.js可视化文件。）

这将是这样的：

在Node.js脚本上：

从Azure获取数据（已完成）
将数据传递给HTML或HTML可以捕获的地方

在HTML标记中：

<html>
<head>
</head>
<body>
    <script>
        // CATCH THE DATA RIGHT HERE

        // PROCESS THE DATA USING PLOTLY.JS

        </script>
</body>
</html>

我一直在寻找Restify和ExpressJS，但是我真的没有那么多，而且我没有找到一个能够捕获“html的javascript”数据的例子。

我不是要求代码（我不想被误解。但是，一些例子会很棒），但我想知道在哪里可以找到类似的东西，工具，库或其他东西这将有助于我实现这一目标。

谢谢！

Answer 1

在C＃中，您将拥有一个MVC控制器，该控制器将使用从模型中检索的数据填充模板。您可以使用NodeJS / Express和模板引擎做同样的事情。在这种情况下，您将在发送到浏览器之前使用JavaScript（nodejs）填充模板。

其他选项将使用SPA结构，您可以使用浏览器SPA对数据进行AJAX请求，并从您的nodejs / express REST服务发送该数据。

你可能不会混合使用两者。

如果你想要一个很棒的起点，那就像传统的网页应用程序一样，那么请研究一下Express Application Generator：https://expressjs.com/en/starter/generator.html

如果能为您提供所需的一切，并且文档会直接回答您的问题。

Answer 2

我建议分两步做你想做的事：

实现专用端点，使数据可视化为JSON字符串（GET /data/?whatever=1234）
编写Plotly.js脚本以通过AJAX请求所需数据，并在DOM准备好后立即显示。

最重要的是，您要为数据创建资源，并获取用于获取该资源的URL。绘制数据图只是一个应用程序;未来可能还有很多其他事情要做。

Answer 3

首先，不是创建服务器并创建API来提供JSON数据，而是可以使用节点fs模块创建一个json文件，如下所示：

const fs = require('fs');

//example of the data you got from the Azure SQL database
const data = [ 1, 2, 3, 4, 5, 6];

fs.writeFileSync('data.json', JSON.stringify(data));

这将在当前目录中创建文件。

然后在您的HTML中，您可以使用jQuery导入该JSON文件：

$.getJSON('data.json',function(data){
     //display your data however you want.    
     console.log(data);
})

它应该工作而不会经历太多的麻烦。

当您想要采用更长的路线时，您可以安装快递并编写一个小型快速服务器，其中包含提供数据的路径端点。

如何将数组从Node JS传输到HTML

3 个答案: