Angular 및 MongoDB: 로그인 기능을 갖춘 블로그 애플리케이션 구축
- 王林원래의
- 2023-08-28 09:41:09700검색
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가 표시됩니다.
로그인 구성 요소 만들기
앱을 설정할 때 기초를 다졌습니다 LoginComponent 奠定了基础。让我们使用 Bootstrap 创建 LoginComponent. Bootstrap을 사용하여
assets 文件夹中，并将引用包含在 src/index.htmlBootstrap CSS 스타일을 다운로드하여
으아아아
index.html 页面中的 app-root포장지를
으아아아
login.component.html다음 HTML을
으아아아
login 文件夹中创建一个名为 login.component.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 的外观：
在 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!