Простая маршрутизация и ненавязчивый шаблонизатор в Node JS

Это вопрос из нескольких частей, и я полный новичок в 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 используется как статический файл.

Моя следующая задача - начать возвращать несколько страниц с правильной маршрутизацией, я дошел до того, что решил, что мне нужно поместить свои маршруты в файл route.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 (или даже если он совместим).

Чтобы добавить больше сложности, любой механизм шаблонов, который я использую, должен иметь возможность использовать подшаблоны (частичные?), чтобы я мог включать верхний/нижний колонтитул и т. д., которые одинаковы на каждой странице. Я предполагаю, что это можно сделать рекурсивно, ссылаясь на подшаблоны внутри каждого основного шаблона, где это необходимо?

Если вы все еще читаете это, то, очевидно, вы поняли, что я барахтаюсь здесь с новой технологией, и любая помощь будет очень признательна!


node.js javascript express templating-engine
person jonhobbs    schedule 26.11.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

но я не могу понять, как настроить маршруты, и каждый пример/демонстрация, которую я вижу в Интернете, кажется, делает это по-другому. Любые окончательные примеры того, как это сделать, будут действительно оценены.

Не уверен, что вы видели в примерах по-другому, но общая схема такова:

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

Следующий код будет принимать все запросы HTTP GET к корневому URL-адресу вашего сайта:

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

В этом случае я встраиваю код для прямой обработки запроса, а не ссылаюсь на внешний файл route.js, как вы указали, просто чтобы сделать примеры более понятными в этом вопросе. В реальном приложении вы будете делать это, ссылаясь на внешнюю функцию, чтобы ваш app.js оставался компактным и чистым.

app.get('/test', routes.NameOfFunctionToHandleGetForSlashTest);
app.post('/test', routes.NameOfFunctionToHandlePostForSlashTest);
person Hector Correa    schedule 29.11.2012

arrow_upward
1
arrow_downward

Я знаю, что это старый вопрос, но недавно я изучил эту тему и нашел следующее решение:

мой исходный вопрос

Я разместил следующую конфигурацию на 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.

person Jeremythuff    schedule 10.05.2013