node.js - Node.js:表达路线，从数据库查询数据并在template.hbs View 中呈现

Question

我想创建一个node.js应用程序，对一些站点进行web抓取，将数据保存在postgresql数据库中，然后在网页上显示这些数据的可视化（在d3.js中）。
我考虑了拆分前端部分（创建和显示可视化）和后端部分（进行web抓取和更新db）。
这两个应用程序的框架（有两个是因为我将任务分为两个应用程序）如下所示。
后端应用程序（scraper）：
连接到数据库
如果表不存在，则创建它们
数据刮刀
在数据库中保存数据
断开与数据库的连接。
这个后端应用程序一年只能启动几次（为此，如果使用的是unix，我可以配置cron文件）。
前端应用程序（viz）：
连接到数据库
启动等待端口3000的服务器（我需要它进行可视化）
每次用户刷新页面（onLoad()）时，应用程序都会进行查询（SELECT），从数据库中获取数据。这样，数据总是更新的。
这个应用程序只由程序员启动一次（理想情况下）。
我创建了这种类型的文件夹结构（我使用了npm init和Express）：

project
 |_ scraper
     |_ helpers // contains some useful .js files
          |_ elaborateJson.js
          |_ saveOnDb.js
          |_ utilFunc.js
     |_ node_modules // modules installed using `npm install moduleName --save`
     |_ routes // contains the files that make scraping
          |_ downloaderHome.js
          |_ downloaderWork.js
     |_ services // contains a files concerning the db
             |_ postgreSQLlib.js
     |_ app.js
     |_ package.json
     |_ package-lock.json
 |_ viz
     |_ helpers // // contains some useful .js files
          |_ utilFunc.js
     |_ node_modules // modules installed using `npm install moduleName --save`
     |_ public // contains files for visualizations
          |_ index.handlebars
          |_ script.js
          |_ style.css
     |_ services // contains a file concerning the db
             |_ postgreSQLlib.js
     |_ app.js
     |_ package.json
     |_ package-lock.json

有了这个结构，我已经有两个问题不知道如何解决：
1. postgreSQLlib.js文件（以及 utilFunc.js）在 scraper和 viz中都是相同的。如何避免代码重复？
2.我必须在 express-handlebars和 express文件夹中安装一些模块（例如 scraper和 viz）两次。
这是 project/scraper/app.js：

const downloaderHome = require('./routes/downloaderHome.js');
const downloaderWork = require('./routes/downloaderWork.js');
const postgreSQLlib = require('./services/postgreSQLlib.js');
const saveOnDb = require('./helpers/saveOnDb.js');
const utilFunc = require('./helpers/utilFunc.js');
const express = require('express');
const exphbs = require('express-handlebars');

var app = express();

start();

async function start() {
    console.log('\n Connect to db');
    await postgreSQLlib.connect();

    console.log('\n Create tables if they do not exist');
    await postgreSQLlib.createHomeTable();
    await postgreSQLlib.createWorkTable();

    console.log('\n Check if table \'home\' is updated or not');
    if(!await utilFunc.isTableUpdated('home', 6418)) { // 6308
        console.log('\n   Download data for home');
        await downloaderHome.download();
        console.log('\n   Saving data for home on db');
        await saveOnDb.saveHome();
    }   

    console.log('\n Check if table \'work\' is updated or not');
    if(!await utilFunc.isTableUpdated('work', 6804)) {
        console.log('\n   Download data for work');
        await downloaderWork.download();
        console.log('\n   Saving data for work on db');
        await saveOnDb.saveWork();
    }

    console.log('\n Disconnect from db');
    await postgreSQLlib.disconnect();
}

这是 project/viz/app.js：

const postgreSQLlib = require('./services/postgreSQLlib.js');
const utilFunc = require('./helpers/utilFunc.js');
const express = require('express');
const exphbs = require('express-handlebars');
const http = require('http');

var app = express();

var response;
var callback;

start();

