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

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

От автора: этот пост является частью серии статей «Создание приложения для блоггинга с использованием Angular и MongoDB». Angular — это универсальный фреймворк для создания мобильных и веб-приложений с использованием одного и того же многократно используемого кода. Используя Angular, вы можете разделить все приложение для блогов на компоненты многократного использования, что упрощает обслуживание и повторное использование кода.

В этой серии статей вы узнаете, как приступить к созданию веб-приложения с использованием Angular с MongoDB в качестве back-end. Для запуска сервера мы будем использовать Node.js.

Вся эта серия будет посвящена созданию приложения для блоггинга с использованием Angular, Node.js и MongoDB. В этой статье вы узнаете, как начать работу по настройке приложения и созданию компонента Login.

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

Давайте начнем с установки Angular CLI.

npm install -g @angular/cli

После установки Angular CLI создайте папку проекта AngularBlogApp.

mkdir AngularBlogApp
cd AngularBlogApp

В папке проекта, используя следующую команду, создайте новое приложение Angular:

ng new client

После создания клиентского приложения перейдите в папку проекта и установите необходимые зависимости с помощью Node Package Manager (npm).

cd client
npm install

Запустите клиентский сервер, используя npm.

npm start

У вас должно запуститься приложение по адресу http://localhost:4200/.

Настройка приложения

Ваше веб-приложение будет содержать корневой компонент. Создайте папку с именем root внутри папки src/app. Создайте в ней файл с именем root.component.html и добавьте в него следующий HTML-код:

<h3> Root Component
</h3>

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

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './root.component.html'
})
export class RootComponent { }

Удалите файлы app.component.html, app.component.ts, app.component.scss и app.component.spec.ts. У вас будет только один файл с именем app.module.ts внутри папки src/app. Импортируйте RootComponent в файле app.module.ts.

import { RootComponent } from './root/root.component';

Включите RootComponent в ngModules и загрузите его.

@NgModule({ declarations: [ RootComponent ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [RootComponent]
})

Сохраните изменения и перезапустите сервер. При загрузке приложения будет отображаться RootComponent. В нашем приложении для маршрутизации мы будем использовать Angular Router. Поэтому импортируйте связанные с маршрутизацией зависимости в новом файле с именем app.routing.ts внутри папки src / app.

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module'; Определите путь маршрута и компонентов следующим образом:
export const AppRoutes: Routes = [ { path: '', component: LoginComponent }
];

Экспортируйте маршруты для создания модуля со всеми провайдерами маршрутов.

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes); 

Вот как должен выглядеть файл app.routing.ts:

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module'; import { LoginComponent } from './login/login.component'; export const AppRoutes: Routes = [ { path: '', component: LoginComponent }
]; export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);

Как видно из приведенного выше кода, мы еще не создали LoginComponent. Импортируйте класс ROUTING в файле app.module.ts.

import { ROUTING } from './app.routing';

Включите его в импорт NgModule.

imports: [ BrowserModule, ROUTING, FormsModule
]

Поместите RouterOutlet на странице root.component.html. Здесь отображается компонент маршрута.

<router-outlet></router-outlet> 

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

import { Component } from '@angular/core'; @Component({ selector: 'app-login', templateUrl: './login.component.html'
})
export class LoginComponent { constructor() { } }

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

<h3> Login Component
</h3>

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

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

Создание компонента авторизации

При настройке приложения мы уже задали основу для LoginComponent. Давайте создадим представление для LoginComponent с помощью Bootstrap. Загрузите и включите стили CSS Bootstrap в папке assets и включите соответствующую ссылку на странице src/index.html.

<link rel="stylesheet" type="text/css" href="./assets/bootstrap.min.css">

Оберните app-root на странице index.html следующим образом.

<div class="container"> <app-root></app-root>
</div>

Добавьте следующий HTML-код на страницу login.component.html.

<form class="form-signin"> <h2 class="form-signin-heading">Please sign in</h2> <label for="inputEmail" class="sr-only">Email address</label> <input name="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <label for="inputPassword" class="sr-only">Password</label> <input name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" type="button">Sign in</button>
</form>

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

