Angular と MongoDB: ログイン機能を備えたブログアプリケーションの構築-jsチュートリアル-php.cn

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 Angular 和 MongoDB：构建具有登录功能的博客应用程序の基礎がすでに築かれています。

Bootstrap

を使用して

LoginComponent

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

リーリー

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

リーリー

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

フォルダーに 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 的单独文件中。

创建一个名为 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');
  	}
  }

}

ログイン後にコピー