Node.js - Express Framework

Привет,野心勃勃的程序设计师们! Сегодня мы отправимся в увлекательное путешествие в мир Node.js и фреймворка Express. Как ваш доброжелательный сосед по компьютерным наукам, я рад помочь вам в этом приключении. Не волнуйтесь, если вы еще ни разу не писали строчки кода – мы начнем с самого начала и будем продвигаться вместе.

Что такое Express?

Прежде чем мы углубимся, давайте поговорим о том, что такое Express на самом деле. Представьте, что вы строите дом. Вы можете начать с нуля, делая свои собственные кирпичи и резая древесину. Или вы можете использовать готовые материалы, которые упрощают и ускоряют работу. Express resembles these pre-made materials, but for web applications. Это фреймворк, который предоставляет了一套 мощных функций для веб- и мобильных приложений, делая их создание с помощью Node.js проще и быстрее.

Установка Express

Давайте начнем с установки Express. Сначала убедитесь, что у вас установлен Node.js на вашем компьютере. Если нет, перейдите на официальный сайт Node.js и скачайте его.

Как только Node.js будет установлен, откройте ваш терминал (или командную строку, если вы на Windows) и введите следующую команду:

npm install express

Эта команда использует npm (Node Package Manager), чтобы установить Express. Представьте npm как магический ящик с инструментами, который содержит всевозможные полезные инструменты (называемые пакетами), которые мы можем использовать в наших проектах Node.js.

Пример "Hello World"

Теперь, когда у нас установлен Express, давайте создадим наш первыйapplication Express. Мы начнем с классического примера "Hello, World!".

Создайте новый файл под названием app.js и введите следующий код:

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

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

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

Давайте разберем это:

1. Мы импортируем модуль Express и создаем приложение Express.
2. Мы определяем номер порта (3000 в этом случае).
3. Мы настраиваем маршрут для корневого URL ('/') который отправляет "Hello, World!" в ответ.
4. Мы говорим нашему приложению слушать указанный порт.

Чтобы запустить это приложение, перейдите в ваш терминал, перейдите в директорию, содержащую app.js, и запустите:

node app.js

Теперь откройте ваш веб-браузер и перейдите на http://localhost:3000. Вы должны увидеть "Hello, World!" на странице. Поздравляю! Вы только что создали свое первое приложение Express!

Объект приложения

В предыдущем примере мы создали объект приложения Express:

const app = express();

Этот объект app является центральным в том, как мы используем Express. У него есть методы для маршрутизации HTTP-запросов, настройки middleware, отрисовки HTML-вью, регистрации шаблонного движка и многого другого.

Вот некоторые из наиболее часто используемых методов объекта app:

Метод	Описание
app.get()	Маршрутирует HTTP GET-запросы на указанный путь с указанными callback-функциями
app.post()	Маршрутирует HTTP POST-запросы на указанный путь с указанными callback-функциями
app.use()	Устанавливает указанную middleware-функцию или функции на указанном пути
app.listen()	Привязывает и слушает подключения на указанном хосте и порту

Основы маршрутизации

Маршрутизация означает определение того, как приложение отвечает на клиентский запрос к определенному endpoint'у, который является URI (или путем) и конкретным HTTP-методом (GET, POST и т.д.).

Давайте расширяем наше приложение, добавляя больше маршрутов:

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

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

app.get('/about', (req, res) => {
res.send('This is the about page');
});

app.post('/submit', (req, res) => {
res.send('Got a POST request');
});

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

В этом примере мы добавили два новых маршрута:

• GET-маршрут для '/about', который возвращает "This is the about page"
• POST-маршрут для '/submit', который возвращает "Got a POST request"

Чтобы проверить POST-маршрут, вам понадобится инструмент, такой как Postman, или вы можете создать HTML-форму, которая отправляет запрос на этот маршрут.

Serving Static Files

Часто вам нужно будет обслуживать статические файлы, такие как изображения, CSS-файлы и JavaScript-файлы. Express предоставляет встроенную middleware-функцию express.static для этой цели.

Давайте создадим директорию public в нашей проектной папке и положим в нее файл изображения (допустим, cat.jpg). Затем изменим наш app.js следующим образом:

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

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

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

app.get('/cat', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'cat.jpg'));
});

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

В этом примере мы сделали две вещи:

1. Мы использовали app.use(express.static('public')), чтобы обслуживать статические файлы из директории 'public'.
2. Мы добавили новый маршрут '/cat', который отправляет файл cat.jpg в ответ.

Теперь вы можете напрямую получить доступ к вашему изображению по адресу http://localhost:3000/cat.jpg, или через маршрут '/cat', который мы определили.

И вот и все! Мы рассмотрели основы Express, от установки до обслуживания статических файлов. Помните, чтоучение кодирования похоже на изучение нового языка – это требует практики и терпения. Не отчаивайтесь, если вы сразу не понимаете все. Продолжайте экспериментировать, продолжайте создавать, и, что самое главное, продолжайте получать удовольствие!

В следующем уроке мы углубимся в middleware Express и более сложные техники маршрутизации. Пока что, счастливого кодирования!

Credits: Image by storyset