От автора: этот пост является частью серии статей «Создание приложения для блоггинга с использованием Angular и MongoDB». В первой части серии вы узнали, как начать работу по созданию веб-приложения на Angular. А также, как настроить приложение и создать компонент Login. В этой части мы поговорим о создании главной страницы приложения для ведения блога. Напишем API REST, необходимый для взаимодействия с back-end MongoDB, а также создадим компонент Home, который будет отображаться после успешного входа в систему.
Приступим к работе
Давайте начнем с клонирования исходного кода из первой части серии.
|
1 |
git clone //github.com/royagasthyan/AngularBlogApp-Login AngularBlogApp-Home |
Перейдите в каталог проекта и установите необходимые зависимости.
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
|
1 2 |
cd AngularBlogApp-Home/client npm install |
После установки зависимостей перезапустите сервер приложения.
|
1 |
npm start |
Откройте в браузере //localhost:4200, и у вас должно запуститься приложение.
Создание API REST авторизации в системе
В папке проекта AngularBlogApp-Home создайте папку с именем server. Мы напишем API REST с помощью Node.js. Перейдите в папку server и выполните инициализацию проекта.
|
1 2 |
cd server npm init |
Введите необходимые данные, и у вас должен инициализироваться проект. Для создания сервера мы будем использовать фреймворк Express. Установите Express, используя следующую команду:
|
1 |
npm install express --save |
После установки Express создайте файл с именем app.js. Это будет корневой файл для сервера Node.js. Вот как должен выглядеть файл app.js:
|
1 2 3 4 5 6 7 8 |
const express = require('express') const app = express() app.get('/api/user/login', (req, res) => { res.send('Hello World!') }) app.listen(3000, () => console.log('blog server running on port 3000!')) |
Как видно из приведенного выше кода, мы импортировали express в app.js. С помощью express мы создали приложение app. Используя app, мы задали конечную точку /api/user/login, которая отображает сообщение. Запустите сервер Node.js, используя следующую команду:
|
1 |
node app.js |
Перейдите в браузере по адресу //localhost:3000/api/user/login, и вы должны увидеть это сообщение. Мы будем отправлять запрос POST из службы Angular к серверу с параметрами username и password. Поэтому нам нужно парсировать параметры запроса. Установите body-parser, который является middleware Node.js для парсинга параметров запроса.
|
1 |
npm install body-parser --save |
После его установки импортируйте его в app.js.
|
1 |
const bodyParser = require('body-parser') |
Добавьте в файл app.js следующий код.
|
1 2 |
app.use(bodyParser.json()) app.use(bodyParser.urlencoded({ extended : false})) |
Приведенные выше параметры body-parser возвращают middleware, которое анализирует только тела json и urlencoded и ищет только запросы, в которых заголовок Content-Type соответствует типу. Мы будете использовать Mongoose для взаимодействия с MongoDB из Node.js. Поэтому установите Mongoose с помощью Node Package Manager (npm).
|
1 |
npm install mongoose --save |
После установки Mongoose, импортируйте его в app.js.
|
1 |
const mongoose = require ('mongoose'); |
Определите URL-адрес базы данных MongoDB в app.js.
|
1 |
const url = 'mongodb://localhost/blogDb'; |
Давайте используем Mongoose для подключения к базе данных MongoDB. Вот как это выглядит:
|
1 2 3 4 5 6 |
app.post('/api/user/login', (req, res) => { mongoose.connect(url, function(err){ if(err) throw err; console.log('connected successfully, username is ',req.body.username,' password is ',req.body.password); }); }) |
Если соединение установлено, сообщение регистрируется вместе с именем пользователя и паролем. Вот как выглядит файл app.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const express = require('express') const bodyParser = require('body-parser') const app = express() const mongoose = require('mongoose'); const url = 'mongodb://localhost/blogDb'; app.use(bodyParser.json()) app.use(bodyParser.urlencoded({ extended : false})) app.post('/api/user/login', (req, res) => { mongoose.connect(url, function(err){ if(err) throw err; console.log('connected successfully, username is ',req.body.username,' password is ',req.body.password); }); }) app.listen(3000, () => console.log('blog server running on port 3000!')) |
Перезапустите сервер Node, используя следующую команду:
|
1 |
node app.js |
Чтобы подключиться к серверу Node из приложения Angular, нам нужно установить прокси-сервер. Создайте файл с именем proxy.json в папке client/src. Вот как это выглядит:
|
1 2 3 4 5 6 |
{ "/api/*": { "target": "//localhost:3000", "secure": "false" } } |
Измените файл клиента client.json, чтобы запустить приложение, используя прокси-файл.
|
1 |
"start": "ng serve --proxy-config proxy.json" |
Сохраните изменения и запустите сервер клиента.
|
1 |
npm start |
Откройте в браузере адрес //localhost:4200 и введите имя пользователя и пароль. Нажмите кнопку входа и вы должны получить в консоли Node параметры входа.
Валидация авторизации пользователя
Чтобы взаимодействовать с MongoDB с использованием Mongoose, вам нужно определить схему и создать модель. В папке server создайте папку с именем model. В этой папке создайте файл user.js. Добавьте в него следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const mongoose = require('mongoose'); const Schema = mongoose.Schema; // создание схемы const userSchema = new Schema({ username: { type: String, required: true, unique: true }, password: { type: String, required: true }, name: { type: String } }, { collection : 'user' }); const User = mongoose.model('User', userSchema); module.exports = User; |
Как видно из приведенного выше кода, мы импортировали mongoose в user.js. Мы создали userSchema, используя схему mongoose, и модель User — используя модель mongoose. Импортируйте файл user.js в файле app.js.
|
1 |
const User = require('./model/user'); |
Прежде чем запрашивать коллекцию MongoDB user, нам необходимо создать коллекцию. Перейдите в оболочку MongoDB, введя mongo. Создайте коллекцию user, используя следующую команду:
|
1 |
db.createCollection('user') |
Вставьте запись, на которую вы будете отвечать.
|
1 2 3 4 5 |
db.user.insert({ name: 'roy agasthyan', username: 'roy', password: '123' }) |
Теперь, когда mongoose подключится к MongoDB, вы найдете запись базы данных с использованием переданных username и password. Вот как будет выглядеть API:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
app.post('/api/user/login', (req, res) => { mongoose.connect(url,{ useMongoClient: true }, function(err){ if(err) throw err; User.find({ username : req.body.username, password : req.body.password }, function(err, user){ if(err) throw err; if(user.length === 1){ return res.status(200).json({ status: 'success', data: user }) } else { return res.status(200).json({ status: 'fail', message: 'Login Failed' }) } }) }); }) |
Как видно из приведенного выше кода, после получения ответа от базы данных мы возвращаете то же самое на сторону клиента. Сохраните указанные выше изменения и попробуйте запустить клиент и сервер. Введите имя пользователя roy и пароль 123, и вы сможете просмотреть результат в консоли браузера.
Перенаправление к компоненту Home
После успешной проверки пользователя вам необходимо перенаправить пользователя к компоненту Home. Итак, давайте начнем с создания компонента Home. Создайте в папке src/app папку Home. Создайте в ней файл home.component.html и добавьте в него следующий HTML-код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<header class="header clearfix"> <nav> <ul class="nav nav-pills float-right"> <li class="nav-item"> <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Add</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Logout</a> </li> </ul> </nav> <h3 class="text-muted">Angular Blog App</h3> </header> <main role="main"> <div class="jumbotron"> <h1 class="display-3">Lorem ipsum</h1> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p><a class="btn btn-lg btn-success" href="#" role="button">Read More ...</a></p> </div> <div class="row marketing"> <div class="col-lg-6"> <h4>Subheading</h4> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <h4>Subheading</h4> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> <h4>Subheading</h4> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </div> <div class="col-lg-6"> <h4>Subheading</h4> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <h4>Subheading</h4> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> <h4>Subheading</h4> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </div> </div> </main> <footer class="footer"> <p>© Company 2017</p> </footer> |
Создайте файл с именем home.component.css и добавьте в него следующие стили CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
.header, .marketing, .footer { padding-right: 1rem; padding-left: 1rem; } /* Пользовательский заголовок страницы */ .header { padding-bottom: 1rem; border-bottom: .05rem solid #e5e5e5; } .header h3 { margin-top: 0; margin-bottom: 0; line-height: 3rem; } /* Пользовательский подвал страницы */ .footer { padding-top: 1.5rem; color: #777; border-top: .05rem solid #e5e5e5; } /* Настройка контейнера */ @media (min-width: 48em) { .container { max-width: 46rem; } } .container-narrow > hr { margin: 2rem 0; } /* Основное маркетинговое сообщение и кнопка подписки */ .jumbotron { text-align: center; border-bottom: .05rem solid #e5e5e5; } .jumbotron .btn { padding: .75rem 1.5rem; font-size: 1.5rem; } /* Дополнительный маркетинговый контент */ .marketing { margin: 3rem 0; } .marketing p + h4 { margin-top: 1.5rem; } /* Адаптивные стили: Планшеты с портретной ориентацией и большие экраны */ @media screen and (min-width: 48em) { /* Удаляем поле, которое мы задали ранее */ .header, .marketing, .footer { padding-right: 0; padding-left: 0; } /* Общая информация */ .header { margin-bottom: 2rem; } .jumbotron { border-bottom: 0; } } |
Создайте файл компонента home.component.ts и добавьте в него следующий код:
|
1 2 3 4 5 6 7 8 9 10 |
import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent { } |
Мы только что создали HomeComponent с помощью декоратора @Component и указали селекторы, templateUrl и styleUrls. Добавьте HomeComponent к NgModules в app.module.ts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ROUTING } from './app.routing'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { RootComponent } from './root/root.component'; import { LoginComponent } from './login/login.component'; import { HomeComponent } from './home/home.component'; @NgModule({ declarations: [ RootComponent, LoginComponent, HomeComponent ], imports: [ BrowserModule, ROUTING, FormsModule, HttpClientModule ], providers: [], bootstrap: [RootComponent] }) export class AppModule { } |
Импортируйте HomeComponent в app.routing.ts и определите маршрут для Home.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { RouterModule, Routes } from '@angular/router'; import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module'; import { LoginComponent } from './login/login.component'; import { HomeComponent } from './home/home.component'; export const AppRoutes: Routes = [ { path: '', component: LoginComponent }, { path: 'home', component: HomeComponent } ]; export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes); |
В методе validateLogin в файле login.component.ts посое успешной проверки пользователь перенаправляется к HomeComponent. Для перенаправления вам необходимо импортировать Router Angular.
|
1 |
import { Router } from '@angular/router'; |
Если ответ от вызова API будет успешным, вы перейдете помощью Angular Router к HomeComponent.
|
1 2 3 4 5 |
if(result['status'] === 'success') { this.router.navigate(['/home']); } else { alert('Wrong username password'); } |
Вот как будет выглядеть файл login.component.ts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import { Component } from '@angular/core'; import { LoginService } from './login.service'; import { User } from '../models/user.model'; import { Router } from '@angular/router'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], providers: [ LoginService ] }) export class LoginComponent { public user : User; constructor(private loginService: LoginService, private router: Router) { this.user = new User(); } validateLogin() { if(this.user.username && this.user.password) { this.loginService.validateLogin(this.user).subscribe(result => { console.log('result is ', result); if(result['status'] === 'success') { this.router.navigate(['/home']); } else { alert('Wrong username password'); } }, error => { console.log('error is ', error); }); } else { alert('enter user name and password'); } } } |
Сохраните изменения и перезапустите сервер. Войдите в приложение, используя существующие имя пользователя и пароль, и вы будете перенаправлены к HomeComponent.
Заключение
В этой статье мы рассмотрели, как прописать конечную точку REST API для входа пользователя в систему. Вы научились использовать Mongoose для взаимодействия с MongoDB от Node. После успешной авторизации пользователь перенаправляется к HomeComponent. Исходный код этого руководства доступен на GitHub.
Автор: Roy Agasthyan
Источник: //code.tutsplus.com/
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Редакция: Команда webformyself.
