创建一个包含 Node.js、MongoDb 和 D3.js 的 Web 应用程序 [关闭]答案

【问题标题】：Create a web application that incorporates Node.js, MongoDb and D3.js [closed]创建一个包含 Node.js、MongoDb 和 D3.js 的 Web 应用程序 [关闭]
【发布时间】：2018-03-24 14:24:36
【问题描述】：

我想构建一个显示来自某些站点的数据的 Web 应用程序。为此，我考虑通过网络抓取来自动化数据收集。因此，我从这些站点获取数据，根据自己的喜好对它们进行格式化，然后将它们保存在 MongoDb 上。

所以现在我想使用 D3.js 查看这些数据。这不是我第一次使用 D3，但这是我第一次拥有使用 Node.js 和 MongoDb 的应用程序。我通常在 .csv 文件中有一些数据，并使用 HTML、CSS、Javascript 和 D3.js 构建简单的图表。通常我在 D3 中的项目具有这样的结构：

index.html：

<html lang="en">

<head>
   <meta charset="utf-8">
   <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
   <script src="https://d3js.org/topojson.v2.min.js"></script>
   <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <link rel="stylesheet" type="text/css" href="./heatmap.css" media="screen"/>
</head>

<body>
   <div id="container">
      <div id="container-heatmap"></div>
      <div id="container-sparkline"></div>
   </div>
   <div id="container-legend"></div>
   <script src="./heatmap.js"></script>
</body>

</html>

heatmap.js：

var margin = {top: 50, right: 20, bottom: 20, left: 210};
var width = 850 - margin.right - margin.left;
var height = 430 - margin.top - margin.bottom; //400

var svg = d3.select('#container-heatmap')
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// some code...

// load data files
d3.queue()
    .defer(d3.csv, './data.csv')
   .await(createHeatmap);

function createHeatmap(error, data) {
    if(error) {
      console.log("*** Error loading files: " + error + " ***");
      throw error;
   }

   // some code...

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .selectAll('text')
        .attr('font-weight', 'normal');

    svg.append("g")
        .attr("class", "x axis")
        .call(xAxis)
        .selectAll('text')
        .attr('font-weight', 'normal')
        .style("text-anchor", "start")
        .attr("dx", ".8em")
        .attr("dy", ".5em")
        .attr("transform", function(d) {
            return "rotate(-65)";
        });
}

heatmap.css：

#container {
    background-color: pink;
    width: 100;
    height: 100%;
}

// come code...

现在，我在 Node.js 中创建了一个应用程序，它执行网页抓取并将数据保存在 MongoDB test 集合中。

这是我项目的结构：

data
helpers
 |_ util.js = file that contains useful functions for different files (for example: printOnFile)
middlewares
 |_ mongolib.js = file that contains functions that are used to interact with the database. For example: connectToDb(), disconnectFromDb(), insert(), find(), ...
models
node_modules
output
 |_ data.json = file that contains the data saved on the db. Before inserting data on the db, I save them also on file. This file has this structure:
    [
        {To: 'aa1', B: 'bb1', C: 'cc1'},
        {To: 'aa2', B: 'bb2', C: 'cc2'},
        {To: 'aa3', B: 'bb3', C: 'cc3'},
        {To: 'aa4', B: 'bb4', C: 'cc4'},
        ...
    ]
routers
 |_ scraper.js = file that contains useful functions for doing web scraping

app.js = main file of the app
package.json
package-lock.json

app.js 是这样的：

// import some packages and some my files
var mongolib = require('./middlewares/mongolib.js');
var scrape = require('./routers/scraper.js');

const mainApp = async function() {
    const conn = await mongolib.connectToDb(); // init: connect to db and create collection test
    await scrapeSiteAndSaveData(); // get data
    await mongolib.disconnectFromDb(); // disconnect from MongoDb
    await console.log('DATA VIZ'); // data visualization here?
    return 'end';
}

mainApp()
    .then(res => console.log(res)) 
    .catch(err => console.log(err)); 

async function scrapeSiteAndSaveData() {
    await scrape.downloadAndSave();
}

所以，现在，我只有后端部分。如何合并前端部分（与 D3.js 中的图形可视化相关的部分）？

应该在哪个文件夹中创建新文件？他们应该有什么样的结构？我没有找到涵盖该主题的教程。我发现的唯一一个是this，但它并没有多大帮助。创建这样的应用程序的最佳方法是什么？有没有更好的标准？

谢谢！

【问题讨论】：

如果包含快递可以吗？
@AbdeslemCharif 即使包含 Express 也没关系。
好的，我确实发布了一个可以解决您问题的问题
你看过node-red吗？它已经使用 node.js express 服务器，可以提供静态文件，并且有节点可以读取/写入 mongo db，并在实时图表中显示 IoT 数据...

标签： javascript node.js mongodb d3.js

【解决方案1】：

为了能够将文件提供给前端，您的 App.js 需要设置为 Http server

既然您可以接受包含 Expressjs 的解决方案

安装 Express 后，在您的 app.js 中包含此代码以启动网络服务器

var express = require("express");
var app = express();
app.set("port",process.env.PORT||300)
var server = app.listen(app.get("port"),()=>{
  console.log("Listening on PORT: "+ app.get("port"))
});
app.use("/",express.static('public_html')) // we serve the files in this directory

我使用public_html 只是为了演示，它可以是你想要的任何东西

现在您的文件夹结构将如下所示

helpers
 |_ util.js = file that contains useful functions for different files (for example: printOnFile)
middlewares
 |_ mongolib.js = file that contains functions that are used to interact with the database. For example: connectToDb(), disconnectFromDb(), insert(), find(), ...
models
node_modules
output
public_html<------- You put here all your HTML file, css and JS related to the client side
 |_ data.json = file that contains the data saved on the db. Before inserting data on the db, I save them also on file. This file has this structure:
    [
        {To: 'aa1', B: 'bb1', C: 'cc1'},
        {To: 'aa2', B: 'bb2', C: 'cc2'},
        {To: 'aa3', B: 'bb3', C: 'cc3'},
        {To: 'aa4', B: 'bb4', C: 'cc4'},
        ...
    ]
routers
 |_ scraper.js = file that contains useful functions for doing web scraping

app.js = main file of the app
package.json
package-lock.json

之后，只需在您的服务器 node app.js 吃午饭并通过您的网络浏览器访问它

【讨论】：