Создание приложения для блогов с использованием 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.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
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.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Создание приложения для блогов с использованием 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.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree