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

  • 5 мин

Tailwind Traders поручил вам создать простой API с помощью платформы Express. Интернет-магазин хочет оценить Express, чтобы понять, насколько легко с ним работать. С этой целью вам нужно создать веб-приложение, которое обслуживает разные маршруты.

Открытие проекта в контейнере разработки

Используйте предоставленный контейнер разработки для выполнения упражнений в этом модуле. Контейнер разработки предварительно настроен с помощью инструментов, необходимых для выполнения упражнений.

  1. Запустите процесс создания нового пространства кода GitHub в main ветви MicrosoftDocs/node-essentials репозитория GitHub.

    Открытие этого проекта в GitHub Codespaces

  2. На странице "Создание пространства кода" просмотрите параметры конфигурации пространства кода и выберите "Создать новое пространство кода"

    Screenshot of the confirmation screen before creating a new codespace.

  3. Дождитесь запуска пространства кода. Этот процесс запуска может занять несколько минут.

  4. Откройте новый терминал в пространстве кода.

    Совет

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

    Screenshot of the codespaces menu option to open a new terminal.

  5. Убедитесь, что Node.js установлен в вашей среде:

    node --version

    Контейнер разработки использует версию Node.js LTS, например v20.5.1. Точную версию может отличаться.

  6. Остальные упражнения в этом проекте происходят в контексте этого контейнера разработки.

Создание простейшего веб-приложения с помощью Express

Создайте базовое приложение для обработки запросов.

  1. Откройте терминал в контейнере разработки.

  2. Используйте следующие команды, чтобы создать проект Node.js и установить платформу Express:

    mkdir my-express-app
cd my-express-app
npm init -y
npm install express

    Команда init создает файл по умолчанию package.json для вашего проекта Node.js. Команда install устанавливает платформу Express.

  3. Откройте файл package.json в редакторе кода.

    В разделе dependencies найдите запись express:

    "dependencies": {
  "express": "^4.18.2"
  ...
}

    Эта запись означает, что установлена платформа Express. Ваша версия может быть более последней. В этом примере кода используется версия 4 платформы Express.

  4. В редакторе кода в папке my-express-app создайте файл с именем 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 on port ${port}! http://localhost:${port}/`));

    Код создает экземпляр приложения Express, вызывая метод express(). Это функция верхнего уровня, экспортируемая модулем Express. Все дальнейшие настройки и функциональные возможности добавляются с помощью переменной app .

    Обратите внимание, как код настраивает маршрут на косую черту /, корень с синтаксисом:

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

    После настройки маршрута код запускает веб-приложение, вызывая метод listen():

    app.listen(port, () => console.log('Example app listening on port ${port}!'));

  5. Откройте терминал для этой вложенной папки, щелкнув правой кнопкой мыши имя вложенной папки и выбрав "Открыть в интегрированном терминале".

  6. В сеансе терминала выполните следующую команду, чтобы запустить веб-приложение Express:

    node app.js

    Должен появиться следующий результат:

    Example app listening at http://localhost:3000

    Эти выходные данные означают, что приложение работает и готово к получению запросов.

  7. Вы можете щелкнуть правой кнопкой мыши и выбрать URL-адрес в терминале или открыть браузер, когда Visual Studio Code появится уведомление с просьбой открыть в браузере. Должен появиться следующий результат:

    Hello World!

  8. В окне терминала нажмите клавиши CTRL+C, чтобы остановить веб-программу Express.

Создание веб-приложения, возвращающего данные в формате JSON

Используйте тот же файл app.js для добавления нового маршрута.

  1. Откройте файл app.js в редакторе кода.

  2. Добавьте следующий код после существующего app.get синтаксиса после кода для первого маршрута: /

     app.get('/products', (req, res) => {
     const products = [
         { id: 1, name: 'hammer' },
         { id: 2, name: 'screwdriver' },
         { id: 3, name: 'wrench' },
     ];

     res.json(products);
 });

  3. Убедитесь, что файл app.js выглядит следующим образом:

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

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

 app.get('/products', (req, res) => {
     const products = [
         { id: 1, name: 'hammer' },
         { id: 2, name: 'screwdriver' },
         { id: 3, name: 'wrench' },
     ];

     res.json(products);
 });

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

  4. Сохраните изменения в файле app.js и закройте файл.

  5. В сеансе терминала выполните следующую команду, чтобы перезапустить веб-приложение Express:

    node app.js

    Должен появиться следующий результат:

    Example app listening at http://localhost:3000

  6. В браузере вернитесь на вкладку с предыдущего шага и добавьте новый маршрут в /productsконец URL-адреса. Вы увидите следующие выходные данные JSON:

    [{"id":1,"name":"hammer"},{"id":2,"name":"screwdriver"},{"id":3,"name":"wrench"}]

  7. В окне терминала нажмите клавиши CTRL+C, чтобы остановить веб-программу Express.

Поздравляем! Вы реализовали второй маршрут, который может обслуживать статические данные JSON.