Часть 1: Настройка стека
Я изучал различные стеки веб-приложений и хотел поделиться ими с вами, ребята. В этом руководстве, состоящем из двух частей, мы создадим базовое приложение для управления сотрудниками CRUD, в котором будут использоваться упомянутые выше технологии.
Как коллега-программист, который хочет исследовать и опробовать различные технологии, я изо всех сил пытался найти статьи, в которых обсуждаются следующие технологии в реальном приложении. Эта статья требует, чтобы вы имели хотя бы базовые знания React, MongoDB и NestJS.
Настройка среды
Если у вас нет следующих программных инструментов, выполните описанную ниже процедуру, чтобы установить их на свой компьютер:
- На вашем компьютере должны быть установлены Node.js и npm. Пожалуйста, перейдите по этой ссылке, чтобы установить оба.
- У вас есть предпочтительный текстовый редактор (например, Sublime, VSCode) и веб-браузер (например, Google Chrome, Firefox).
- У вас должно быть установлено приложение Postman. Это будет использоваться для тестирования нашего приложения.
Теперь, когда все готово, приступим к созданию этого замечательного приложения!
Создание серверной части
Начнем с нашего стека серверов MongoDB + NestJS + Node!
Настройка кластера MongoDB Atlas
Создайте учетную запись MongoDB. После создания учетной записи мы можем создать проект и кластер бесплатного уровня в MongoDB, аналогичный приведенному ниже:
Чтобы подключить кластер, вы можете нажать кнопку «Подключить» . Затем нажмите «Подключить приложение».
Обратите внимание на строку подключения, отображаемую на странице (аналогичную приведенной ниже). Мы будем использовать это позже при подключении к базе данных:
mongodb+srv://<username>:<password>@cluster0.abvta.mongodb.net/<dbname>?retryWrites=true&w=majority
На вкладке «Доступ к сети» в левой части страницы нам нужно внести в белый список наш текущий IP-адрес, чтобы мы могли подключиться к проекту MongoDB. Нажмите кнопку «ДОБАВИТЬ IP-АДРЕС» и добавьте свой текущий IP-адрес.
Создание проекта NestJS
Теперь, когда кластер MongoDB создан, давайте создадим проект NestJS. Откройте терминал и создайте каталог нашего проекта. Назовем его full-stack-employee-app:
$ mkdir full-stack-employee-app
Если у вас нет библиотеки NestJs на вашем компьютере, вы можете установить ее, используя следующую команду:
$ npm install -g @nestjs/cli
Внутри каталога проекта нам нужно создать наш проект NestJS с именем backend:
$ cd full-stack-employee-app $ nest new backend
Это создаст шаблонный проект NestJS для нашего приложения. После этого нам необходимо установить следующие библиотеки:
$ cd backend $ npm install --save @nestjs/mongoose mongoose $ npm install --save @nestjs/config
Запуск приложения
К настоящему времени мы можем запустить приложение, чтобы сначала проверить только что созданный проект NestJS:
$ npm run start
Это запустит приложение на порте по умолчанию 3000. Откройте выбранный вами веб-браузер, перейдите по адресу http: // localhost: 3000, и вы должны увидеть страницу, подобную той, что представлена ниже:
Подключение к кластеру MongoDB
Помните строку подключения, которую мы сохранили ранее? Нам нужно поместить его в .env файл в корне нашего внутреннего каталога. Вы можете изменить <username>, <password> и <dbname> в зависимости от того, что вы установили ранее.
В файле app.module.ts в каталоге src/ измените код, чтобы получить следующее:
Если вы попытаетесь выполнить приведенную ниже команду в корневом каталоге нашего проекта, программа должна без проблем подключиться к экземпляру mongoDB:
$ npm run start
Создание модуля "Сотрудник"
Теперь мы собираемся создать Employee модуль нашего приложения. Сначала создайте в каталоге src/ следующие папки:
$ mkdir employee/ $ mkdir employee/dto/ $ mkdir employee/interfaces/ $ mkdir employee/schemas/
Сначала мы начнем с папки schema/. Внутри папки schema создайте файл с именем employee.schema.ts и поместите в него следующий код. Это определит поля схемы employee:
Теперь, переходя к папке interfaces/, нам нужно создать интерфейс, который будет использоваться для проверки типов данных, полученных приложением. Создайте employee.interface.ts внутри папки interfaces/ и вставьте следующий код:
Затем мы перейдем в папку dto/. Нам нужно создать схему DTO (Data Transfer Object), которая определяет, как наши данные будут отправляться по сети. Создайте create-employee.dto.ts внутри папки dto/ и добавьте следующий код:
Создание модуля "Сотрудник"
Декоратор @Module() в NestJs предоставляет метаданные, которые он использует для организации структуры приложения. Чтобы создать модуль в Nest, выполните следующую команду:
$ nest generate module employee
Это создаст файл с именем employee.module.ts внутри папки employee/. Это будет выглядеть примерно так:
Мы вернемся и изменим этот файл позже.
Создание службы сотрудников
Чтобы создать сервис, вы можете вызвать следующую команду:
$ nest generate service employee
Это создаст два файла, а именно employee.service.ts и employee.service.spec.ts , внутри сотрудника / папки. Первый файл - это тот, который мы собираемся изменить, чтобы создать службу для сотрудников. Между тем, employee.service.spec.ts используется для тестирования созданного сервиса. В этом руководстве не рассматривается тестирование в Nest. Следите за обновлениями, и в будущем выйдет еще один учебник, который будет посвящен этой теме.
Возвращаясь к службе сотрудников, этот класс обслуживания отвечает за извлечение и хранение данных, которые будут использоваться контроллером. Идите вперед и измените файл employee.service.ts, чтобы он имел следующий код:
Создание контроллера Employee
Контроллер веб-API - это класс, который отвечает за обработку входящих HTTP-запросов и отправку соответствующих ответов вызывающей стороне. Чтобы создать контроллер в Nest, вы можете вызвать следующую команду:
$ nest generate controller employee
Это создаст два файла, employee.controller.ts и employee.controller.spec.ts, внутри папки employee/. Подобно сервису, который мы создали ранее, мы просто изменим employee.controller.ts для этого руководства.
Теперь вы можете изменить файл employee.controller.ts, чтобы он имел следующий код:
Декоратор @Controller() в верхней части класса используется для определения базового контроллера. Мы добавили строку employee внутри декоратора, чтобы сгруппировать связанные маршруты.
Для первой функции это позволит нам добавлять сотрудника каждый раз, когда мы получаем HTTP-запрос Post. Маршрут /create также был добавлен для использования этой функции.
Теперь продолжайте и модифицируйте контроллер, чтобы иметь эти два маршрута, которые позволят нам искать всех сотрудников или только одного сотрудника с определенным идентификатором сотрудника.
Чтобы получить сотрудника с определенным идентификатором, мы будем выдавать NotFoundException всякий раз, когда запрос приходит с недопустимым идентификатором.
Наконец, измените код контроллера, чтобы иметь маршрут для обновления и удаления конкретного сотрудника:
Рыбалка это вверх
Теперь мы почти закончили с серверной частью. Нам просто нужно вернуться и изменить employee.module.ts, который мы создали ранее, чтобы у вас было следующее:
Запуск приложения и тестирование с помощью Postman
Теперь, когда мы все настроены, мы можем запустить приложение, используя ту же команду, которую мы использовали ранее:
$ npm run start
После запуска приложения вы можете перейти к приложению Postman и протестировать его аналогичным образом, выполнив следующие действия:
Создание сотрудника
Получение всех сотрудников
Получение сотрудника с определенным идентификатором
Обновление сотрудника
Чтобы обновить сотрудника, нам нужно поместить employeeId во вкладку «Параметры» с соответствующим employeeId.
Точно так же нам нужно поместить обновленные данные во вкладку «Тело». После выполнения команды у вас должен быть аналогичный результат.
Для проверки вы можете выполнить запрос на получение всех сотрудников, и вы должны увидеть внесенные вами изменения.
Удаление сотрудника
Аналогично запросу на обновление, employeeId необходим для удаления сотрудника.
Заключение
Чтобы завершить это руководство, мы создали внутренний компонент нашего приложения, который подключен к MongoDB Atlas. Также мы создали схему сотрудников с соответствующими службами и контроллерами. Соответственно, мы протестировали наше приложение с помощью Postman.
Если вы хотите больше узнать о коде, вы можете проверить этот репозиторий GitHub:
Следите за моей следующей статьей. Мы займемся интерфейсной частью приложения.