.form-signin { max-width: 330px; padding: 15px; margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox { margin-bottom: 10px;
}
.form-signin .checkbox { font-weight: 400;
}
.form-signin .form-control { position: relative; box-sizing: border-box; height: auto; padding: 10px; font-size: 16px;
}
.form-signin .form-control:focus { z-index: 2;
}
.form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0;
}
.form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0;
}

Измените декоратор @Component, чтобы включить стили CSS.

@Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css']
})

Сохраните приведенные выше изменения и попробуйте загрузить приложение. У вас будет отображаться элемент LoginComponent с представлением входа в систему.

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

Создание службы авторизации

LoginComponent необходимо взаимодействовать с базой данных, чтобы проверить, существует ли пользователь, пытающийся войти в систему. Таким образом, он должен будет выполнять вызовы API. Часть, относящуюся к взаимодействию с базой данных, мы сохраняем в отдельном файле login.service.ts.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; @Injectable()
export class LoginService { constructor(private http: HttpClient){ } validateLogin(){ } }

Импортируйте LoginService в LoginComponent и добавьте его в качестве провайдера в декораторе компонентов.

import { LoginService } from './login.service';
@Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], providers: [ LoginService ]
})

Добавьте метод с именем validateLogin в файл login.service.ts, который осуществляет вызов API. Вот как это выглядит:

validateLogin(user: User){ return this.http.post('/api/user/login',{ username : user.username, password : user.password })
}

Как видно из приведенного выше кода, он возвращает наблюдаемый объект, который будет подписан в файле login.component.ts. Вот как должен выглядеть файл login.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../models/user.model'; @Injectable()
export class LoginService { constructor(private http: HttpClient){ } validateLogin(user: User){ return this.http.post('/api/user/login',{ username : user.username, password : user.password }) } }

Реализация валидации авторизации в системе

Добавьте директиву ngModel к элементам ввода данных в login.component.html.

<input name="email" [(ngModel)] = "user.username" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<input name="password" [(ngModel)] = "user.password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>

Добавьте событие click для кнопки входа.

<button class="btn btn-lg btn-primary btn-block" (click)="validateLogin();" type="button">Sign in</button>

Вот как должен выглядеть измененный файл login.component.html:

<form class="form-signin"> <h2 class="form-signin-heading">Please sign in</h2> <label for="inputEmail" class="sr-only">Email address</label> <input name="email" [(ngModel)] = "user.username" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <label for="inputPassword" class="sr-only">Password</label> <input name="password" [(ngModel)] = "user.password" type="password" id="inputPassword" class="form-control" placeholder="Password" required> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" (click)="validateLogin();" type="button">Sign in</button>
</form>

Определите и инициализируйте пользовательскую переменную в файле login.component.ts.

public user : User; constructor(private loginService: LoginService) { this.user = new User();
}

Модель User определяется в папке src/app/models. Вот как она выглядит:

export class User { constructor(){ this.username = ''; this.password = ''; } public username; public password;
}

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

validateLogin() { if(this.user.username && this.user.password) { this.loginService.validateLogin(this.user).subscribe(result => { console.log('result is ', result); }, error => { console.log('error is ', error); }); } else { alert('enter user name and password'); }
}

После ввода имени пользователя и пароля метод validateLogin подписывается на метод LoginService для выполнения валидации.
Вот как выглядит файл login.component.ts:

import { Component } from '@angular/core';
import { LoginService } from './login.service';
import { User } from '../models/user.model'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], providers: [ LoginService ]
})
export class LoginComponent { public user : User; constructor(private loginService: LoginService) { this.user = new User(); } validateLogin() { if(this.user.username && this.user.password) { this.loginService.validateLogin(this.user).subscribe(result => { console.log('result is ', result); }, error => { console.log('error is ', error); }); } else { alert('enter user name and password'); } } }

Заключение

В этой части серии статей о блогинговом приложении на Angular вы узнали, как начать работу по созданию веб-приложения с помощью Angular. Мы создали базовую структуру приложения Angular и LoginComponent, который позволит пользователю вводить имя пользователя и пароль. В следующей части серии мы напишем API REST для валидации входа в систему и создадим компонент главной страницы. Исходный код этого руководства доступен на GitHub.

Автор: Roy Agasthyan

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

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