Простая маршрутизация и ненавязчивый шаблонизатор в 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 служит статическим файлом.

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

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

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

Источник

2 ответа

Решение

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

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

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);
Источник

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

мой оригинальный вопрос

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

Источник
Другие вопросы по тегам