Nodejs. Template engine. Частина 1.

Всім привіт! У цій статті ми розглянемо, що таке template engine і як з ним працювати в NodeJS.

Template Engine дослівно можна перекласти як "шаблонний двигун", ну, або "двигун для шаблонів". Навіщо все це потрібно? Давайте розберемося.

У минулій статті ми зчитували URL і відправляли потрібні дані, використовуючи метод send (). Однак там ми відправляли просто рядки, а що, якщо нам потрібно відправити цілу HTML page? Для цього можна скористатися методом 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.

Відео: Node.js + Express - Tutorial - PugJS Templating Engine (formerly JADE)

Для початку нам потрібно його встановити в наш проект:

npm install ejs -save

Тепер, щоб почати використовувати EJS, нам потрібно повідомити Express, що ми збираємося використовувати движок шаблонів. Зробити це можна так:

Відео: Node.js & Express From Scratch [Part 3] - Pug Template Engine

var app = express() - 
app.set(`View engine`,`Ejs`) -

Тепер, кожен раз, коли буде отримано запит, express буде шукати потрібний шаблон в папці views. Давайте цю папку і створимо. У самій же папці створимо файл profile.ejs.

Тепер в цей файл скопіюйте і вставте HTML код з файлу index.html. Давайте відразу змінимо заголовок і додамо до нього властивість person. Це робиться в такий спосіб:

Тепер нам потрібно отрендеріть (отрисовать) нашу сторінку, коли до неї буде запит. Для цього в головному файлі зробимо наступне:

app.get(`/ Profile /: name`,function(req, res){ 
 res.render(`Profile`,{person: req.params.name}) - 
}) -

У методі render () ми вказуємо першим параметром, яке властивість нам потрібно, а другим - на що його замінити. У нашому випадку ми беремо ім`я з рядка запиту і вставляємо його в потрібне місце в шаблоні.

Відео: Marko templating engine and server-side HTML rendering with Express (Episode 1)

Тепер перезавантажте сервер і зайдіть за адресою: 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) - 
}) -