Лаб. работа “Создание веб-приложений с использованием фреймворка Express.js”

Веб-технологии и программирование
Практика
Автор

Бизюк Андрей

Дата публикации

14 ноября 2024 г.

Цель работы

Научиться создавать веб-приложения с использованием фреймворка Express.js, а также освоить основные концепции и методы работы с этим инструментом.

Оборудование и программное обеспечение

  • Компьютер с установленной операционной системой
  • Установленный Node.js и npm (Node Package Manager)
  • Установленный редактор кода (например, Visual Studio Code)
  • Веб-браузер

Теоретическая часть

Express.js - это минималистичный и гибкий веб-фреймворк для Node.js, который обеспечивает мощный набор функций для создания одно- и многостраничных веб-приложений.

Основные компоненты Express.js:

  1. Маршрутизация: Определение конечных точек (маршрутов) для обработки запросов.
  2. Промежуточное ПО (Middleware): Функции, которые обрабатывают запросы на различных этапах их жизненного цикла.
  3. Шаблонизация: Поддержка различных шаблонизаторов для динамической генерации HTML.

Практическая часть

Шаг 1: Установка и настройка

  1. Создайте новую директорию для вашего проекта и перейдите в нее:
mkdir my-express-app
cd my-express-app
  1. Инициализируйте новый проект npm:
npm init -y
  1. Установите Express.js:
npm install express

Шаг 2: Создание базового сервера

  1. Создайте файл index.js в корне проекта и добавьте следующий код:
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
    res.send('Hello, Express!');
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});
  1. Запустите сервер:
node index.js
  1. Откройте веб-браузер и перейдите по адресу http://localhost:3000. Вы должны увидеть сообщение “Hello, Express!”.

Шаг 3: Добавление маршрутов и обработчиков

  1. Добавьте новый маршрут для страницы “About”:
app.get('/about', (req, res) => {
    res.send('About Us');
});
  1. Перезапустите сервер и проверьте страницу http://localhost:3000/about.

Шаг 4: Использование промежуточного ПО

  1. Создайте простое промежуточное ПО для логирования запросов:
app.use((req, res, next) => {
    console.log(`${req.method} request for '${req.url}'`);
    next();
});
  1. Добавьте промежуточное ПО перед определением маршрутов.

Шаг 5: Работа с шаблонами

  1. Установите шаблонизатор EJS:
npm install ejs
  1. Настройте Express для использования EJS:
app.set('view engine', 'ejs');
  1. Создайте директорию views и добавьте файл index.ejs:
<!DOCTYPE html>
<html>
<head>
    <title>My Express App</title>
</head>
<body>
    <h1>Hello, <%= name %>!</h1>
</body>
</html>
  1. Измените маршрут для главной страницы для рендеринга шаблона:
app.get('/', (req, res) => {
    res.render('index', { name: 'Express' });
});
  1. Перезапустите сервер и обновите главную страницу.

Шаг 6: Создание маршрута с параметрами

Создайте маршрут, который принимает параметр id и отображает его:

app.get('/user/:id', (req, res) => {
    res.send(`User ID: ${req.params.id}`);
});

Перезапустите сервер и проверьте маршрут по адресу http://localhost:3000/user/123.

Шаг 7: Обработка POST-запросов

Установите и подключите промежуточное ПО для обработки POST-запросов:

npm install body-parser

Подключите body-parser в вашем приложении:

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

Создайте маршрут для обработки POST-запросов на путь /submit:

app.post('/submit', (req, res) => {
    const name = req.body.name;
    res.send(`Received submission: ${name}`);
});

Проверьте маршрут с использованием инструмента Postman или curl:

curl -X POST -d "name=John" http://localhost:3000/submit

Шаг 8: Создание маршрутов для статических файлов

Создайте директорию public и добавьте туда статические файлы, например изображения, css.

Подключите промежуточное ПО для обслуживания статических файлов:

app.use(express.static('public'));

Перезапустите сервер и проверьте доступность статического файла по адресу http://localhost:3000/example.jpg.

Шаг 9: Обработка ошибок

