1

这是一个多部分的问题，我是 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 一起工作（或者即使它兼容）。

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

如果您仍在阅读本文，那么很明显，您会发现我在这里用新技术挣扎，任何帮助都将不胜感激！

4

2 回答 2

2

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

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

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

虽然以下代码将接受您站点中 /test 的所有 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-29T14:52:43.223 回答
1

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

我原来的问题

我在 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-10T01:25:11.530 回答