Angular 및 MongoDB: 로그인 기능을 갖춘 블로그 애플리케이션 구축-JS 튜토리얼-php.cn

Angular는 재사용 가능한 동일한 코드를 사용하여 모바일 및 웹 애플리케이션을 만들기 위한 원스톱 프레임워크입니다. Angular를 사용하면 전체 애플리케이션을 재사용 가능한 구성 요소로 나눌 수 있으므로 코드를 더 쉽게 유지 관리하고 재사용할 수 있습니다.

이 튜토리얼 시리즈에서는 Angular 및 MongoDB를 백엔드로 사용하여 웹 애플리케이션 생성을 시작하는 방법을 배웁니다. Node.js를 사용하여 서버를 실행합니다.

이 튜토리얼 전체에서 Angular, Node.js 및 MongoDB를 사용하여 블로그 애플리케이션을 구축하게 됩니다.

이 튜토리얼에서는 애플리케이션 설정을 시작하고 Login 구성 요소를 생성하는 방법을 배웁니다.

시작하기

설치를 시작하겠습니다 Angular CLI.

으아아아

Angular CLI를 설치한 후 AngularBlogApp라는 프로젝트 폴더를 생성합니다.

으아아아

프로젝트 폴더에서 다음 명령을 사용하여 새 Angular 앱을 만듭니다.

으아아아

애플리케이션을 생성한 후 client 프로젝트 폴더로 이동하고 노드 패키지 관리자(npm)를 사용하여 필요한 종속성을 설치합니다.

으아아아

npm를 사용하여 클라이언트 서버를 시작하세요.

으아아아

http://localhost:4200/에서 애플리케이션이 실행되고 있어야 합니다.

설정 앱

Angular 웹 애플리케이션에는 루트 구성 요소가 있습니다. 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파일.

에서 app.module.ts 文件中导入 RootComponent .

으아아아

중심RootComponent 包含在 ngModules으로 안내해 드립니다.

으아아아

변경 사항을 저장하고 서버를 다시 시작하세요. 앱이 로드되면 RootComponent가 표시됩니다.

AngularRouter 在我们的博客应用程序中进行路由。因此，在 src/app 文件夹内名为 app.routing.ts를 사용하여 라우팅 관련 종속성을 새 파일로 가져옵니다.

으아아아

다음과 같이 라우팅 경로와 구성 요소를 정의합니다.

으아아아

경로를 내보내 모든 경로 제공자를 포함하는 모듈을 만듭니다.

으아아아

다음은 app.routing.ts 파일의 모습입니다:

으아아아

위의 코드에서 볼 수 있듯이 아직 LoginComponent을 생성하지 않은 것입니다. 명확성을 위해 추가되었습니다.

app.module.ts 文件中导入 ROUTING수업 중.

으아아아

가져오기에 NgModule포함하세요.

으아아아

페이지에 RouterOutlet 放置在 root.component.html를 넣으세요. 여기가 경로 구성 요소가 렌더링되는 곳입니다.

으아아아

src/app 文件夹内创建一个名为 login 的文件夹。在 login 文件夹中，创建一个名为 login.component.ts 파일에 다음 코드를 추가하세요.

으아아아

login.component.html이라는 파일을 만들고 다음 코드를 추가하세요.

으아아아

위 변경 사항을 저장하고 서버를 다시 시작하세요. 애플리케이션이 로드될 때 정의된 경로에 따라 LoginComponent가 표시됩니다.

Angular 和 MongoDB：构建具有登录功能的博客应用程序

로그인 구성 요소 만들기

앱을 설정할 때 기초를 다졌습니다 LoginComponent 奠定了基础。让我们使用 Bootstrap 创建 LoginComponent. Bootstrap을 사용하여

뷰를 만들어 보겠습니다.

assets 文件夹中，并将引用包含在 src/index.htmlBootstrap CSS 스타일을 다운로드하여

페이지에 포함하세요.

으아아아 index.html 页面中的 app-root포장지를

놓습니다.

으아아아 login.component.html다음 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。

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');
  	}
  }

}

로그인 후 복사