Angular と MongoDB: ログイン機能を備えたブログ アプリケーションの構築

Angular は、同じ再利用可能なコードを使用してモバイル アプリケーションと Web アプリケーションを作成するためのワンストップ フレームワークです。 Angular を使用すると、アプリケーション全体を再利用可能なコンポーネントに分割できるため、コードの保守と再利用が容易になります。

このチュートリアル シリーズでは、バックエンドとして Angular と MongoDB を使用して Web アプリケーションの作成を開始する方法を学びます。 Node.js を使用してサーバーを実行します。

このチュートリアルでは、Angular、Node.js、MongoDB を使用してブログ アプリケーションを構築します。

このチュートリアルでは、アプリケーションのセットアップを開始し、Login コンポーネントを作成する方法を学びます。

使い始める

Angular CLI のインストールを開始しましょう。

リーリー

Angular CLI をインストールした後、AngularBlogApp という名前のプロジェクト フォルダーを作成します。

リーリー

プロジェクト フォルダーから、次のコマンドを使用して新しい Angular アプリを作成します:

リーリー

client アプリケーションを作成した後、プロジェクト フォルダーに移動し、ノード パッケージ マネージャー (npm) を使用して必要な依存関係をインストールします。 リーリー

npm を使用してクライアント サーバーを起動します。 リーリー

アプリケーションは http://localhost:4200/ で実行されている必要があります。

設定アプリケーション

Angular Web アプリケーションにはルート コンポーネントがあります。

src/app フォルダー内に root という名前のフォルダーを作成します。 root.component.html というファイルを作成し、次の HTML コードを追加します。 リーリー

root.component.ts

という名前のファイルを追加し、次のコードを追加します。 リーリー ファイル app.component.html

、

app.component.ts、app.component.scss、および app.component.spec を削除します。 ts。 src/app フォルダーには、app.module.ts という名前のファイルが 1 つだけあります。 app.module.ts ファイルに

RootComponent

をインポートします。 リーリー RootComponent を

ngModules

でラップし、ブートストラップします。 リーリー 変更を保存し、サーバーを再起動します。アプリケーションがロードされると、RootComponent が表示されます。

ブログ アプリケーションでのルーティングには Angular Router を使用します。したがって、ルーティング関連の依存関係を、

src/app

フォルダー内の app.routing.ts という名前の新しいファイルにインポートします。 リーリー 次のようにルーティング パスとコンポーネントを定義します: リーリー ルートをエクスポートして、すべてのルート プロバイダーを含むモジュールを作成します。

リーリー

app.routing.ts

ファイルは次のようになります:

リーリー

上記のコードに示されているように、LoginComponent は作成されていません。わかりやすくするために追加されています。

#ROUTING クラスを app.module.ts

ファイルにインポートします。

リーリー これを NgModule インポートに含めます。 リーリー

RouterOutlet を root.component.html

ページに配置します。ここでルート コンポーネントがレンダリングされます。

リーリー src/app フォルダー内に login

という名前のフォルダーを作成します。

login フォルダーに login.component.ts という名前のファイルを作成し、次のコードを追加します。 リーリー login.component.html という名前のファイルを作成し、次のコードを追加します: リーリー 上記の変更を保存し、サーバーを再起動します。アプリケーションのロード時に定義されたルートに応じて、

LoginComponent

が表示されます。

ログインコンポーネントの作成

アプリケーションを設定したときに、

LoginComponent の基礎がすでに築かれています。

Bootstrap

を使用して

LoginComponent

のビューを作成しましょう。 ブートストラップ CSS スタイルをダウンロードし、assets フォルダーに含め、src/index.html ページに参​​照を含めます。

リーリー

index.html ページの app-root の周囲にラッパーを配置します。

リーリー

次の HTML を login.component.html ページに追加します。 リーリー

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。

创建登录服务

LoginComponent 需要与数据库交互以查看登录用户是否有效。所以它需要进行 API 调用。您将数据库交互部分保存在名为 login.service.ts 的单独文件中。

创建一个名为 login.service.ts 的文件并添加以下代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class LoginService {

    constructor(private http: HttpClient){

	}
	
	validateLogin(){
		
	}

}

在 LoginComponent 中导入 LoginService 并将其添加为组件装饰器中的提供程序。

import { LoginService } from './login.service';

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

在 login.service.ts 文件中添加一个名为 validateLogin 的方法，该方法将进行 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>

向登录按钮添加点击事件。

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

以下是修改后的 login.component.html 的外观：

     
Please sign in
     Email address
        
        Password
        
        

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

在 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 创建 Web 应用。您创建了 Angular 应用程序的基本结构，并创建了 LoginComponent ，这将使用户能够验证用户名和密码。

在本教程系列的下一部分中，您将编写用于用户登录验证的 REST API 并创建主页组件。

本教程的源代码可在 GitHub 上获取。

请在下面的评论中告诉我们您的想法和建议。

以上がAngular と MongoDB: ログイン機能を備えたブログ アプリケーションの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。