async function start() {
    console.log('\n Connect to db');
    await postgreSQLlib.connect();

    // how do I check when page is refreshed?!
    http.get({
            hostname: 'localhost',
            port: 3000,
            path: '/',
            agent: false
        }, callback);

    callback = function(res) {
        response = res;
        console.log(response); // here response will return an object
        console.log('refresh callback');
    }

    console.log(response);
    console.log('refresh');

    ///////////////////////////////////////////////
    // How do I check the disconnection from the db? 
    // If I disconnect now, the visualizations are no longer work. 
    // So when do I get disconnected? 
    // Create problems leaving the connection to the active db?
    ///////////////////////////////////////////////
    //console.log('\n Disconnect from db');
    //await postgreSQLlib.disconnect();
}

第一个应用程序（ project/scraper/app.js）工作得很好。
第二份申请（ project/viz/app.js）没有。我希望您这样做：
连接到数据库[完成。它起作用]
启动一个等待端口3000的服务器（我需要它进行可视化）[我该怎么做？向下看（*）]
每次用户刷新页面（ onLoad()）时，应用程序都会进行查询（ SELECT），从数据库中获取数据[我该怎么做？]
（*）我想到了这样的事情：

async function start() {
    console.log('\n Connect to db');
    await postgreSQLlib.connect();

    console.log('\n Get data from db');
    var dataHome = await postgreSQLlib.getTableHome();
    var dataWork = await postgreSQLlib.getTableWork();

    //console.log('\n Connect to my server');
    pageLoad(dataHome, dataWork); 
}

function pageLoad(dataHome, dataWork) {
    var hbs = exphbs.create({
        helpers: {
            getDataHome: function() { 
                return JSON.stringify(dataHome); 
            },
            getDataWork: function() { 
                return JSON.stringify(dataWork); 
            }
        }
    });

    app.engine('handlebars', hbs.engine);
    app.set('view engine', 'handlebars');

    app.get('/', function(req, res, next) {
        res.render('index', { // index is html filename
            showTitle: true,
        });
    });
    console.log('Go to http://localhost:3000/ to see visualizations');
    app.listen(3000);
}

其中 dataHome和 dataWork是两个对象，它们包含使用 SELECT查询从数据库下载的数据。
但通过这种方式，数据只被废弃一次，而不是每次用户刷新页面。
我们将非常感谢您的帮助。谢谢您！
编辑
你能更精确些吗？我试着这么做，但没用：
项目/VIZ/app.js：

const postgreSQLlib = require('../shared_libs/postgreSQLlib.js');
const express = require('express');

var app = express();

start();
async function start() {
    console.log('Connect to db');
    await postgreSQLlib.connect();

    app.get('/', fetchFreshData);
}

async function fetchFreshData(req, res) {
    // download data from db
    var dataHome = await postgreSQLlib.getTableHome();
    var dataWork = await postgreSQLlib.getTableWork();
    // fill this JSON using the results
    var viewData = {dataHome, dataWork};
    // pass data to view
    res.render('index', viewData);
}

project\viz\view\index.handlebars项目：

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <title>Map</title>
        <script src='https://d3js.org/d3.v5.js' charset='utf-8'></script>
        <link rel='stylesheet' type='text/css' href='/style.css' media='screen'/>
    </head>
    <body>
        <div id='example'></div>
    </body>
    <script src='/script.js'></script>
</html>

project\viz\view\script.js：

console.log('viewData:', viewData);

我错在哪里了？
编辑2
好的，我再次修改 viz/app.js代码：

const postgreSQLlib = require('../shared_libs/postgreSQLlib.js');
const express = require('express');
const exphbs = require('express-handlebars');

var app = express();

start();

async function start() {
    await postgreSQLlib.connect();

    var hbs = Handlebars.registerHelper('json', function(context) {
        return JSON.stringify(context);
    });
    app.engine('handlebars', hbs.engine);
    app.set('view engine', 'handlebars');
    app.get('/', fetchFreshData);
    console.log('Go to http://localhost:3000/ to see data');
    app.listen(3000);
}

