<MyRusakov.ru />

Вёрстка сайта с нуля 2.0

Вёрстка сайта с нуля 2.0

Система "Вёрстка сайта с нуля 2.0" содержит в себе не только сами видеоуроки по адаптивной вёрстке сайтов с примерами, но и вспомогательную систему для более эффективного обучения.

Сам курс обучит Вас абсолютно с нуля HTML5 и CSS3, а также научит верстать сайты с помощью реальных примеров вёрстки. Обучение идёт от простого к сложному. В последнем разделе курса идёт обучение адаптивной вёрстке сайтов: Вы узнаете всю необходимую теорию, а также увидите пример реальной адаптивной вёрстки сайта.

Как итог, курс совмещает в себе всё, что нужно по HTML, CSS и адаптивной вёрстке сайтов, с наглядными примерами, с обучением от простого к сложному и без необходимости иметь начальных знаний, а благодаря вспомогательной системе психологически курс проходится очень легко, а на выходе Вы сможете сделать адаптивную вёрстку любого сайта любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

NodeJS. Template Engine. Часть 1.

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>

Итак, на этом сегодня все. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

kover kover 18.03.2017 18:33:17

Добрый день мне кажется у вас здесь ошибка... {person: req.params.name}, data: data);

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.