Как использовать движки шаблонов с Express

В этом примере мы увидим, как использовать механизмы шаблонов с Express . Механизм шаблонов позволяет использовать файлы статических шаблонов в вашем приложении. Во время выполнения механизм шаблонов заменяет переменные в файле шаблона фактическими значениями и преобразует шаблон в файл HTML, отправляемый клиенту. Такой подход упрощает создание HTML-страницы. Существенным преимуществом такого подхода, когда дело касается шаблонов, является явная возможность отображать HTML на стороне сервера. Итак, мы можем легко провести SEO, и мы не обрабатываем данные JSON. В этой статье я хочу рассмотреть некоторые из самых популярных движков шаблонов JavaScript.

Если вы хотите узнать больше о Node.js, то ознакомьтесь с этим курсом NodeJS — Полное руководство (включая. MVC, REST API, GraphQL)

Как использовать механизмы шаблонов с Express

Теперь сначала мы устанавливаем экспресс-веб-фреймворк, а затем начинаем реализовывать различные механизмы шаблонов в нашем приложении node.js.

# 1: Создайте сервер Node.js Express

Сначала создайте каталог проекта node.js.

 mkdir exptemplate 

Теперь войдите в папку и инициализируйте файл package.json .

 npm init -y 

Следующим шагом является установка платформы Express.

 npm install express --save 

Теперь создайте в корне файл с именем server.js и добавьте следующий код.

//server.jsconst app = require ('express') (); const PORT = process.env.PORT = 4000; app.listen (PORT, ()  => {console.log ('Сервер работает на порту', ПОРТ);}); 

Мы можем использовать сервер nodemon для разработки. Итак, давайте установим его с помощью следующей команды.

 npm install nodemon --save 

Теперь запустите сервер, используя следующую команду.

 сервер nodemon 

# 2: Установите и настройте движок шаблонов Pug

Хорошо, теперь установите наш Первый движок шаблонов Pug, используя следующую команду.

 npm install pug --save 

Создайте в корне одну папку с именем

Теперь, когда Pug установлен установите его в качестве движка шаблонов для вашего приложения. Вам не нужно «требовать» этого. Добавьте следующий код в свой файл server.js .

//server.jsapp.set ('view engine', 'pug'); app.set  ('views', path.join (__ dirname, 'views')); 

Здесь мы определили механизм шаблонов

Также мы определили каталог, из которого эти файлы шаблонов могут загружаться в нашем приложении..

Итак, когда запрос приходит от клиента, он переходит к маршрутизатору, а затем маршрутизатор перенаправляет на одну из страниц внутри папки views , а затем эта страница будет отображена.

Следующим шагом будет создание файла в папке представлений с именем template.pug и добавление следующего кода.

//template.pugdoctype htmlhtml заголовок заголовка Hello From Pug Templating Engine body p.greetings # peopleHello Hello From Pug Templating Engine! 

Это синтаксис pug для написания HTML.

Чтобы запустить эту страницу, добавьте следующий маршрут в ваш файл server.js .

//server.jsapp.get (' /template ', function (req, res) {res.render (' template ');}); 

Итак, наш последний файл server.js выглядит так, как показано ниже.

//server.jsconst app = require ('express') (); const path = require ('path'); const PORT = process.env.PORT = 4000; app.set ('view engine',  'мопс'); app.set ('views', path.join (__ dirname, 'views')); app.get ('/template', func  tion (req, res) {res.render ('template');}); app.listen (PORT, () => {console.log ('Сервер работает на порту', PORT);}); 

Сохраните файл и посмотрите консоль, если мы работаем с ошибками, а если нет, то убедитесь, что ваш сервер nodemon запущен. Если все в порядке, перейдите в браузер и переключитесь на следующий URL.

http://localhost: 4000/template

Вы можете видеть, что наш HTML-код отображается, и мы успешно интегрировали механизм шаблонов Pug .

# 3: Установите и настройте Шаблон Mustache

Мы можем использовать механизм шаблонов Mustache в Express; сначала установите пакет mustache-express.

 npm i mustache-express 

Теперь потребуйте и настройте модуль. Я написал последний файл server.js для реализации модуля mustache-express.

//server.jsconst app  = require ('express') (); const path = require ('path'); const PORT = process.env.PORT = 4000; const mustacheExpress = require ('mustache-express'); app.engine ('html'  , mustacheExpress ()); app.set ('механизм просмотра', 'html'); app.set ('views', path.join (__ dirname, 'views')); app.get ('/template', function  (req, res) {res.render ('index.html', {yourdata: 'Hello from Mustache Template'});}); app.listen (PORT, () => {console.log ('Сервер  работает на порту ', PORT);}); 

Кроме того, нам нужно создать файл в папке views с именем index.html и напишите следующий HTML-код в файле index.html .

        Механизм шаблонов Mustache    
{{yourdata}}

Сохраните файл, перейдите в браузер и перейдите по следующему URL-адресу.

http ://localhost: 4000/template

Как видите, мы успешно интегрировали шаблон Mustache в Express.

# 4: Установить и настроить шаблон EJS

Мы можем установить шаблон EJS (встроенный Javascript), используя следующую команду.

 npm install ejs --save 

Теперь импортируйте шаблон ejs, а также настройте шаблон ejs.

Напишите окончательный код внутри server.js .

//server.jsconst app = require ('express') (); const path = require ('path'); const PORT = process  .env.PORT = 4000; const ejs = require ('ejs'); app.set ('механизм просмотра', 'ejs'); app.set ('views', path.join (__ dirname, 'views'))  ; app.get ('/template', function (  req, res) {res.render ('welcome.ejs', {yourdata: 'Hello from EJS Template'});}); app.listen (PORT, () => {console.log ('Сервер запущен  on port ', PORT);}); 

Итак, здесь мы установили механизм шаблонов на ejs. Теперь создайте файл с именем welcome.ejs внутри папки views .

         Шаблон EJS       

Сохраните файл, перейдите в браузер и переключитесь на следующий URL.

http://localhost: 4000 /template

Теперь мы успешно интегрировали шаблон EJS.

Наконец, как использовать механизмы шаблонов Экспресс-руководство с примерами окончено. Спасибо, что приняли.

Оцените статью
nanomode.ru
Добавить комментарий