async function fetchFreshData(req, res) {
    // download data from db
    var dataHome = await postgreSQLlib.getTableHome();
    var dataWork = await postgreSQLlib.getTableWork();
    // fill this JSON using the results
    var viewData = {}; 
    viewData.timestamp = Date.now();
    viewData.entries = dataHome;
    // pass data to view
    res.render('index', viewData);
}

当我运行应用程序时，没有错误，但如果我连接到 http://localhost:3000/，浏览器会告诉我无法访问该站点。我觉得有点傻…
编辑3
如果我正确地理解了你的代码，你的代码中有一个（分散注意力的）错误。
在 returnOBJ()而不是 res.render('index', viewData);中，它应该是 res.render('obj', viewData);（与 obj.hbs文件相关）。对吗？
我以这种方式更改index.hbs文件：

<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <title>Index</title>
        <script src='https://d3js.org/d3.v5.js' charset='utf-8'></script>
        <link rel='stylesheet' type='text/css' href='/style.css' media='screen'/>
    </head>
    <body>
        <h1>INDEX<small>{{timestamp}}</small></h1>
    </body>
    <script> 
        // add global variables in the .hbs file 
        window.viewData_dataWork = {{ json entries }}
        console.log(window.viewData);
    </script>
    <script src='/script.js'></script>
</html>

但我得到：

(node:207156) UnhandledPromiseRejectionWarning: Error: callback function required
    at Function.engine (C:\...\node_modules\express\lib\application.js:295:11)
    at start (C:\...\viz\app.js:20:6)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:182:7)
(node:207156) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:207156) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

我也不明白这段代码。

app.set('view engine', 'hbs');
app.engine('hbs', hbs.__express);
hbs.registerHelper('json', function(context) {
    return JSON.stringify(context);
});
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');

为什么用不同的值调用 app.set('view engine', ...)两次？
编辑4
我进一步简化了代码：
/VIZ/应用程序js：

const postgreSQLlib = require(__dirname + './../shared_libs/services/postgreSQLlib.js');
const express = require('express');
const hbs = require('hbs');

var app = express();

// Server initiator
async function start() {
    await postgreSQLlib.connect();

    // hbs
    app.set('views', '' + __dirname + '/views');
    app.set('view engine', 'hbs');
    app.engine('hbs', hbs.__express);
    hbs.registerHelper('json', function(context) {
        return JSON.stringify(context);
    });
    app.engine('handlebars', hbs.engine);
    app.set('view engine', 'handlebars');

    // router
    app.get('/', testMe);

    console.log('Go to http://localhost:3000/ to see data');
    app.listen(3000);
}

// Your section with fresh data has been populated properly
async function testMe(req, res) {
    console.log('testMe');
    // fill this JSON using the results
    var viewData = {}; 
    viewData.data = 'this string';
    // pass data to view
    res.render('test', viewData);
}

// start the server
start();

/VIZ/视图/测试.hbs：

<html>
    <head>
        <title>Server test</title>
    </head>
    <body>
        {{data}}
    </body>
</html>

然后在prompt命令中转到 project/viz并键入 node app.js+enter。
进程启动并等待：没有错误。
当我转到 http://localhost:3000/但连接失败时。
我快疯了。
编辑5
问题不在于 connect或者选择的函数，所以我稍微简化了代码。
现在，它几乎可以工作了！
这是密码。
VIZ/应用程序js：

const postgreSQLlib = require(__dirname + './../shared_libs/services/postgreSQLlib.js');
const express = require('express'); 
var app = express()
const hbs = require('hbs');
const webapp_opts = {"port":3000};

Initialize();

//.: Setup & Start Server
async function Initialize(){
    await postgreSQLlib.connect();

    console.log("[~] starting ...")
    //:[HBS]:Setup
    app.set('view engine', 'hbs'); 
    app.engine('hbs', hbs.__express)
    app.set('views', "" + __dirname + "/views")
    //:[HBS]:Helpers
    hbs.registerHelper('json', function(context) {
        return JSON.stringify(context);
    })
    //:[EXPRESS]:Router.Paths
    app.get("/", IndexPathFunction);
    // app.get("/script.js", scriptFile); <-- for script.js file

    //:[EXPRESS]:Start 
    app.listen(webapp_opts.port,()=>{
        console.log("[i] ready & listening","\n    http://localhost:"+webapp_opts.port+"/")
    })
}

