javascript - 将 NodeJS 与 Express 3.x 和 Jade 模板一起使用是否可以只为先前呈现的列表重新呈现一个项目?

标签 javascript node.js mongodb express pug

我一直在努力寻找任何可以解释是否可以将一个"new"项目(追加)重新呈现到 jade 模板列表的帖子。

  1. 假设我们有一个日志条目列表,根据第一个请求,我们使用 res.render 和 Jades 的每个功能呈现从 MongoDB 集合“日志”中获取的列表。

  2. 由于我们希望从数据库中检索更新,因此我们还有一个 MongoWatch 附加到该集合以监听更改。更新后,我们能否执行一些附加到 Jade 模板中第一个列表的代码?

    /* app.js */
    
    /*
        Display server log 
    */
    app.get ('/logs', function(req, res, next) {
    
      // Using Monk to retrieve data from mongo
      var collection = db.get('logs');
    
      collection.find({}, function(e,docs){
    
        // watch the collection
        watcher.watch('application.logs', function(event){
          // Code that update the logs list with the new single entry event.data?
        });
    
        // Request resources to render
        res.render('logs', { logs: docs } );    
      });
    
    });
    
    <!-- logs.jade -->
    extends layout
    
      block content
    
        div
          each log in logs
            div.entry
              p.url= log.url
    

也许我应该以另一种方式使用模板引擎,我对 Express、Jade 很陌生,非常感谢你们花时间回答这些问题。

//问候

最佳答案

好的,所以我查阅了 Jonathan Lenowski 的建议,顺便说一句谢谢!,我想出了一个解决我的问题的方法。以为我会跟进,也许会一路帮助其他人..

基本上我现在按照建议使用socket.io

  1. 因此,首先通过将 socket.io npm 模块添加到 package.json 并运行 npm install 安装 socket.io npm 模块,我使用“最新”作为版本。 接下来要在客户端使用“socket.io.js”,您实际上必须将文件从已安装的 socket.io 模块复制到您的 javascript 文件夹。

    Path (seen from project root is): 'node_modules/socket.io/node_modules/socket.io-client/dist/' 
    
  2. 在服务器端设置DB、Watcher、Webserver、Socket和controller

    /* 
       SETUP DATABASE HANDLE
       in app.js
    */
    var mongo = require('mongodb');
    var monk = require('monk');
    var db = monk('localhost:'+app.get('port')+'/application');
    
    /* SETUP DATABASE UPDATE WATCH */
    var watcher = new MongoWatch({ format: 'pretty', host: 'localhost', port: app.get('port') });
    
    /* START WEBSERVER AND SETUP WEBSOCKET */
    var server = Https.createServer({key: certData.serviceKey, cert: certData.certificate}, app);
    var io = require('socket.io').listen(server);
    server.listen(app.get('port'), function(){
      console.log('Express server listening on port ' + app.get('port'));
    });
    
    /*
        Display server log - controller
    */
    app.get ('/logs', function(req, res, next) {
    
      // Using Monk to retrieve data from mongo
      var collection = db.get('logs');
      collection.find({}, function(e,docs){
    
        // watch the collection logs in database application
        watcher.watch('application.logs', function(event){
              io.sockets.emit('logs', { log: event.data });
        });
    
        // Request resources to render
        res.render('logs', { logs: docs } );    
      });
    });
    
  3. 在布局中包含 socket.io javascript

    /* 
       Add client side script
       in layout.jade 
    */ 
    script(type='text/javascript' src='/javascripts/socket.io.js')
    
  4. 使用客户端

    /* 
       SETUP DATABASE HANDLE
       in logs.jade
    */
    extends layout
    
    block content
    
      script.
        var socket = io.connect('https://localhost:4431');
        socket.on('logs', function (data) {
          console.log(data.log);
          // Here we use javascript to add a .log-entry to the list
          // This minor detail i leave to the developers own choice of tools
        });
    
      div.row#logs
        div.col-sm-12
          div.header-log Some application
          div.logs-section
            each log in logs
              div.log-entry.col-sm-12(data-hook=log.status)
                p.method= log.method
                p.url= log.url
                p.status(style='color: #'+log.color+' !important')= log.status
                p.response-time= log.time
                p.content-length= log.length
                p.datetime= log.date
    
  5. 使用该功能,请记住,此流程是通过在数据库“应用程序”和集合“日志”中实际添加一行来触发的。

因此我使用 ssl 和常规 http 我们创建一个“http”服务器,并使用标准地址前缀 http://...从客户端连接

另请注意,为了使用 MongoWatch,您需要设置带有复制集的 MongoDB。这是一个镜像数据库,可以用作后备(双重用途)。

干杯!再次感谢乔纳森!

关于javascript - 将 NodeJS 与 Express 3.x 和 Jade 模板一起使用是否可以只为先前呈现的列表重新呈现一个项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22719647/

相关文章:

javascript - 如何使用discord.js获取特定成员(member)用户名

javascript - 在 JavaScript 中对事件处理程序使用粗箭头语法不起作用

node.js - 如何将 Node Date()插入到postgresql时间戳列中?

node.js - 将 Apollo Express 服务器部署到 Heroku 时出现问题 : "GET query missing."

javascript - 查询 Mongo 获取今天添加的所有条目(新手)

javascript - 保持滚动条始终在底部

javascript - Google Analytics - 跟踪包括 parent 在内的多个属性(property)

javascript - Node JS 数组、Foreach、Mongoose、同步

mongodb - 如何在聚合中的对象数组上使用 $map ?

聚合中的 Mongodb 子查询