javascript - 如何使用 Express 和 MySQL 将 SQL 查询的结果插入到 Pug 模板中？

Question

我正在编写一个简单的 Web 应用程序，该应用程序在登陆页面时最初会显示公交路线号码和名称的列表。我将 MySQL 与 Express 和 Pug 一起使用。以下是服务器端代码以及来自 console.log 的前几个结果:

const express = require('express');
const pug = require('pug');
const bodyParser = require('body-parser');
const path = require('path');
const mysql = require('mysql');

require('dotenv').config();

const app = express();

app.set('views', path.join(__dirname, './views'));
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, 'public')));

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'coolio',
  password: process.env.DB_PASS,
  database: 'routes'
});

app.get('/', function(req, res) {
  const routesQuery = "SELECT route, route_name FROM routes";
  let routeObj = {};
  connection.query(routesQuery, function(err, results) {
    if (err) throw err;
    for (let i = 0; i < results.length; i++) {
      routeObj.route = results[i].route;
      routeObj.routeName = results[i].route_name;
      console.log(routeObj);
    }
  });
});

app.listen(3000, function() {
  console.log("Listening..");
});


Listening..
{ route: 1, routeName: 'Metric/South Congress' }
{ route: 2, routeName: 'Rosewood' }
{ route: 3, routeName: 'Burnet/Manchaca' }
{ route: 4, routeName: 'Montopolis' }
{ route: 5, routeName: 'Woodrow/South 5th' }
{ route: 6, routeName: 'East 12th' }

到目前为止，我一直无法弄清楚如何让 console.log 中显示的结果在加载时显示在页面上。

将 res.render('index', routeObj); 放在 console.log 的位置会引发多个有关 header 的错误(Error: Can't set发送后的 header 。)。但是我无法在 for 循环之外访问对象的信息；尝试使用routeObj对象渲染我的索引页只会显示一个空白页。

这是哈巴狗 HTML:

html
  head
    link(rel='stylesheet', type='text/css', href='stylesheets/normalize.css' )
    link(rel='stylesheet', type='text/css', href='stylesheets/style.css' )
  body
    div.container
      div#test
        p=routeObj

当我在 for 循环之后包含 res.render('index', {routeObj}); 时，我似乎更接近了——页面至少显示 [object Object ]。

如何让 console.log 中出现的数据显示在我的模板内？

Answer 1

这是因为 Pug 调用了 Object 的 toString() 函数:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

返回[object Object]。

您的选择是:

1. 重写或实现您自己的 toString() 函数以输出您想要的内容。
2. 访问 routeObj 对象的特定属性。

示例 2:

const routeObj = {
  name: 'foo'
}

...

html
  head
    link(rel='stylesheet', type='text/css', href='stylesheets/normalize.css' )
    link(rel='stylesheet', type='text/css', href='stylesheets/style.css' )
  body
    div.container
      div#test
        p=routeObj.name