/*async function scriptFile(req, res) { <-- for script.js file
    console.log('\nscriptFile');
    var viewData = {}; 
    viewData.number = 50;
    console.log('viewData:', viewData);
    res.render('script.js', viewData);
}*/

//.: Router Function : "/"
async function IndexPathFunction(req,res){
    var viewData = {}; 
    viewData.timestamp = Date.now();
    viewData.exJson = [{color: 'red', year: '1955'}, {color: 'blue', year: '2000'}, {color: 'yellow', year: '2013'}]; 
    viewData.exString = 'example of string'; 
    console.log('viewData:', viewData);
    res.render('index', viewData);
}

VIZ/视图/索引.hbs：

<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <title>Index</title>
        <script src='https://d3js.org/d3.v5.js' charset='utf-8'></script>
        <link rel='stylesheet' type='text/css' href='/style.css' media='screen'/>
    </head>
    <body>
        <h1>INDEX timestamp: <small>{{timestamp}}</small></h1>
    </body>
    <script> 
        viewData = {}; 
        console.log('viewData:', viewData);
        viewData.exJson = JSON.parse('{{ json exJson }}'.replace(/&quot;/g, '"').replace(/&lt;/, ''));
        viewData.timestamp = {{timestamp}}; // doesn't work
        viewData.exString = {{ exString }}; // doesn't work
        console.log('viewData.exJson:', viewData.exJson);
        console.log('viewData.timestamp:', viewData.timestamp);
        console.log('viewData.exString:', viewData.exString);
    </script>
    <!--<script src='/script.js'></script>-->
</html>

问题是获取的数据类型不是json。例如，当我试图打印时间戳和exstring时，它会给我错误。为什么？
另外，我想清理一下代码，并将javascript部分放入一个 script.js文件中，该文件由 index.hbs使用 <script src='/script.js'></script>调用。
编辑6
我发现这对我很有用。
我通过添加一个css文件、一个图像和一个脚本（它只包含一个 index.hbs，但其思想是将 console.log('here');变量放入script.js中）来编辑 viewData文件。
项目/viz/views/index.hbs：

<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <title>Index</title>
        <script src='https://d3js.org/d3.v5.js' charset='utf-8'></script>
        <link href="/css/style.css" rel="stylesheet">
    </head>
    <body>
        <img src="/images/logo.png"/>
        <h1>timestamp: <small>{{timestamp}}</small></h1>
        <h2>Welcome in index.hbs</h2>
    </body>
    <script> 
        viewData = {}; 
        console.log('viewData:', viewData);
        viewData.exJson = JSON.parse('{{json exJson }}'.replace(/&quot;/g, '"').replace(/&lt;/, ''));
        viewData.timestamp = {{timestamp}};
        viewData.exString = '{{exString}}'; 
        console.log('viewData.exJson:', viewData.exJson);
        console.log('viewData.timestamp:', viewData.timestamp);
        console.log('viewData.exString:', viewData.exString);
    </script>
    <link href='/script/script.js' rel='script'>
</html>

我的文件结构是：

project
    |_ node_modules
    |_ scraper
    |_ shared_libs
    |_ viz  
        |_ app.js 
        |_ public
            |_ css
                |_ style.css
            |_ images
                |_ logo.png
            |_ script
                |_ script.js
        |_ views
            |_ index.hbs

现在我看到了图片，使用了css。但脚本似乎不起作用，因为这里没有打印字符串。
我在互联网上搜索如何将变量从脚本标记传递到外部js文件，但似乎没有找到任何适合我的东西。
我读过把手api，但它们并不有用。

Answer 1

共享（自定义）代码的解决方案：
有了这个结构，我已经有两个问题，我不知道怎么解决
要解决：
scraper和viz中的postgreSQLlib.js文件（以及utilFunc.js）都是相同的。如何避免代码重复？
您已经在使用require，因此请从以下位置移动文件：

