Дженнифер Бландом
EJS, встроенный JavaScript, это шаблон. EJS сочетает в себе данные и шаблон для получения HTML. Одной из наиболее важных особенностей в EJS является его использование частиц. Частичные возможности позволяют определить что-то один раз, а затем применить его на любую страницу в вашем приложении.
Я покажу вам, как создать простое приложение Node.js, которое использует EJS в качестве механизма шаблонов. Затем мы создадим 2 страницы для сайта. Мы будем использовать частичные, чтобы построить нашу голову, навигацию, нижнюю колонтитую и содержание.
Вы можете получить код для этого примера на GitHub
Структура файла
Мы будем создавать пример приложения, которое будет иметь две страницы: индекс и о.
Вот структура файлов для приложения, которую мы будем создавать.
public — — style.css- routes — — index.js- views — — pages — — — — about.ejs — — — — index.ejs- partials — — — — 3columns.ejs — — — — footer.ejs — — — — head.ejs — — — — nav.ejs — — — — scripts.ejs- package.json- server.js
Начиная
Мы сначала настроим наш Package.json. Этот файл будет содержать все модули, которые мы будем использовать в нашем приложении. Мы будем использовать:
- выражать
- EJS
{ "name": "node_ejs_boilerplate", "version": "1.0.0", "description": "Boilerplate showing the use of ejs as view template engine in a Node.js application", "author": "Jennifer Bland", "main": "server.js", "dependencies": { "ejs": "^2.4.1", "express": "^4.13.4" }}Вы можете добавить зависимости непосредственно в ваш Package.json или вы можете установить зависимости, чтобы они были автоматически добавлены в Package.json. Чтобы вручную устанавливать зависимости, введите эту команду:
npm install express ejs — save
Если вы добавили зависимости, добавив их в свой Package.json, вам нужно будет установить их, используя эту оценку:
npm install
Server.js.
Теперь, когда у нас есть все наши зависимости, нам нужно создать приложение в Server.js. Вот как выглядит наш файл Server.js.
'use strict';
// ================================================================// get all the tools we need// ================================================================var express = require('express');var routes = require('./routes/index.js');var port = process.env.PORT || 3000;var app = express();
// ================================================================// setup our express application// ================================================================app.use('/public', express.static(process.cwd() + '/public'));app.set('view engine', 'ejs');// ================================================================// setup routes// ================================================================routes(app);
// ================================================================// start our server// ================================================================app.listen(port, function() { console.log('Server listening on port ' + port + '…');});Наш сервер будет слушать порта, определенный в Procement.env. Порт или 3000, если он не определен.
Мы определяем/общественный каталог, поскольку именно то, как мы достигнем нашей таблицы styleSheet.
Мы определяем наш шаблочный двигатель, чтобы быть EJS.
Маршруты
Чтобы сделать ваше приложение, выполните структуру приложения Node.js, я поставил маршруты для вашего индекса и о страницах в свой собственный файл. Этот файл является index.js в папке маршрутов.
Поскольку я поставил маршруты в собственную папку, мне нужно получить доступ к ним, требуя их в файле Server.js.
У нас есть 2 маршрута в нашем приложении
- /- Это то, чтобы отобразить домашнюю страницу
- /о – это то, чтобы отобразить страницу о
В маршрутах мы используем res.render для отображения соответствующих страниц. Команда Render по умолчанию будет искать файлы в папке под названием Views. Мы полагаемся по этому дефолту и добавляем только путь в папку Views.
Вот наш файл index.js в папке маршрутов.
'use strict';
module.exports = function(app) { app.get('/', function(req, res) { res.render('pages/index'); }); app.get('/about', function(req, res) { res.render('pages/about'); });};Настройка наших частиц
Для нашего образца приложения я собираюсь реализовать четыре частиц.
- Голова – содержит предметы, найденные в заголовке веб-страницы
- навигация – навигация, которая будет отображаться на каждой странице
- нижний колонтитул – статический нижний колонтитул со ссылкой на мой сайт
- Сценарии – Загрузка сценариев, таких как jQuery и bootstrap
- 3Columns – содержание, которое будет отображаться на главной странице
Частичные средства обеспечивают легкое обслуживание вашего кода. Например, если вы создаете навигацию на всех ваших страницах, когда вам нужно добавить новую запись на навигацию, вы должны затем обновить каждую страницу с этим изменением.
Частичная навигация будет вставлена на каждую страницу, которая требует ее. Чтобы добавить новую запись на навигацию, вам нужно просто обновить частичную, и он будет автоматически применен на каждой странице, которая содержит NAV Partial.
Вот содержимое всех наших частиц.
head.ejs.
Demonstration of EJS templating in NodeJS Application
Nav.ejs.
Footer.ejs.
© Copyright 2015 CodePrep.io
Scripts.ejs.ejs.
3Columns.ejs.ejs.
Sample Data
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget iaculis lorem. Fusce elementum magna fringilla ipsum bibendum, vitae consectetur ligula interdum. Sed mauris diam, hendrerit eget suscipit vel, luctus at odio. Etiam pellentesque a metus et pharetra. Praesent dictum, libero id tempor malesuada, erat ex cursus nibh, ac hendrerit massa neque commodo metus. Integer porttitor ante eu varius interdum. Suspendisse quis iaculis erat. Fusce eu nisl id eros tempor posuere. Donec placerat orci orci, ut ultrices neque rutrum in. Nunc dignissim ante et risus rhoncus, vel feugiat mi vestibulum. Aliquam in dictum neque, non vestibulum lorem. Sed imperdiet dolor vitae felis iaculis, id sollicitudin lectus rhoncus. Maecenas ac dolor eget tortor rutrum commodo. Aliquam luctus iaculis mi id semper. Suspendisse sem nisi, convallis at dapibus in, convallis eu neque. Curabitur maximus magna et nulla ullamcorper facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget iaculis lorem. Fusce elementum magna fringilla ipsum bibendum, vitae consectetur ligula interdum. Sed mauris diam, hendrerit eget suscipit vel, luctus at odio. Etiam pellentesque a metus et pharetra. Praesent dictum, libero id tempor malesuada, erat ex cursus nibh, ac hendrerit massa neque commodo metus. Integer porttitor ante eu varius interdum. Suspendisse quis iaculis erat. Fusce eu nisl id eros tempor posuere. Donec placerat orci orci, ut ultrices neque rutrum in. Nunc dignissim ante et risus rhoncus, vel feugiat mi vestibulum. Aliquam in dictum neque, non vestibulum lorem. Sed imperdiet dolor vitae felis iaculis, id sollicitudin lectus rhoncus. Maecenas ac dolor eget tortor rutrum commodo. Aliquam luctus iaculis mi id semper. Suspendisse sem nisi, convallis at dapibus in, convallis eu neque. Curabitur maximus magna et nulla ullamcorper facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget iaculis lorem. Fusce elementum magna fringilla ipsum bibendum, vitae consectetur ligula interdum. Sed mauris diam, hendrerit eget suscipit vel, luctus at odio. Etiam pellentesque a metus et pharetra. Praesent dictum, libero id tempor malesuada, erat ex cursus nibh, ac hendrerit massa neque commodo metus. Integer porttitor ante eu varius interdum. Suspendisse quis iaculis erat. Fusce eu nisl id eros tempor posuere. Donec placerat orci orci, ut ultrices neque rutrum in. Nunc dignissim ante et risus rhoncus, vel feugiat mi vestibulum. Aliquam in dictum neque, non vestibulum lorem. Sed imperdiet dolor vitae felis iaculis, id sollicitudin lectus rhoncus. Maecenas ac dolor eget tortor rutrum commodo. Aliquam luctus iaculis mi id semper. Suspendisse sem nisi, convallis at dapibus in, convallis eu neque. Curabitur maximus magna et nulla ullamcorper facilisis.
Строительство наших страниц
Наш пример приложения имеет домашнюю страницу и о странице. Нам нужно будет создать обе эти страницы. На этих страницах мы вставим соответствующие частицы, которые мы только что создали на странице.
Мы вкладываем все наши частии в папку, называемую частичными в папке Views. Мы собираемся создать еще одну папку в папке Views, называемых страницами. Эта папка будет содержать нашу домашнюю страницу и о страницах.
Чтобы вставить частичную на странице, мы используем этот формат:
<% include ../partials/head %>
Вот содержимое наших двух страниц:
index.ejs.
<% include ../partials/head %>
<% include ../partials/nav %>
CodePrep.io Presents
Using EJS templating with Node.js
<% include ../partials/3columns %>
<% include ../partials/footer %>
<% include ../partials/scripts %>
О.Эйс
<% include ../partials/head %>
<% include ../partials/nav %>
About Page
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien eros, dictum eu malesuada sagittis, pellentesque sed enim. Donec at odio volutpat, dignissim mauris tincidunt, pharetra lorem. Fusce porta neque non lorem vulputate, et commodo dolor semper. Proin sodales lacinia nibh vel semper. Nulla sed faucibus nisi. Aliquam venenatis pellentesque tortor et fringilla. Nulla porttitor massa vitae libero volutpat, id mollis neque elementum. Integer porta, enim eu pharetra interdum, diam metus mollis purus, id ornare risus enim a magna. Sed rhoncus, nulla ac hendrerit lacinia, neque lectus iaculis ligula, et euismod erat massa sit amet orci. Ut fermentum hendrerit arcu. Vestibulum quis leo ut ante eleifend fringilla.
Morbi maximus eu lorem sit amet tempor. Nunc dignissim lacus vel aliquet ornare. Aliquam eget turpis et nisi tincidunt rhoncus. Vestibulum interdum interdum aliquet. Phasellus quis erat est. Pellentesque molestie pretium quam in fermentum. Maecenas eu luctus turpis, euismod feugiat risus. Integer scelerisque cursus tempor. Phasellus in bibendum tortor.
Aenean vitae lorem augue. Cras ultricies posuere vestibulum. Integer non felis porttitor mi ultricies pretium. Sed vitae nisi accumsan, maximus lorem sed, malesuada quam. Nunc lacus est, elementum vel ultrices sit amet, suscipit eu nibh. Maecenas vel facilisis leo, id congue sem. In hac habitasse platea dictumst. Aenean est lorem, hendrerit sit amet rutrum ac, sodales eget neque. Pellentesque hendrerit, risus in bibendum varius, purus tellus accumsan leo, et suscipit lorem nulla non arcu.
<% include ../partials/footer %>
<% include ../partials/scripts %>
Начало нашего приложения
Чтобы запустить приложение Введите следующую команду:
node server.js
Когда ваше приложение начинается, он будет отображать вашу домашнюю страницу:
Если вы нажмете на ссылку в навигации, вы увидите о странице:
Получить код
Вы можете получить код для этого примера на GitHub
Больше статей
Спасибо за чтение моей статьи. Если вам это нравится, пожалуйста, нажмите на значок Clap ниже, чтобы другие найдут статью. Вот несколько моих статей, которые вас могут заинтересовать: Использование Node.js & Express.js для сохранения данных в базу данных MongoDB Счет первых впечатлений – почему ваш GitHub Repo не имеет файла readme? Почему культура компании важна для вашей карьеры в качестве инженера программного обеспечения
Оригинал: “https://www.freecodecamp.org/news/how-to-use-ejs-templating-in-a-node-js-application-ea9347a96c65/”