簡單的路由和不顯眼的模板引擎節點JS

這是一個多部分的問題，我一個完整的新手到節點所以請溫柔:)簡單的路由和不顯眼的模板引擎節點JS

我有一個非常簡單的節點/快遞應用程序建立一個返回index.html而不使用路由...

var app = express(); 
var port = process.env.PORT || 1337; 


app.use('/i', express.static(__dirname + '/i')); 
app.use('/Stylesheets', express.static(__dirname + '/Stylesheets')); 
app.use(express.static(__dirname)); 


app.listen(port); 
console.log('listening on port ' + port);

index.html作爲靜態文件提供。

我的下一個工作是開始返回一些正確的路由頁面，至於工作我需要把我的路由放在routes.js文件中，並在我的server.js中「require」該文件文件，但我無法繞開設置路線，並且我在網上看到的每個示例/演示似乎都以不同的方式進行。任何明確的例子，如何做到這一點真的不勝感激。

問題的下一部分是我想包括動態網頁，但不知道去哪裏模板引擎。我想使用「不顯眼」的東西，以便在瀏覽器中查看時我的原始HTML文件仍然有意義。

在前端，我會簡單地將HTML注入到頁面中，方法是首先使用選擇器，然後使用.html（）方法更改html，然後將JSON數據綁定到模板，然後將其注入到通過查找類名等。這對地方是完全不引人注目，也不會要求任何醜陋的括號{}，內聯JavaScript或指令。僞代碼...

var data = {"name":"John"}; 
var result = templateEngine.bind("/template.html", data) 


$('.person').html(result);

這樣的話，我可以保持我原來的HTML乾淨，可見，像這樣...

<div class="person"> 
    My Name is FirstName 
</div>

我能找到最接近的是純粹的 - http://beebole.com/pure - 但我我不確定如何讓它與NODE協同工作（或者即使兼容）。

要增加更多的複雜性，任何模板引擎我使用需要能夠使用子模板（諧音？），這樣我可以包括頁眉/頁腳等，這是每一個頁面上德一樣。我認爲這可以通過在需要的地方從每個主模板中引用子模板來遞歸地完成？

如果你還在讀這篇那麼顯然你已經摸索出我有一個新的技術，任何幫助掙扎在這裏將非常感激！

來源

2012-11-26 jonhobbs

但我無法繞開設置路線，並且我在網上看到的每個示例/演示似乎都以不同的方式實現。如何做到這一點的任何明確的例子真的可以理解。

不知道你已經在示例中所看到的不同，但總的格局是這樣的：

app.**[HTTP VERB]**(**[URL]**, function(req, res){ 
    res.end('<html>hello world</html>'); 
});

下面的代碼將接受所有HTTP GET請求到您的網站的根網址：

app.get('/', function(req, res){ 
    res.end('<html>hello world</html>'); 
});

雖然下面的代碼將接受網站中的所有HTTP GET請求/測試

app.get('/test', function(req, res){ 
    res.end('<html>hello world from the test folder</html>'); 
});

這是共同具有用於HTTP POST請求一個單獨的路徑（例如當用戶將數據提交回服務器時）。在這種情況下，HTTP動詞是POST，如下例所示。

app.post('/test', function(req, res){ 
    res.end('<html>Thanks for submitting your info</html>'); 
});

在這種情況下，我嵌入的代碼來處理請求，而不是直接引用外部routes.js你表示只是爲了讓例子在這個問題上更清潔。在一個真正的應用程序中，你會通過引用一個外部函數來實現它，這樣你的app.js就保持精簡和清潔。

app.get('/test', routes.NameOfFunctionToHandleGetForSlashTest); 
app.post('/test', routes.NameOfFunctionToHandlePostForSlashTest);

來源

2012-11-29 14:52:43

我知道這是一個老問題，但我最近都探討過這個話題，並用以下解決方案上來：

my original question

我已經放在EJS以下配置：

var ejs = require('ejs'); 

server.configure(function(){ 
    server.set("view options", {layout: false}); 
    server.engine('html', require('ejs').renderFile); 
    server.use(server.router); 
    server.set('view engine', 'html'); 
    server.set('views', __dirname + "/www"); 
});

這將您的視圖引擎設置爲ejs，您的視圖目錄作爲您的靜態公共html目錄並告訴ejs處理.html文件而不是.ejs。

的路由，可就是這樣的句柄：

server.all("*", function(req, res, next) { 
     var request = req.params[0]; 

      if((request.substr(0, 1) === "/")&&(request.substr(request.length - 4) === "html")) { 
      request = request.substr(1); 
      res.render(request); 
     } else { 
      next(); 
     } 

    }); 

server.use(express.static(__dirname + '/www'));

此路線通過視圖引擎的所有HTML請求，並傳遞下來堆疊中的所有其他請求被髮送靜態文件。

你的HTML現在可以看起來像：

<%include head.html%> 
    <%include header.html%> 

    <p class="well">Hello world!</p> 

    <%include footer.html%>

可以嵌套包括上下變量傳遞到您的包含。因此，例如您的包括頭可致電：

<title> <%= title %> </title>

，並在您的索引頁的頂部，你可以加入一個對象：

{var title: "Home"}

不管怎樣，也許這將幫助了別人誰正在尋找一個超簡單的方法來處理包括堅持正常的HTML。

來源

2013-05-10 01:25:11 Jeremythuff

簡單的路由和不顯眼的模板引擎節點JS

回答

相關問題