project/scraper/services/postgreSQLlib.js
project/viz/services/postgreSQLlib.js

到项目根目录中新创建的目录

project
 |_ shared_libs
 |_ scraper
 |_ viz

（在本例中，我使用了 shared_libs，您可以随意命名）

project/shared_libs/postgreSQLlib.js

然后，从代码中：

const postgreSQLlib = require(__dirname+"/../shared_libs/postgreSQLlib.js");

这样您就不需要在两个位置的两个不同文件中维护代码
共享节点模块解决方案：
这同样适用于 node_modules
简单地说，合并当前的两个（节点模块目录）

project/scraper/node_modules
project/viz/node_modules

进入 project目录根目录中的文件夹

project/node_modules

我的建议是：
删除里面的旧的（ project/scraper& project/viz）
从现在起，使用 npm i <module> --save目录中的 project。
project/scraper和 project/viz都将使用 project/node_modules
不需要复制整个库…
project/viz/app.js的解决方案
如果要在每个 GET请求上从db获取数据
然后，您必须在请求中包含从db逻辑获取数据：

app.get('/',FetchFreshData)

该函数将包含获取并构造hbs的viewdata，以便使用.hbs标记中引用的新数据呈现。

function FetchFreshData(req,res){
 /* add your SELECT here */
 var viewData = {} //fill this JSON using the results
 res.render('index',viewData)
}

因此，从逻辑上讲，每次执行 GET到“/”路由时，您都将运行查询并接收带有新数据的“可视化”。
编辑：展开答案
首先，我建议你更深入地了解车把。
如果要在脚本中使用数据，则必须在服务器端注册一个助手，该助手根据需要呈现数据。

Handlebars.registerHelper('json',function(context){
 return JSON.stringify(context)
})

我需要为您的情况做一个示例，因此假设viewdata如下：

function FetchFreshData(req,res){
     /* add your SELECT here */
     var viewData = {} //fill this JSON using the results
     viewData.timestamp = Date.now()
     viewData.entries = dataHome
     res.render('index',viewData)
    }

给我们举个例子：

{
 "timestamp":"1525182734",
 "entries":[
   {"name":"Entry 1"},
   {"name":"Entry 2"},
   {"name":"Entry 3"}
 ]
}

现在我将重点介绍您的模板（.hbs）：

