Question

当我加载 static html页面时，我想将JS Object发送到该页面（这是来自mongo的数据）。我可以使用Socket emit完成此操作，但这似乎有点矫枉过正。我也知道我可以使用JS 编写整个文档，但是我希望在页面的大部分内容中使用HTML，因为它使我工作的人更容易使用。

如果我可以在服务器发送之前将html注入我的静态页面，那将是很好，但我不认为这是可能的。我将解决一个html页面，该页面具有解析在“加载”时间发送到页面的数据的功能等。

我目前的样本是 bogus 或者我会发送它们。谢谢查看我的内容问题！

**当前片段，为了好玩**

function createServer(req, res) {
    var path = url.parse(req.url).pathname;
    var fsCallback = function(error, data, cb) {
        if(error) throw error;

        res.writeHead(200);
        res.write(data);
        res.end();

        if(cb) cb();
    }

    switch(path) {
        case '/subpage':
        case '/subpage.html':
            doc = fs.readFile(__dirname + '/subpage.html', function(error, data) {
                fsCallback(error, data, function() {
                    var db = new mongo.Db('mydb', new mongo.Server('localhost', '27017', {}), {});
                    db.open(function() {
                        db.collection('mytable', function(error, collection) {
                            collection.find(function (error, cursor) {
                                //store some data and send it to the page -- that will happen somewhere around here?
                            });
                        });
                    });
                });
            });
        break;
        default:
            doc = fs.readFile(__dirname + '/index.html', fsCallback);
        break;
    }
}

Answer 1

我使用Express和JADE模板引擎获得了很好的效果。

我发现JADE使得手工制作的HTML更加清晰，体积更小，即使大部分页面都是静态的。并且，显然支持插入动态数据。 JADE简单而优雅，在模板语法和生成的HTML之间有非常简单的映射。使用缩进驱动层次结构与更脆弱的XML标记，并减去所有结束标记的详细程度，我发现JADE编写速度更快，可维护性更强。

例如

html
  body
    div.myClass
     img(src="images/foo.png")

与


<html>
  <body>
    <div class="myClass">
      <img src="images/foo.png"/>
    </div>
  </body>
</html>

如果你真的想保留现有的静态HTML文件，那么解决问题很简单就很容易了。在数据库数据恢复之前，您绝对没有理由需要吐出HTML文件（除非您故意希望填充的异步数据能够掩盖数据库延迟）。

转换现有代码示例：

function createServer(req, res) {
  var path = url.parse(req.url).pathname;
  function emitResponse(error, data) {
    if(error) throw error;
    res.writeHead(200);
    res.end(data);
  }

  switch(path) {
    case '/subpage':
    case '/subpage.html':
      fs.readFile(__dirname + '/subpage.html', function(error, data) {
        var db = new mongo.Db('mydb', new mongo.Server('localhost', '27017', {}), {});
        db.open(function() {
          db.collection('mytable', function(error, collection) {
            collection.find(function (error, cursor) {
              data = data.replace('__INJECTED_HTML_CONTENT__', fnWhateverOneDoesWithACursor(cursor));
              emitResponse(error, data);
            });
          });
        });
      });
      break;
    default:
      doc = fs.readFile(__dirname + '/index.html', emitResponse);
      break;
  }
}

但它仍然可以更好。如果我们更新代码以遵循一些最佳实践：

使用Express整理网站
使用Step组织异步工作流程
使用模板代替字符串操作
正确的错误处理w /堆栈跟踪发送到客户端（在“开发”模式下运行）

最佳做法代码示例：

<强> server.js

var _       = require('underscore');
var express = require('express');
var Step    = require('step');
var mongo   = require('mongo');

var app = express.createServer(
  // these filters run in order to process the incoming request
  // can also add cookie parsing / sessions / request logging / etc
  express.logger()
  ,express.static(__dirname + '/public')
);

var mongoDbServer = new mongo.Server('localhost', '27017', {});

function fetchDbData(cb) {
  var db;
  Step(
    function stepDbConnect() {
      db = new mongo.Db('mydb', mongoDbServer, {});
      db.open(this); // this is the callback. runs the next "step"
    }
    ,function stepDbGetCollection(err, p_db) {
      if(err) throw err; // percolates errors to the next step
      db.collection('mytable', this);
    }
    ,function stepDbFind(err, collection) {
      if(err) throw err;
      collection.find(this);
    }
    ,function stepEnd(err, cursor) {
      db.end();
      cb(err, cursor);
    }
  );
}

app.get('/subpage(.html)?', function(req, res, next) {
  fetchDbData(function(err, rows) {
    if(err) next(err);
    else res.render('subpage.ejs', {rows: rows});
  });
});

app.listen(3000);

<强>视图/ subpage.ejs ：

<html>
<body>
  <%= partial('row.jade', rows); %>
</body>
</html>

<强>视图/ row.jade ：


p Row #{row.name} blah blah blah

Answer 2

根据注入HTML页面的简单程度，您可能只想使用模板库，如{{ mustache }}。（这肯定会让你“在我的静态页面被服务器发送之前将其注入静态页面”。）

模板化库，您可以用HTML完成大部分工作，但会动态传递对象到您正在服务的页面。

节点在createServer上加载js

2 个答案: