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

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

От автора: этот пост является частью серии статей «Создание приложения для блоггинга с использованием Angular и MongoDB». В первой части серии вы узнали, как начать работу по созданию веб-приложения на Angular. А также, как настроить приложение и создать компонент Login. В этой части мы поговорим о создании главной страницы приложения для ведения блога. Напишем API REST, необходимый для взаимодействия с back-end MongoDB, а также создадим компонент Home, который будет отображаться после успешного входа в систему.

Приступим к работе

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

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

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

До 10 проектов в портфолио для старта карьеры
Подходит для новичков без опыта в программировании
Практика на вебинарах с разработчиками из крупных компаний

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

Откройте в браузере //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, используя следующую команду:

Перейдите в браузере по адресу //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 соответствует типу. Мы будете использовать Mongoose для взаимодействия с MongoDB из Node.js. Поэтому установите Mongoose с помощью Node Package Manager (npm).

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

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

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

Если соединение установлено, сообщение регистрируется вместе с именем пользователя и паролем. Вот как выглядит файл app.js:

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

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

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

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

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

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

Чтобы взаимодействовать с MongoDB с использованием Mongoose, вам нужно определить схему и создать модель. В папке server создайте папку с именем model. В этой папке создайте файл user.js. Добавьте в него следующий код:

Как видно из приведенного выше кода, мы импортировали mongoose в user.js. Мы создали userSchema, используя схему mongoose, и модель User — используя модель mongoose. Импортируйте файл user.js в файле app.js.

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

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

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

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

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

После успешной проверки пользователя вам необходимо перенаправить пользователя к компоненту Home. Итак, давайте начнем с создания компонента Home. Создайте в папке src/app папку Home. Создайте в ней файл home.component.html и добавьте в него следующий HTML-код:

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

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

Мы только что создали HomeComponent с помощью декоратора @Component и указали селекторы, templateUrl и styleUrls. Добавьте HomeComponent к NgModules в app.module.ts.

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

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

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

Вот как будет выглядеть файл login.component.ts:

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

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

Заключение

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

Автор: Roy Agasthyan

Источник: //code.tutsplus.com/

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

До 10 проектов в портфолио для старта карьеры
Подходит для новичков без опыта в программировании
Практика на вебинарах с разработчиками из крупных компаний

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: