使用Angular和MongoDB创建博客应用程序：登录

最新推荐文章于 2022-07-25 15:31:43 发布

cunjie3951

最新推荐文章于 2022-07-25 15:31:43 发布

阅读量285

点赞数

文章标签：数据库 java python vue web ViewUI

Angular是使用相同的可重用代码创建移动和Web应用程序的一站式框架。使用Angular，您可以将整个应用程序划分为可重用的组件，这使得维护和重用代码更加容易。

在本教程系列中，您将学习如何使用以MongoDB为后端的Angular创建Web应用程序。您将使用Node.js运行服务器。

在本教程的整个过程中，您将使用Angular，Node.js和MongoDB构建博客应用程序。

在本教程中，您将看到如何开始设置应用程序和创建Login组件。

入门

让我们从安装Angular CLI 。

npm install -g @angular/cli

安装Angular CLI后，创建一个名为AngularBlogApp的项目文件夹。

mkdir AngularBlogApp
cd AngularBlogApp

在项目文件夹中，使用以下命令创建一个新的Angular应用程序：

ng new client

创建client应用程序后，导航至项目文件夹并使用节点包管理器（npm）安装所需的依赖项。

cd client
npm install

使用npm启动客户端服务器。

npm start

您应该在http：// localhost：4200 /上运行该应用程序。

设置应用

您的Angular Web应用程序将具有一个根组件。在src/app文件夹内创建一个名为root的文件夹。创建一个名为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 。 src/app文件夹中只有一个名为app.module.ts的文件。

将RootComponent导入app.module.ts文件中。

import { RootComponent } from './root/root.component';

在RootComponent中包含ngModules并引导它。

@NgModule({
  declarations: [
    RootComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [RootComponent]
})

保存更改并重新启动服务器。加载应用程序时，将显示RootComponent 。

您将在我们的博客应用程序中使用Angular Router进行路由。因此，将与路由相关的依赖项导入到src/app文件夹中名为app.routing.ts的新文件中。

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>

在src/app文件夹中创建一个名为login的文件夹。在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 。

创建登录组件

在设置应用程序时，您已经为LoginComponent奠定了基础。让我们使用Bootstrap为LoginComponent创建视图。

下载bootstrap CSS样式并将其包括在assets文件夹中，并将引用包括在src/index.html页面中。

<link rel="stylesheet" type="text/css" href="./assets/bootstrap.min.css">

在index.html页面的app-root周围放置一个包装器。

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

保存以上更改，然后尝试加载应用程序。您将在Login视图中显示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(){
		
	}

}

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

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

如上面的代码所示，它返回一个observable，它将在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外观：

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

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

该教程的源代码可在GitHub上获得。

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

翻译自: https://code.tutsplus.com/tutorials/creating-a-blogging-app-using-angular-mongodb-login--cms-30125

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Angular和MongoDB创建博客应用程序：登录

Angular是使用相同的可重用代码创建移动和Web应用程序的一站式框架。使用Angular，您可以将整个应用程序划分为可重用的组件，这使得维护和重用代码更加容易。在本教程系列中，您将学习如何使用以MongoDB为后端的Angular创建Web应用程序。您将使用Node.js运行服务器。在本教程的整个过程中，您将使用Angular，Node.js和MongoDB构建博客应用程序...
复制链接

扫一扫