Question

这是一个多部分的问题，我是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或指令。 Psuedo代码......

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（或者即使它兼容）。

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

如果您还在阅读本文，那么显然您已经知道我正在用新技术在这里挣扎，任何帮助都会非常感激！

Answer 1

但是我无法理解设置路线和每个路线 example / demo我看到网上似乎以不同的方式做到了。任何如何做到这一点的明确例子真的很值得赞赏。

不确定您在示例中看到的内容有何不同，但一般模式如下：

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请求/ 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);

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

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

2 个答案: