節點加載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; 
    } 
}

來源

2011-09-03 Jacksonkr

我使用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

來源

2011-09-05 19:26:33

非常透徹的回答。不錯的工作！ – Jacksonkr

恩，是的，我有點深入，花了幾個小時充實了我對快速配置和不同模板引擎的細節細節的理解。 –

取決於注入HTML頁面是多麼的簡單，你可能只是想用一個模板庫，像{{ mustache }}。（這肯定會讓你在被服務器發送出去之前把html注入靜態頁面）。

爲模板庫製作HTML的大部分工作，但是會動態地將對象傳遞給您正在提供的頁面。

來源

2011-09-03 17:49:44

節點加載js上createServer

回答

相關問題