JavaRush /Курсы /Модуль 4: Node.js, Next.js и Angular /Создание первого Express-приложения

Создание первого Express-приложения

Модуль 4: Node.js, Next.js и Angular
5 уровень , 1 лекция
Открыта

1. Подключаем Express и создаём приложение

Давайте напишем минимальное Express-приложение. Спойлер: это будет не больнее, чем сварить пакетный суп.

  1. Создаём файл index.js (или app.js, как вам больше нравится).
  2. Подключаем модуль express.
  3. Вызываем функцию express() и сохраняем результат в переменную app.
// Подключаем express
const express = require('express');

// Создаём приложение
const app = express();

Вот и всё! Теперь у нас есть объект app, через который мы будем настраивать сервер.

Самый простой сервер: "Hello, Express!"

Пора сделать так, чтобы сервер отвечал на запросы. Начнём с самого простого: пусть при обращении к корню сайта (/) сервер отвечает строкой "Hello, Express!".

const express = require('express');
const app = express();

// Определяем маршрут GET /
app.get('/', (req, res) => {
  res.send('Hello, Express!');
});

// Запускаем сервер на порту 3000
app.listen(3000, () => {
  console.log('Сервер запущен на http://localhost:3000');
});

Что тут происходит?

  • app.get('/', ...) — мы говорим: если пришёл GET-запрос на адрес /, выполни вот эту функцию-обработчик.
  • (req, res) => { ... } — это функция, которая получает два объекта:
    • req (request) — информация о запросе (что пришло от клиента).
    • res (response) — объект для формирования ответа клиенту.
  • res.send('Hello, Express!') — отправляем строку клиенту.
  • app.listen(3000, ...) — запускаем сервер, чтобы он слушал порт 3000.

Как проверить?

  1. Запустите сервер командой:
    node index.js
  2. Откройте браузер и перейдите по адресу http://localhost:3000.
  3. Увидите заветное "Hello, Express!".

Поздравляю, вы только что написали свой первый express-сервер! Теперь вы — повелитель порта 3000.

2. Разберёмся с маршрутизацией: что такое маршрут?

Маршрут (route) — это правило, по которому сервер решает, что делать с запросом. В Express маршрут определяется методом (get, post, put, delete и др.) и путем (/, /about, /users и т.д.).

Пример: добавим ещё один маршрут

app.get('/about', (req, res) => {
  res.send('Это страница "О нас"');
});

Теперь, если вы зайдёте на http://localhost:3000/about — увидите новый ответ.

Как работает app.listen()

Функция app.listen(port, callback) запускает сервер и заставляет его слушать указанный порт. Как только сервер готов принимать запросы, вызывается функция callback (обычно мы просто там пишем что-нибудь в консоль).

app.listen(3000, () => {
  console.log('Сервер запущен!');
});

Если вы попробуете запустить второй сервер на том же порту, получите ошибку address already in use. Порты — как парковочные места: если занято, нужно искать другое.

3. Как связать Express с приложением?

В предыдущих лекциях мы делали небольшое приложение на Node.js, где работали с массивом задач (todo-листом) через обычный модуль http. Давайте теперь постепенно перепишем этот сервер на Express.

Пусть у нас есть массив задач:

const todos = [
  { id: 1, title: 'Купить хлеб', completed: false },
  { id: 2, title: 'Выучить Express', completed: false }
];

Добавим маршрут, который будет показывать все задачи:

app.get('/todos', (req, res) => {
  res.json(todos); // Отправляем массив задач в формате JSON
});

Теперь, если вы откроете http://localhost:3000/todos, увидите массив задач в JSON-формате.

Комментарии к коду

app.get('/todos', (req, res) => {
  // res.json() автоматически ставит правильный Content-Type
  res.json(todos);
});

Express берёт на себя всю рутину: не нужно вручную сериализовать объекты в JSON и выставлять заголовки — всё делается автоматически.

4. Добавим обработку POST-запроса (мини-пример)

Часто нужно не только отдавать данные, но и принимать их. Например, добавлять новую задачу.

Для этого нам понадобится middleware для парсинга JSON (Express 4.16+ уже умеет это сам):

app.use(express.json()); // Позволяет читать JSON из тела запроса

Теперь добавим обработчик POST-запроса:

app.post('/todos', (req, res) => {
  const { title } = req.body;
  if (!title) {
    // Если не передали title — ошибка
    return res.status(400).json({ error: 'Поле title обязательно!' });
  }
  const newTodo = {
    id: todos.length + 1,
    title,
    completed: false
  };
  todos.push(newTodo);
  res.status(201).json(newTodo); // 201 — Created
});

После этого можно отправить POST-запрос через Postman или curl:

curl -X POST http://localhost:3000/todos -H "Content-Type: application/json" -d '{"title": "Погладить кота"}'

5. Кратко про структуру Express-приложения

Пока у нас всё в одном файле — и это нормально для первых шагов. В будущем, когда маршрутов станет больше, вы будете выносить их в отдельные модули, а логику — в контроллеры и сервисы. Но пока что не забегаем вперёд: мы только учимся.

Мини-структура:

project/
│
├── index.js  // основной файл приложения
├── package.json
└── node_modules/

6. Типичные ошибки при создании первого Express-приложения

Ошибка №1: забыли вызвать app.listen()
Очень частая проблема: написали маршруты, но забыли запустить сервер. В результате приложение просто завершает работу, а браузер пишет "невозможно подключиться".

Ошибка №2: не установили express
Если забыли сделать npm install express, получите ошибку Cannot find module 'express'. Всегда проверяйте, что папка node_modules есть, и в package.json присутствует зависимость express.

Ошибка №3: не используете express.json()
Если пишете обработчик POST-запроса и пытаетесь прочитать req.body, но не подключили express.json(), req.body будет всегда пустым. Не забудьте добавить app.use(express.json()) перед маршрутами!

Ошибка №4: порт уже занят
Если сервер не запускается, а консоль ругается на EADDRINUSE, значит, порт уже занят (например, предыдущий сервер не был завершён). Решение: либо завершить старый процесс, либо выбрать другой порт.

Ошибка №5: опечатки в путях или методах
Иногда пишут app.get('/Todos', ...), а заходят на /todos (или наоборот). Пути чувствительны к регистру! Также не перепутайте app.get и app.post — они обрабатывают разные типы запросов.

1
Задача
Модуль 4: Node.js, Next.js и Angular, 5 уровень, 1 лекция
Недоступна
Реализация маршрута с ответом
Реализация маршрута с ответом
1
Задача
Модуль 4: Node.js, Next.js и Angular, 5 уровень, 1 лекция
Недоступна
Отдача массива задач в формате JSON
Отдача массива задач в формате JSON
Комментарии
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