Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Создание приложения блога на Angular и MongoDB:  Главная

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Login
Creating a Blogging App Using Angular & MongoDB: Show Post

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

В первой части учебной серии вы видели, как начать работу с созданием Angular веб-приложения. Вы узнали, как настроить приложение и создать компонент «Login».

В этой части серии вы напишите API REST ендпоинт, необходимый для взаимодействия с бэкендом MongoDB. Вы также создадите компонент Home, который будет отображаться после успешного входа в систему.

Начинаем

Давайте начнем с клонирования исходного кода из первой части серии.

Перейдите в каталог проекта и установите необходимые зависимости.

После установки зависимостей перезапустите сервер.

Откройте http://localhost:4200 в своем браузере, и вы должны получить запущенное приложение.

Создание API REST для входа в систему

Внутри папки проекта AngularBlogApp-Home создайте другую папку с именем server. Наш API REST мы напишем на Node.js.

Перейдите в папку server и выполните инициализацию проекта.

Введите необходимые данные, и вы должны инициализировать проект.

Вы будете использовать фреймворк Express для создания сервера. Установите Express, используя следующую команду:

После установки Express создайте файл под названием app.js. Это будет корневой файл для вашего сервера Node.js.

Вот как выглядит файл app.js:

Как видно из приведенного выше кода, вы импортировали express в app.js. С помощью express вы создали приложение app.

Используя app, вы открыли ендпоинт /api/user/login, который отобразит сообщение. Запустите сервер Node.js, используя следующую команду:

Откройте http://localhost:3000/api/user/login в своем браузере, и вы должны увидеть это сообщение.

Вы будете отправлять запрос POST из сервиса Angular на сервер с параметрами username и password. Поэтому вам нужно проанализировать параметры запроса.

Установите body-parser, который middleware для разбора тела Node.js для анализа параметров запроса.

После его установки импортируйте его в app.js.

Добавьте следующий код в файл app.js.

Вышеупомянутые два параметра body-parser возвращают middleware, которое анализирует только json и urlencoded тела и просматривает только запросы, в которых заголовок Content-Type соответствует опции type.

Вы будете использовать Mongoose для взаимодействия с MongoDB из Node.js. Поэтому установите Mongoose с помощью Node Package Manager (npm).

Как только у вас будет установлен mongoose, импортируйте его в app.js.

Определите URL-адрес базы данных MongoDB в app.js.

Теперь будет использовать Mongoose для подключения к базе данных MongoDB. Вот как это выглядит:

Если соединение установлено, выводится сообщение с username и password.

Вот как выглядит файл app.js:

Перезапустите сервер node, используя следующую команду:

Чтобы подключиться к серверу node из приложения Angular, вам нужно установить прокси. Создайте файл с именем proxy.json внутри папки client/src. Вот как это выглядит:

Измените файл client.json клиента, чтобы запустить приложение, используя прокси файл.

Сохраните изменения и запустите клиентский сервер.

Откройте http://localhost:4200 в своем браузере и введите имя пользователя и пароль. Нажмите кнопку входа и вы должны увидеть эти параметры на консоли node.

Валидация логина пользователя

Чтобы взаимодействовать с MongoDB с использованием Mongoose, вам нужно определить схему и создать модель. Внутри папки server создайте папку с именем model.

Создайте файл user.js внутри папки model. Добавьте следующий код в файл user.js:

Как видно из приведенного выше кода, вы импортировали mongoose в user.js. Вы создали userSchema, используя mongoose schema, и создали модель User, используя модель mongoose.

Импортируйте файл user.js в файле app.js.

Прежде чем запрашивать коллекцию user, вам необходимо создать ее. Перейдите в оболочку MongoDB, набрав mongo. Создайте коллекцию user, используя следующую команду:

Вставьте запись, с которой вы будете работать.

Теперь, когда mongoose подключается к MongoDB, вы найдете запись из базы данных с использованием предоставленных username и password. Вот как выглядит API:

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

Сохраните указанные выше изменения и попробуйте запустить клиент и сервер. Введите имя пользователя как roy и пароль как 123, и вы сможете просмотреть результат в консоли браузера.

Перенаправление на компонент Home

После успешной проверки пользователя вам необходимо перенаправить пользователя на компонент Home. Итак, давайте начнем с создания компонента Home.

Создайте папку Home в папке src/app. Создайте файл home.component.html и добавьте следующий HTML-код:

Создайте файл с именем home.component.css и добавьте следующий стиль CSS:

Создайте файл компонента home.component.ts и добавьте следующий код:

Как видно из приведенного выше кода, вы только что создали HomeComponent с помощью декоратора @Component и указали selector, templateUrl и styleUrls.

Добавьте HomeComponent в NgModules в app.module.ts.

Импортируйте HomeComponent в app.routing.ts и определите маршрут для home.

В методе validateLogin в файле login.component.ts при успешной проверке перенаправьте пользователя на HomeComponent. Для перенаправления вам сперва необходимо импортировать Router.

Если ответ от вызова API будет успешным, вы перейдете к HomeComponent с помощью Angular Router.

Вот так выглядит файл login.component.ts:

Сохраните указанные выше изменения и перезапустите сервер. Войдите в приложение, используя существующее имя пользователя и пароль, и вы будете перенаправлены на HomeComponent.

Angular Blog App Home Component

Подведем итоги

В этом уроке вы видели, как написать REST API ендпоинт для входа пользователя в систему. Вы научились использовать Mongoose для взаимодействия с MongoDB из Node. После успешной валидации вы видели, как использовать Angular Router для перехода к HomeComponent.

Как прошел этот урок? Сообщите нам свои мысли и предложения в комментариях ниже.

Исходный код этого учебника доступен на GitHub.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.