使用Jade模板在Express中展示MongoDB文档

3
我正在学习Node、Express、Jade和Mongodb。我无法在Jade中显示我的mongodb文档。我自己无法解决这个问题。我已经成功地使用console.log记录了所有文档,并且它正确地显示了所有文档。请不要使用mongoose或其他解决方案,只需告诉我如何在这段代码的基础上构建。我已经连接到了数据库,在终端中显示了所有文档。如何能够将其传递给Jade并在view.jade中显示它? 谢谢。
以下是我的app.js代码:
    var express = require('express');
var app = express();
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');



// Mongodb Example http://www.guru99.com/node-js-mongodb.html
var MongoClient = require('mongodb').MongoClient
var url = 'mongodb://localhost/EmployeeDB';


MongoClient.connect(url, function(err, db) {
    //Insert data into mongodb db. If the collection doesn't exist, it will be created with the first inserted document
    db.collection('employee').insertOne({
        number : 17,
        name: "aaa"
    });


    //Updating Documents in a collection
    db.collection('employee').updateOne(
    {"name": "New Employee"}, {$set: {"name": "AA"}}
    );

    //Deleting Documents in a collection
    db.collection('employee').deleteOne(
        { "name": "name" }

    );
    // no need to pass a second parameter. Just the name of the field to be deleted. 

    //Querying for data in mongodb db .
    var cursor = db.collection('employee').find();
    cursor.each(function (err, doc) {
   //console.log(doc)
    });

    console.log("connected");
    db.close();
});






var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();








// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(require('stylus').middleware(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'public')));



app.use('/', routes);
app.use('/users', users);



// catch 404 and forward to error handler
app.use(function (req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function (err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function (err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});
module.exports = app;

这是我的index.js。
    var express = require('express');
var router = express.Router()


//the global str variable is accessable from anywhere and logging the db.collection but how I pass it to jade?
var str = "";


/* GET home page. and iterate, display the collection to console log. */
router.get('/', function (req, res) {
    var MongoClient = require('mongodb').MongoClient
    var url = 'mongodb://localhost/EmployeeDB';
    MongoClient.connect(url, function (err, db) {
        var str = db.collection('employee').find();
        str.each(function (err, doc) {
                console.log(doc);   
        });  


        //How to pass the .db.collection documents to Jade?


        res.render('index');
    });
});

这是我的index.jade文件

    extends layout

block content
  h1= title

我必须问一些基本问题:你是否在单独的终端中运行了 mongod,以便你有一个要连接的数据库进程?这是 MongoDB 工作所必需的。 - sova
是的,我将所有的 db.collection.find() 记录到终端屏幕上,并且能够看到所有的文档。 - Marco
好的,让我完成这个答案的修改,也许可以让你再次朝正确的方向前进。 - sova
1
我们只需稍微更改jade文件以接受迭代输入,并通过res.render('index', {"results" : mongo_results } )view.jade文件发送JSON格式的数据包。请查看更新后的答案以获取详细信息。 - sova
3个回答

1

https://naltatis.github.io/jade-syntax-docs/ 这个链接包含了有关view.jade文件的有用信息。

index.js需要一个数组来存储mongo查询结果:

 var results_from_mongo = [];

每次从查询中获取结果时,让我们将其推入数组(数组语言表示“将元素插入数组”)。
  results_from_mongo.push(doc); //Push result onto results_array

然后我们只需将其发送到res.render:
  res.render('index', {"results": results_from_mongo });

所以在你的 index.js 文件中。
/* GET home page. and iterate, display the collection to console log. */
router.get('/', function (req, res) {
    var MongoClient = require('mongodb').MongoClient
    var url = 'mongodb://localhost/EmployeeDB';

    var results_from_mongo = [];

    MongoClient.connect(url, function (err, db) {
        var str = db.collection('employee').find();
        str.each(function (err, doc) {
                console.log(doc);   
                results_from_mongo.push(doc); //Push result onto results_array
        });  

        //now we have a results array filled like this:
        // results_from_mongo = ["some string", "some string", "some string"]
       //so let's pass them to the jade file to render them.

      res.render('index', {"results": results_from_mongo });

//这将以JSON格式传递数据到名为“index”的JADE文件(index.jade)
此时的数据看起来像
    { "results" : ["some string", "some string", "some string"] } 

在 index.jade 中,我们可以做类似这样的事情。
extends layout

block content
h1= title
h2= "results from mongo:"
select
  each mongo_result, i in results
    div Result #{i} #{mongo_result}

那是一個有啟發性的回答。我學到了關於Jade.render的知識。謝謝你。然而,我仍然不明白如何將mongodb文檔傳遞給Jade? - Marco
Sova:我已经67岁了,正在挑战自己学习编程。如果你有时间,请友善地用代码解释一下,这样我就可以从中学习。谢谢。 - Marco
1
67?干得好!你做到了。让我找一些好的例子。 - sova
此外,英语不是我的母语。所以请原谅所有的错别字和语法错误 :) - Marco
Sova,非常感谢。我已经理解我们正在做的事情的要点了。我很喜欢它。 - Marco
显示剩余3条评论

1

如果您想从数据库中发送一个数组以显示为HTML,那么需要设置jade(现在是pug)文件以显示表格。以下是我在示例index.pug文件中使用的表格布局相关代码。

table
    thead
      tr
        th Flight Date
        th Tail Number
        th Origin
        th Destination
        th Dep
        th Arr
    tbody
      each mongo_result, i in results
        tr
          td= mongo_result.flight_date
          td= mongo_result.tail_num
          td= mongo_result.origin_airport_code
          td= mongo_result.dest_airport_code
          td= mongo_result.dep_time
          td= mongo_result.arr_time

在这个例子中,在表头 thead 下面,我正在设置表格头行的标题。然后,在 tbody 下面,我正在指定实际数据,我希望 pug 从推送到它的每一行数组中提取该数据。Pug 对缩进和空白字符非常敏感:它需要缩进。因此,您需要仔细注意缩进,否则结果将不会按预期工作。

1
你可以使用db()方法来处理集合:
var data = [];

router.get('/', function (req, res) {
    var MongoClient = require('mongodb').MongoClient;
    var url = 'mongodb://localhost:27017/';   // do not put db in url, EmployeeDB
    MongoClient.connect(url, function (err, db) {
        if (err) throw err;
        var dbo = db.db("EmployeeDB");
        dbo.collection("employee").find({}).toArray(function(err, result) {
            if (err) throw err;
            data = result;
            db.close();
            });
        }); 
        res.render('index',{ data_employee : data });
    });
});

您需要更新index.jade(或index.pug)文件:

extends layout

block content
  div.main
    table
      thead
        tr
          th name
          th surname
      tbody
        each data in data_employee
          tr
            td= data.name
            td= data.surname

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接