Почему Ejs.
Красота EJS в том, что вы можете создавать частичные виды с использованием EJS. Например, вы можете иметь общий заголовок, нижний колонтитул, навигацию для всех страниц и просто изменить внутренний контент с помощью EJS. Также вы можете пройти данные к представлениям. Например, рассмотрим имя пользователя, которое отличается для каждого пользователя, используя EJS, вы можете сделать что-то подобное:
app.get('/', function(req, res){
res.render('index',{user:"John Smith"})
});
И установите динамическое имя пользователя каждый раз.
Как подразумевает имя, вы можете использовать JavaScript для генерации HTML из EJS.
Создать простой шаблон EJS
Создайте папку Views в вашем проекте
Создать файл -> index.ejs
<%= title %> welcome <%= user%>;
Сделанный! Вы создали свой первый шаблон с EJS, вы нашли%> в вышеуказанном коде. Это просто привязка, и мы обсудим об этом позже. Теперь, что вы хотите сделать, это просто сделать файл index.ejs с вашего сервера узла с помощью EJS View Engine.
Рендеринг EJS.
- Создайте файл Server.js и установите модуль EJS.
- Запишите код для вашего Express App
var express = require('express');
var app = express();
Теперь внутри вас Server.js установите двигатель View в EJS следующим образом
app.set('view engine', 'ejs');
Создайте маршрут для вашего приложения
app.get('/', function(req, res){
res.render('index',{user: "Great User",title:"homepage"});
});
Помните наш файл index.ejs, мы поставили теги для привязки заголовка и пользователя на странице, здесь в функции рендеринга мы передаем параметры для их значений
Сделанный! Запустите файл Server.js
Создание частичных просмотров
До сих пор мы создали один вид, используя некоторые динамические данные и отображали выходные данные. Теперь мы постараемся создать несколько вложенных видов. I.E. Частичные виды.
- Замените содержимое вашего файла index.ejs с этим:
<% include('header.ejs') %>
<% include('body.ejs') %>
- Теперь создайте еще два файла в папке Views
header.ejs.
Hello World
body.ejs.
Welcome, Great User
- Теперь запустите свой сервер. Вы встроили частичные виды на ваш главный вид на index.ejs.
Используя JavaScript
Как я уже сказал, вы можете использовать JavaScript для шаблонов в EJS. Теперь мы увидим, как это сделано.
- Напишите это в вашем файле index.ejs,
-
<% users.forEach(function(user){ %>
<%= user.name %>
<% })%>
- Теперь рендерируйте файл index.ejs и пропустите массив объекта в функцию рендеринга, как это
app.get('/', function(req, res){
res.render('index',{users : [
{ name: 'John' },
{ name: 'Mike' },
{ name: 'Samantha' }
]});
});
Вот и все, здесь мы итилизируемся в массив, переданный на объект Render и перечислил имена каждого пользователя, используя EJS.