【问题标题】:Express displaying mongodb documents in Jade在 Jade 中快速显示 mongodb 文档
【发布时间】:2017-01-10 22:29:20
【问题描述】:

我正在学习 Node、Express、Jade 和 Mongodb。我无法在玉中显示我的 mongodb 文档。我无法自己弄清楚。我使用 console.log 成功记录了所有文档,它正确显示了所有文档。请不要猫鼬或其他解决方案。只是如何在此代码上构建。我已经连接到数据库,在终端中显示所有文档。如何能够将其传递给 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 工作所必需的。
  • 是的,我将所有 db.collection.find() 记录到终端屏幕上,并且能够查看所有文档。
  • 好的太好了,让我完成这个答案修改,也许会让你再次朝着正确的方向前进。
  • 我们必须简单地改变一下jade文件以接受迭代输入,并通过res.render('index', {"results" : mongo_results } )将JSON形状的包发送到view.jade文件,详情请参阅更新的答案。跨度>

标签: node.js mongodb express pug


【解决方案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'(index.jade)的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?​​span>
  • Sova:我今年 67 岁,正在挑战自己学习如何编码。因此,如果您有时间,请友善并通过代码进行解释,以便我从中学习。谢谢。
  • 67?好样的!你说对了。让我找一些很好的例子。
  • 另外,英语不是我的母语。所以请原谅所有的错字和语法错误:)
  • 索瓦,非常感谢。我知道我们正在做的事情的要点。我喜欢它。
【解决方案2】:

如果您想从数据库发送一个数组以显示为 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 对空格字符的缩进非常敏感:它需要它。因此,您需要密切注意缩进,否则结果将无法按预期工作。

【讨论】:

    【解决方案3】:

    您可以使用 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
    

    【讨论】:

      猜你喜欢
      • 2022-06-17
      • 2012-08-14
      • 2017-02-04
      • 1970-01-01
      • 1970-01-01
      • 2016-12-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多