Node JS 中的简单路由和不显眼的模板引擎答案

【问题标题】：Simple routing and unobtrusive template engine in Node JSNode JS 中的简单路由和不显眼的模板引擎
【发布时间】：2012-11-26 17:54:45
【问题描述】：

这是一个多部分的问题，我是 Node 的新手，所以请温柔：)

我有一个非常简单的 Node/express 应用程序设置返回 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 文件中“要求”该文件但是我无法设置路线，而且我在网上看到的每个示例/演示似乎都以不同的方式进行。任何有关如何做到这一点的明确示例都将不胜感激。

问题的下一部分是我想包含动态页面，但不知道模板引擎在哪里。我想使用一些“不引人注目”的东西，这样我的原始 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>

我能找到的最接近的东西是 PURE - http://beebole.com/pure - 但我不确定如何让它与 NODE 一起工作（或者即使它兼容）。

为了增加复杂性，我使用的任何模板引擎都需要能够使用子模板（部分？），以便我可以包含每个页面上相同的页眉/页脚等。我假设这可以通过在需要的每个主模板中引用子模板来递归完成？

如果您仍在阅读本文，那么很明显，您会发现我在使用新技术时遇到了困难，我们将不胜感激任何帮助！

【问题讨论】：

标签： javascript node.js express templating-engine

【解决方案1】：

但我无法在设置路线和每个我在网上看到的示例/演示似乎以不同的方式进行。任何如何做到这一点的明确示例将不胜感激。

不确定您在示例中看到了什么不同，但一般模式是这样的：

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

以下代码将接受对您网站根 URL 的所有 HTTP GET 请求：

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

虽然以下代码将接受所有 HTTP GET 请求到您的站点中的 /test

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

【讨论】：

【解决方案2】：

我知道这是一个老问题，但我最近探索了这个话题，并提出了以下解决方案：

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 的人。

【讨论】：