<html lang='en'>
 <head>
  <meta charset='utf-8'>
  <title>Map</title>
  <script src='https://d3js.org/d3.v5.js' charset='utf-8'></script>
  <link rel='stylesheet' type='text/css' href='/style.css' media='screen'/>
 </head><body>
  <h1>MAP<small>{{timestamp}}</small></h1>
  <div id='example'>
  {{#if entries}}
   <ul>
    {{#each entries}}
     <li> this.name </li>
    {{/each}}
   </ul>
  {{else}} No content... {{/if}}
  </div>
 </body>
    <script> 
     //Add global variables in the .hbs file 
     window.viewData_entries = {{ json entries }}
    </script>
    <script src='/script.js'></script>
</html>

它将使用json对象（viewdata）的“键”
要访问数据并呈现视图…
编辑2：尝试一些简单的事情
使用模块： hbs并尝试使用我的两个返回时间戳和对象的简单示例，我还在某些部分修复了您的代码，以便您继续改进它以满足您的更多需求。

    const postgreSQLlib = require('../shared_libs/postgreSQLlib.js');
    const express = require('express');
    const hbs = require('hbs')
    var app = express();
    //:Server Initiator
    async function start() {
        await postgreSQLlib.connect();
        //:HBS:
        app.set('views', "" + __dirname + "/views");
        app.set('view engine', 'hbs');
        app.engine('hbs', hbs.__express);
        hbs.registerHelper('json',function(context){return JSON.stringify(context)});
        //:Router:
        app.get('/', fetchFreshData);
        app.get('/timestamp', returnTimestamp);
        app.get('/obj', returnOBJ);
        console.log('Go to http://localhost:3000/ to see data');
        app.listen(3000);
    }
    //:Your section with fresh data has been populated properly
    async function fetchFreshData(req, res) {
        var viewData = {}; 
        viewData.timestamp = Date.now();
        viewData.dataWork = await postgreSQLlib.getTableWork();
        viewData.dataHome = await postgreSQLlib.getTableHome();
        // pass data to view
        res.render('index', viewData);
    }
     /*
        The index.hbs I posted earlier wont work anymore, since the   "entries" key doesnt exist now... Try to understand the template  engine with the following 2 examples below
     */

    //:Simple Timestamp EXAMPLE
    function returnTimestamp(req, res) {
        var viewData = {}; 
        viewData.timestamp = Date.now();
        // pass data to view
        res.render('timestamp_example', viewData);
    }
    /* This would be timestamp_example.hbs :
    <html><head><title>Server Timestamp</title></head><body>{{timestamp}}</body></html>
    */

    //:Simple JSON EXAMPLE
    function returnOBJ(req, res) {
        var viewData = {}; 
        viewData.OBJ = {"key":"value"};
        // pass data to view
        res.render('json_example', viewData);
    }
    /* This would be json_example.hbs :
    <html><head><title>Server Object</title></head><body>Page will alert "{{OBJ.key}}"<script>var OBJ = {{json OBJ}}; alert(OBJ.key);</script></body></html>
    */
    //start the server :
    start()

记住，您需要为 /timestamp和 /obj路径添加新视图，我在每个服务器函数下面都添加了一个注释示例。

----------

编辑3：带有回调的简单演示

 const express = require('express'); var app = express()
    const hbs = require('hbs')
    const webapp_opts = {"port":3000}
    //.: Setup & Start Server
    function Initialize(){
     console.log("[~] starting ...")
        //:[HBS]:Setup
     app.set('view engine', 'hbs'); app.engine('hbs', hbs.__express)
     app.set('views', "" + __dirname + "/views")
        //:[HBS]:Helpers
     hbs.registerHelper('json',function(context){return JSON.stringify(context)})
        //:[EXPRESS]:Router.Paths
     app.get("/",IndexPathFunction)
     app.get("/debug",(req,res)=>{
      console.log("[GET]:/debug");  res.send("ok")
     })
        //:[EXPRESS]:Start 
     app.listen(webapp_opts.port,()=>{
      console.log("[i] ready & listening","\n    http://localhost:"+webapp_opts.port+"/")
     })
    }
    //.: Router Function : "/"
    function IndexPathFunction(req,res){
     DBQuery((query_error,query_results)=>{
      if(query_error){console.log("[!] DBQuery @ path : '/'\n",query_error.stack)}
      else{
       console.log("[+] DBResults :",query_results)
       res.render("index",{data:query_results})
       /*or*/// var viewData = {}; viewData.data=query_results; res.render("index",viewData)
      }
     })
    }
    //:[DB]:Example Query using callback method
    function DBQuery(callback_function){
     console.log("[>] DBQuery")
     pool.connect((err,client)=>{
      if (err) throw err
      client.query('SELECT * FROM whatever',(err,res)=>{
        client.release()
        callback_function(err,res)
      })
     })
    }
    //------------------------------------
    /* We can Initialize() the webapp 
     once we know the DB is accesible : */
    const pg = require('pg')
    const db_opts = {
      "user":"dbuser","password":"secretpassword",
      "host":"database.server.com", "port":3211,
      "database":"mydb"
    })
    var pool = new pg.Pool(db_opts);
    pool.on('error',(err,client)=>{
      console.error('Unexpected error on idle client', err); process.exit(-1)
    })
    pool.connect((err,client,done)=>{
      if(err){console.log("[!] DB Connection Error",err)}
      else{console.log("[+] DB Connected"); client.release(); Initialize() }
    })

记住，要理解出问题的关键是要控制从小到大的流程和构建。
你应该读一读：
https://node-postgres.com/，如果您想使用 Express with async/await
不管怎样，这个新编辑的部分应该为您提供一些见解，使最低限度的工作版本。；）