Лаб. работа "Создание веб-приложений с использованием фреймворка Express.js"
Цель работы
Научиться создавать веб-приложения с использованием фреймворка Express.js, а также освоить основные концепции и методы работы с этим инструментом.
Оборудование и программное обеспечение
- Компьютер с установленной операционной системой
- Установленный Node.js и npm (Node Package Manager)
- Установленный редактор кода (например, Visual Studio Code)
- Веб-браузер
Теоретическая часть
Express.js - это минималистичный и гибкий веб-фреймворк для Node.js, который обеспечивает мощный набор функций для создания одно- и многостраничных веб-приложений.
Основные компоненты Express.js:
- Маршрутизация: Определение конечных точек (маршрутов) для обработки запросов.
- Промежуточное ПО (Middleware): Функции, которые обрабатывают запросы на различных этапах их жизненного цикла.
- Шаблонизация: Поддержка различных шаблонизаторов для динамической генерации HTML.
Практическая часть
Шаг 1: Установка и настройка
- Создайте новую директорию для вашего проекта и перейдите в нее:
1mkdir my-express-app
2cd my-express-app
- Инициализируйте новый проект npm:
1npm init -y
- Установите Express.js:
1npm install express
Шаг 2: Создание базового сервера
- Создайте файл
index.jsв корне проекта и добавьте следующий код:
1const express = require('express');
2const app = express();
3const port = 3000;
4
5app.get('/', (req, res) => {
6 res.send('Hello, Express!');
7});
8
9app.listen(port, () => {
10 console.log(`Server is running on http://localhost:${port}`);
11});
- Запустите сервер:
1node index.js
- Откройте веб-браузер и перейдите по адресу
http://localhost:3000. Вы должны увидеть сообщение “Hello, Express!”.
Шаг 3: Добавление маршрутов и обработчиков
- Добавьте новый маршрут для страницы “About”:
1app.get('/about', (req, res) => {
2 res.send('About Us');
3});
- Перезапустите сервер и проверьте страницу
http://localhost:3000/about.
Шаг 4: Использование промежуточного ПО
- Создайте простое промежуточное ПО для логирования запросов:
1app.use((req, res, next) => {
2 console.log(`${req.method} request for '${req.url}'`);
3 next();
4});
- Добавьте промежуточное ПО перед определением маршрутов.
Шаг 5: Работа с шаблонами
- Установите шаблонизатор EJS:
1npm install ejs
- Настройте Express для использования EJS:
1app.set('view engine', 'ejs');
- Создайте директорию
viewsи добавьте файлindex.ejs:
1<!DOCTYPE html>
2<html>
3<head>
4 <title>My Express App</title>
5</head>
6<body>
7 <h1>Hello, <%= name %>!</h1>
8</body>
9</html>
- Измените маршрут для главной страницы для рендеринга шаблона:
1app.get('/', (req, res) => {
2 res.render('index', { name: 'Express' });
3});
- Перезапустите сервер и обновите главную страницу.
Шаг 6: Создание маршрута с параметрами
Создайте маршрут, который принимает параметр id и отображает его:
1app.get('/user/:id', (req, res) => {
2 res.send(`User ID: ${req.params.id}`);
3});
Перезапустите сервер и проверьте маршрут по адресу http://localhost:3000/user/123.
Шаг 7: Обработка POST-запросов
Установите и подключите промежуточное ПО для обработки POST-запросов:
1npm install body-parser
Подключите body-parser в вашем приложении:
1const bodyParser = require('body-parser');
2app.use(bodyParser.urlencoded({ extended: false }));
3app.use(bodyParser.json());
Создайте маршрут для обработки POST-запросов на путь /submit:
1app.post('/submit', (req, res) => {
2 const name = req.body.name;
3 res.send(`Received submission: ${name}`);
4});
Проверьте маршрут с использованием инструмента Postman или curl:
1curl -X POST -d "name=John" http://localhost:3000/submit
Шаг 8: Создание маршрутов для статических файлов
Создайте директорию public и добавьте туда статические файлы, например изображения, css.
Подключите промежуточное ПО для обслуживания статических файлов:
1app.use(express.static('public'));
Перезапустите сервер и проверьте доступность статического файла по адресу http://localhost:3000/example.jpg.
Шаг 9: Обработка ошибок
Создание страницы ошибки 404
- Добавьте обработчик для маршрутов, которые не были найдены (ошибка 404):
1app.use((req, res, next) => {
2 res.status(404).send('Page not found');
3});
- Перезапустите сервер и проверьте, что страница ошибки 404 отображается при переходе по несуществующему маршруту, например,
http://localhost:3000/nonexistent.
Создание страницы ошибки 500
- Добавьте обработчик ошибок для всех остальных ошибок (ошибка 500):
1app.use((err, req, res, next) => {
2 console.error(err.stack);
3 res.status(500).send('Something broke!');
4});
- Для проверки этого обработчика, создайте искусственную ошибку в одном из маршрутов:
1app.get('/error', (req, res) => {
2 throw new Error('This is a forced error.');
3});
- Перезапустите сервер и проверьте, что страница ошибки 500 отображается при переходе по маршруту
http://localhost:3000/error.
Использование шаблонов для страниц ошибок
Создайте директорию
viewsи добавьте шаблоны для ошибок404.ejsи500.ejs.Пример файла
views/404.ejs:
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Page Not Found</title>
5</head>
6<body>
7 <h1>404 - Page Not Found</h1>
8 <p>Sorry, the page you are looking for does not exist.</p>
9</body>
10</html>
- Пример файла
views/500.ejs:
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Server Error</title>
5</head>
6<body>
7 <h1>500 - Server Error</h1>
8 <p>Something went wrong on our end. Please try again later.</p>
9</body>
10</html>
- Обновите обработчики ошибок для использования шаблонов:
1app.use((req, res, next) => {
2 res.status(404).render('404');
3});
4
5app.use((err, req, res, next) => {
6 console.error(err.stack);
7 res.status(500).render('500');
8});
- Перезапустите сервер и проверьте работу страниц ошибок 404 и 500.
Самостоятельные задания
Задание 1: Настройка проекта
Создайте новый проект, установите express.js, EJS.
Задание 2: Создание основного сервера
- Создание сервера: В корне вашего проекта создайте файл
index.jsи настройте сервер с использованием express. - Запуск сервера: Настройте сервер на прослушивание порта 3000 и добавьте обработку ошибок для случаев, когда сервер не удается запустить.
Задание 3: Маршрут для главной страницы
- Маршрут
/: Создайте маршрут для главной страницы (/), который будет возвращать простое приветственное сообщение, например “Добро пожаловать на мой сайт!”. - Статус-код: Убедитесь, что ваш маршрут возвращает статус-код 200.
Задание 4: Маршрут для страницы “Обо мне”
- Маршрут
/about: Создайте маршрут для страницы “Обо мне” (/about), который будет возвращать информацию о вас, такую как имя, возраст, интересы и краткую биографию. - Статус-код: Убедитесь, что ваш маршрут возвращает статус-код 200.
Задание 5: Маршрут для страницы “Контакты”
- Маршрут
/contact: Создайте маршрут для страницы “Контакты” (/contact), который будет возвращать информацию о способах связи с вами, например, ваш email и телефон. - Статус-код: Убедитесь, что ваш маршрут возвращает статус-код 200.
Задание 6: Обработка несуществующих маршрутов
- Обработка 404: Добавьте middleware, который будет обрабатывать запросы к несуществующим маршрутам и возвращать сообщение об ошибке с статус-кодом 404.
Задание 7: Статические файлы
- Папка для статических файлов: Создайте папку
publicв корне вашего проекта и разместите в ней несколько статических файлов (например, изображения, CSS). - Подключение статических файлов: Настройте express для раздачи статических файлов из папки
public.
Задание 8: Middleware
- Логирование запросов: Добавьте middleware, который будет логировать все входящие запросы (метод, URL и время запроса).
Задание 9: Запуск и тестирование
- Запуск сервера: Запустите ваш сервер и протестируйте все созданные маршруты с помощью браузера или Postman.
- Тестирование ошибок: Проверьте, корректно ли обрабатываются запросы к несуществующим маршрутам.