NodeJS. Template Engine. Часть 1.
Всем привет! В этой статье мы рассмотрим, что такое template engine и как с ним работать в NodeJS.
Template Engine дословно можно перевести как "шаблонный двигатель", ну, или "двигатель для шаблонов". Зачем все это нужно? Давайте разберемся.
В прошлой статье мы считывали URL и отправляли нужные данные, используя метод send(). Однако там мы отправляли просто строчки, а что, если нам нужно отправить целую HTML страничку? Для этого можно воспользоваться методом sendFile(). Давайте перепишем наш код:
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
app.get('/contact', function(req, res) {
res.sendFile(__dirname + '/contact.html');
});
Думаю, тут все понятно. Но это статичные HTML странички, а, может быть, нам нужно получать информацию из базы данных или еще откуда-то и вставлять ее в оформленный HTML код? Что же делать тогда? Тогда нам нужно создать шаблон, в который уже потом и вставлять нужные данные. Если вы работали с PHP, то, наверняка, уже знаете, что это такое. В NodeJS для этого есть разные движки, которые помогут нам с решением этой задачи. Сегодня давайте рассмотрим один из них под названием EJS.
Для начала нам нужно его установить в наш проект:
npm install ejs -save
Теперь, чтобы начать использовать EJS, нам нужно сообщить Express, что мы собираемся использовать движок шаблонов. Сделать это можно так:
var app = express();
app.set('view engine', 'ejs');
Теперь, каждый раз, когда будет получен запрос, express будет искать нужный шаблон в папке views. Давайте эту папку и создадим. В самой же папке создадим файл profile.ejs.
Теперь в этот файл скопируйте и вставьте HTML код из файла index.html. Давайте сразу изменим заголовок и добавим к нему свойство person. Это делается следующим образом:
<h1>Добро пожаловать в профиль <%= person %></h1>
Теперь нам нужно отрендерить(отрисовать) нашу страницу, когда к ней будет запрос. Для этого в главном файле сделаем следующее:
app.get('/profile/:name', function(req, res) {
res.render('profile', {person: req.params.name});
});
В методе render() мы указываем первым параметром, какое свойство нам нужно, а вторым – на что его заменить. В нашем случае мы берем имя из строки запроса и вставляем его в нужное место в шаблоне.
Теперь перезагрузите сервер и зайдите по адресу: http://localhost:3000/profile/Ivan. Вместо Ivan вы, конечно, можете написать другое имя, и оно будет также подставлено в шаблоне.
Теперь представим, что данных у нас много, и мы должны все их вывести в шаблоне. Как мы можем это сделать?
Для этого мы можем использовать массив:
app.get('/profile/:name', function(req, res) {
var data = {age: 17, job: 'programmer'};
res.render('profile', {person: req.params.name}, data: data);
});
Теперь мы можем использовать этот массив в шаблоне:
<p>Возраст: <%= data.age %></p>
<p>Профессия: <%= data.job %></p>
Итак, на этом сегодня все. Спасибо за внимание!
-
Создано 06.02.2017 07:00:00
-
Михаил Русаков
Комментарии (1):
Добрый день мне кажется у вас здесь ошибка... {person: req.params.name}, data: data);
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.