Создание страницы ошибки 404

  1. Добавьте обработчик для маршрутов, которые не были найдены (ошибка 404):
app.use((req, res, next) => {
    res.status(404).send('Page not found');
});
  1. Перезапустите сервер и проверьте, что страница ошибки 404 отображается при переходе по несуществующему маршруту, например, http://localhost:3000/nonexistent.

Создание страницы ошибки 500

  1. Добавьте обработчик ошибок для всех остальных ошибок (ошибка 500):
app.use((err, req, res, next) => {
    console.error(err.stack);
    res.status(500).send('Something broke!');
});
  1. Для проверки этого обработчика, создайте искусственную ошибку в одном из маршрутов:
app.get('/error', (req, res) => {
    throw new Error('This is a forced error.');
});
  1. Перезапустите сервер и проверьте, что страница ошибки 500 отображается при переходе по маршруту http://localhost:3000/error.

Использование шаблонов для страниц ошибок

  1. Создайте директорию views и добавьте шаблоны для ошибок 404.ejs и 500.ejs.

  2. Пример файла views/404.ejs:

<!DOCTYPE html>
<html>
<head>
    <title>Page Not Found</title>
</head>
<body>
    <h1>404 - Page Not Found</h1>
    <p>Sorry, the page you are looking for does not exist.</p>
</body>
</html>
  1. Пример файла views/500.ejs:
<!DOCTYPE html>
<html>
<head>
    <title>Server Error</title>
</head>
<body>
    <h1>500 - Server Error</h1>
    <p>Something went wrong on our end. Please try again later.</p>
</body>
</html>
  1. Обновите обработчики ошибок для использования шаблонов:
app.use((req, res, next) => {
    res.status(404).render('404');
});

app.use((err, req, res, next) => {
    console.error(err.stack);
    res.status(500).render('500');
});
  1. Перезапустите сервер и проверьте работу страниц ошибок 404 и 500.

Самостоятельные задания

Задание 1: Настройка проекта

Создайте новый проект, установите express.js, EJS.

Задание 2: Создание основного сервера

  1. Создание сервера: В корне вашего проекта создайте файл index.js и настройте сервер с использованием express.
  2. Запуск сервера: Настройте сервер на прослушивание порта 3000 и добавьте обработку ошибок для случаев, когда сервер не удается запустить.

Задание 3: Маршрут для главной страницы

  1. Маршрут /: Создайте маршрут для главной страницы (/), который будет возвращать простое приветственное сообщение, например “Добро пожаловать на мой сайт!”.
  2. Статус-код: Убедитесь, что ваш маршрут возвращает статус-код 200.

Задание 4: Маршрут для страницы “Обо мне”

  1. Маршрут /about: Создайте маршрут для страницы “Обо мне” (/about), который будет возвращать информацию о вас, такую как имя, возраст, интересы и краткую биографию.
  2. Статус-код: Убедитесь, что ваш маршрут возвращает статус-код 200.

Задание 5: Маршрут для страницы “Контакты”

  1. Маршрут /contact: Создайте маршрут для страницы “Контакты” (/contact), который будет возвращать информацию о способах связи с вами, например, ваш email и телефон.
  2. Статус-код: Убедитесь, что ваш маршрут возвращает статус-код 200.

Задание 6: Обработка несуществующих маршрутов

  1. Обработка 404: Добавьте middleware, который будет обрабатывать запросы к несуществующим маршрутам и возвращать сообщение об ошибке с статус-кодом 404.

Задание 7: Статические файлы

  1. Папка для статических файлов: Создайте папку public в корне вашего проекта и разместите в ней несколько статических файлов (например, изображения, CSS).
  2. Подключение статических файлов: Настройте express для раздачи статических файлов из папки public.

Задание 8: Middleware

  1. Логирование запросов: Добавьте middleware, который будет логировать все входящие запросы (метод, URL и время запроса).

Задание 9: Запуск и тестирование

  1. Запуск сервера: Запустите ваш сервер и протестируйте все созданные маршруты с помощью браузера или Postman.
  2. Тестирование ошибок: Проверьте, корректно ли обрабатываются запросы к несуществующим маршрутам.
Наверх