internetSimilar presentations:
Лекция10 (1)
1. Введение в Express.js
Веб-сервер
Express.js
Настройка рабочей среды
Запуск сервера
Отображение веб-страниц
Передача параметров
2.
Веб-серверВключает два понятия: «железо» и ПО.
Веб-сервер – удаленный компьютер, хранящий ресурсы
(файлы) сайта: html-страницы, css-стили, js-файлы,
изображения и т.д. Он должен быть всегда доступен в
сети Интернет через доменное имя.
Веб-сервер состоит из нескольких программных
компонентов для управления и обработкой
пользовательских запросов.
3.
Веб-серверСтатический контент («как есть») – содержимое
сайта, хранимое на веб-сервере, передается в
браузер в неизменном виде (изображения и другие
статичные файлы).
Динамический контент получается в результате
обработки данных веб-сервером.
Пример: серверное ПО считывает данные для вебстраницы из базы данных, добавляет их в htmlкомпоненты и отправляет в браузер.
4.
Express.jsExpress.js – быстрый, гибкий, минималистичный
веб-фреймворк для приложений Node.js.
Официальный сайт: https://expressjs.com/
Разработчики: Strongloop и IBM, 2010 г.
Преимущества:
• Лаконичность (чистый JavaScript)
• Гибкость
• Простота в освоении
• Большое количество готовых пакетов (плагинов)
• Поддержка шаблонизаторов
• Высокая производительность
• Расширяемость
5.
Настройка рабочей среды1. Создайте папку с проектом и откройте ее в VS Code.
2. Запустите терминал VS Code.
3. Проверьте наличие Node.js: node -v
Если не установлен – устанавите с офиц.сайта nodejs.org
4. Создайте пустой проект: npm init
Здесь необходимо ввести запрашиваемые свойства проекта
(название, версию, описание, название стартового скрипта и
т.п.). По итогу создастся файл package.json
5. Создайте стартовый файл, например index.js.
6. Можно проверить работу index.js записав в нем:
console.log('Hi!')
Запустите скрипт на платформе nodejs: node index
7. Установите сам Express: npm install express
По итогу создается папка с пакетами node_modules и файл
package-lock.json
6.
Создание и запуск сервераСоздание простого сервера
const express = require('express') //подключаем
express на нашу страницу
const app = express() //создаем объект приложения
//создаем сервер, с помощью метода get:
app.get("/", (req, res) => res.send('Hello!'))
//прослушиваем входящие запросы:
app.listen(3000)
"/" – корневая (главная) страница
7.
Создание и запуск сервераapp.method(path, handler)
app – это экземпляр express.
method – метод запроса http (use, get, post, put
и т.п.)
path – путь на сервере
handler – функция обработки запроса
8.
Отображение веб-страницДля отображения статичных html-страниц поместите
их например в папку templates и используется метод
sendFile:
//указываем путь к статичным файлам
app.use(express.static(__dirname + '/templates'))
app.get("/", (req, res) => {
res.sendFile("index.html");
})
app.get("/contacts", (req, res) => {
res.sendFile("contacts.html");
})
9.
Установка шаблонизатораДля генерации html-страниц в node.js используют
шаблонизаторы.
Установим шаблонизатор ejs: npm install ejs
Указываем использование модуля ejs:
app.set("view engine", "ejs")
app.set("views", "./templates")
Меняем формат файлов html на ejs
10.
Передача данных на страницуЕсли необходимо передать параметры на страницу,
создаем объект и рендерим (отрисовываем) его
вместе со страницей:
let obj = { email: "my@mail.ru", address: "myaddr" }
app.get("/", (req, res) => {
res.render("contacts", obj);
})
И в файле contacts.ejs выводим значения объекта:
<body>
<p>Эл.почта: <%= email %></p>
<p>Адрес: <%= address %></p>
</body>
11.
Лабораторная работа 10Создайте проект на Express.js, включающий
следующие страницы:
• Главная
• Контакты
• О нас
Для отрисовки html-страниц используйте
шаблонизатор ejs.
Информацию на страницы «Контакты» и «О нас»
следует передавать с помощью переменных
(объектов).