节点加载js上createServer

问题描述：

当我加载一个静态 html页面我想发送一个JS Object到该页面（这是来自mongo的数据）。我可以用Socketemit来完成这个，但这看起来像是过度杀伤。我也知道我可以用编写整个文档使用JS，但我想利用HTML的大部分页面，因为它使我工作的人更容易。节点加载js上createServer

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

我目前的样本是假或我会一起发送。谢谢看看我的的问题！

**当前片段，为乐趣**

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; 
    } 
}

答

我使用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文件，狭解决您问的问题是很容易的。在DB数据返回之前，您绝对没有理由需要吐出HTML文件（除非您故意希望填充的数据异步来屏蔽DB延迟）。

改造现有的代码示例：

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^/堆栈跟踪发送到客户端（在“开发”模式下运行时）

Best Prac tices代码示例：

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

非常透彻的回答。不错的工作！ – Jacksonkr

恩，是的，我有点深入，花了几个小时充实了我对快速配置和不同模板引擎的细节细节的理解。 –

答

取决于注入HTML页面是多么的简单，你可能只是想用一个模板库，像{{ mustache }}。（这肯定会让你在被服务器发送出去之前把html注入静态页面）。

为模板库制作HTML的大部分工作，但是会动态地将对象传递给您正在提供的页面。

节点加载js上createServer

相关推荐