使用Angular和MongoDB创建博客应用程序：主页

在本系列教程的第一部分中，您了解了如何开始创建Angular Web应用程序。 您学习了如何设置应用程序并创建了Login组件。

在本系列的这一部分中，您将进一步进行操作，并写下与MongoDB银行端进行交互所需的REST API。 您还将创建Home组件，该组件将在用户成功登录后显示。

入门

让我们从克隆本系列第一部分的源代码开始。

git clone https://github.com/royagasthyan/AngularBlogApp-Login AngularBlogApp-Home

导航到项目目录并安装所需的依赖项。

cd AngularBlogApp-Home/client
npm install

安装依赖项后，请重新启动应用程序服务器。

npm start

将您的浏览器指向http：// localhost：4200 ，您应该正在运行该应用程序。

创建登录REST API

在项目文件夹AngularBlogApp-Home ，创建另一个名为server文件夹。 您将使用Node.js编写REST API。

导航到server文件夹并初始化项目。

cd server
npm init

输入所需的详细信息，您应该已初始化项目。

您将使用Express框架创建服务器。 使用以下命令安装Express ：

npm install express --save

安装Express ，创建一个名为app.js的文件。 这将是您的Node.js服务器的根文件。

这是app.js文件的外观：

const express = require('express')
const app = express()

app.get('/api/user/login', (req, res) => {
    res.send('Hello World!')
})

app.listen(3000, () => console.log('blog server running on port 3000!'))

如以上代码所示，您将express导入了app.js 使用express ，您创建了一个应用程序app 。

使用app ，您公开了一个端点/api/user/login ，它将显示一条消息。 使用以下命令启动Node.js服务器：

node app.js

将浏览器指向http：// localhost：3000 / api / user / login ，您应该显示该消息。

您将使用username和password参数从Angular服务向服务器发出POST请求。 因此，您需要解析请求参数。

安装body-parser ，它是Node.js主体解析中间件，用于解析请求参数。

npm install body-parser --save

安装后，将其导入app.js

const bodyParser = require('body-parser')

将以下代码添加到app.js文件。

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended : false}))

上面的两个body-parser选项返回的中间件仅解析json和urlencoded主体，并且仅查看Content-Type标头与type选项匹配的请求。

您将使用Mongoose与Node.js中的MongoDB进行交互。 因此，请使用Node Package Manager（npm）安装Mongoose 。

npm install mongoose --save

安装猫鼬后，将其导入app.js

const mongoose = require('mongoose');

在app.js定义MongoDB数据库URL。

const url = 'mongodb://localhost/blogDb';

让我们使用Mongoose连接到MongoDB数据库。 外观如下：

app.post('/api/user/login', (req, res) => {
    mongoose.connect(url, function(err){
		if(err) throw err;
		console.log('connected successfully, username is ',req.body.username,' password is ',req.body.password);
	});
})

如果建立了连接，则消息将与username和password一起记录。

这是app.js文件的外观：

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const mongoose = require('mongoose');
const url = 'mongodb://localhost/blogDb';

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended : false}))

app.post('/api/user/login', (req, res) => {
    mongoose.connect(url, function(err){
    	if(err) throw err;
		console.log('connected successfully, username is ',req.body.username,' password is ',req.body.password);
	});
})

app.listen(3000, () => console.log('blog server running on port 3000!'))

使用以下命令重新启动节点服务器：

node app.js

要从Angular应用程序连接到Node服务器，您需要设置代理。 在client/src文件夹中创建一个名为proxy.json的文件。 外观如下：

{
    "/api/*": {
		"target": "http://localhost:3000",
		"secure": "false"
	}
}

修改客户端package.json文件以使用代理文件启动应用程序。

"start": "ng serve --proxy-config proxy.json"

保存更改并启动客户端服务器。

npm start

将浏览器指向http：// localhost：4200，然后输入用户名和密码。 单击登录按钮，您应该在Node控制台中记录参数。

验证用户登录

要使用Mongoose与MongoDB进行交互，您需要定义一个架构并创建一个模型。 在server文件夹内，创建一个名为model的文件夹。

在model文件夹中创建一个名为user.js的文件。 将以下代码添加到user.js文件：

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// create a schema
const userSchema = new Schema({
  username: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  name: { type: String }
}, { collection : 'user' });

const User = mongoose.model('User', userSchema);

module.exports = User;

如以上代码所示，您将user.js导入到user.js 。 您使用猫鼬schema创建了一个userSchema ，并使用mongoose模型创建了一个User模型。

将user.js文件导入app.js文件中。

const User = require('./model/user');

在查询MongoDB user集合之前，需要创建集合。 通过输入mongo进入MongoDB shell。 使用以下命令创建收集user ：

db.createCollection('user')

插入要查询的记录。

db.user.insert({
     name: 'roy agasthyan',
     username: 'roy',
     password: '123'
 })

现在，一旦mongoose连接到MongoDB，您就可以使用传入的username和password从数据库中找到记录。这是API的外观：

app.post('/api/user/login', (req, res) => {
    mongoose.connect(url,{ useMongoClient: true }, function(err){
		if(err) throw err;
		User.find({
			username : req.body.username, password : req.body.password
		}, function(err, user){
			if(err) throw err;
			if(user.length === 1){	
				return res.status(200).json({
					status: 'success',
					data: user
				})
			} else {
				return res.status(200).json({
					status: 'fail',
					message: 'Login Failed'
				})
			}
			
		})
	});
})

如上面的代码所示，一旦您从数据库收到响应，就将其返回给客户端。

保存以上更改，然后尝试运行客户端和服务器。 输入用户名roy和密码123 ，您应该能够在浏览器控制台中查看结果。

重定向到Home组件

成功验证用户后，您需要将用户重定向到Home组件。 因此，让我们从创建Home组件开始。

在src/app文件夹中创建一个名为Home的文件夹。 创建一个名为home.component.html的文件，并添加以下HTML代码：

<header class="header clearfix">
    <nav>
        <ul class="nav nav-pills float-right">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Add</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Logout</a>
            </li>
        </ul>
    </nav>
    <h3 class="text-muted">Angular Blog App</h3>
</header>

<main role="main">

    <div class="jumbotron">
        <h1 class="display-3">Lorem ipsum</h1>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p><a class="btn btn-lg btn-success" href="#" role="button">Read More ...</a></p>
    </div>

    <div class="row marketing">
        <div class="col-lg-6">
            <h4>Subheading</h4>
            <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

            <h4>Subheading</h4>
            <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

            <h4>Subheading</h4>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>

        <div class="col-lg-6">
            <h4>Subheading</h4>
            <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

            <h4>Subheading</h4>
            <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

            <h4>Subheading</h4>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>
    </div>

</main>

<footer class="footer">
    <p>&copy; Company 2017</p>
</footer>

创建一个名为home.component.css的文件，并添加以下CSS样式：

.header,
.marketing,
.footer {
  padding-right: 1rem;
  padding-left: 1rem;
}

/* Custom page header */
.header {
  padding-bottom: 1rem;
  border-bottom: .05rem solid #e5e5e5;
}

.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 3rem;
}

/* Custom page footer */
.footer {
  padding-top: 1.5rem;
  color: #777;
  border-top: .05rem solid #e5e5e5;
}

/* Customize container */
@media (min-width: 48em) {
  .container {
    max-width: 46rem;
  }
}
.container-narrow > hr {
  margin: 2rem 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: .05rem solid #e5e5e5;
}
.jumbotron .btn {
  padding: .75rem 1.5rem;
  font-size: 1.5rem;
}

/* Supporting marketing content */
.marketing {
  margin: 3rem 0;
}
.marketing p + h4 {
  margin-top: 1.5rem;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 48em) {
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }

  /* Space out the masthead */
  .header {
    margin-bottom: 2rem;
  }

  .jumbotron {
    border-bottom: 0;
  }
}

创建名为home.component.ts的组件文件，并添加以下代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  
}

正如上面的代码中看到，您刚刚创建的HomeComponent使用@Component装饰，并指定selector ， templateUrl和styleUrls 。

添加HomeComponent到NgModules在app.module.ts 。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ROUTING } from './app.routing';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { RootComponent } from './root/root.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';


@NgModule({
  declarations: [
      RootComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    ROUTING,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [RootComponent]
})
export class AppModule { }

导入HomeComponent在app.routing.ts并定义路线home 。

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module';

import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';

export const AppRoutes: Routes = [
    { path: '', component: LoginComponent },
	{ path: 'home', component: HomeComponent }
];

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);

在login.component.ts文件中的validateLogin方法中，验证成功后，将用户重定向到HomeComponent 。 要重定向，您需要导入Angular Router 。

import { Router } from '@angular/router';

如果API调用的响应成功，您将使用Angular Router导航到HomeComponent 。

if(result['status'] === 'success') {
  this.router.navigate(['/home']);
} else {
  alert('Wrong username password');
}

这是login.component.ts文件的外观：

import { Component } from '@angular/core';
import { LoginService } from './login.service';
import { User } from '../models/user.model';
import { Router } from '@angular/router';

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

  public user : User;

  constructor(private loginService: LoginService, private router: Router) {
      this.user = new User();
  }

  validateLogin() {
  	if(this.user.username && this.user.password) {
  		this.loginService.validateLogin(this.user).subscribe(result => {
        console.log('result is ', result);
        if(result['status'] === 'success') {
          this.router.navigate(['/home']);
        } else {
          alert('Wrong username password');
        }
        
      }, error => {
        console.log('error is ', error);
      });
  	} else {
  		alert('enter user name and password');
  	}
  }

}

保存以上更改，然后重新启动服务器。 使用现有的用户名和密码登录到应用程序，您将被重定向到HomeComponent 。

包起来

在本教程中，您了解了如何编写用于用户登录的REST API端点。 您从Node学习了如何使用Mongoose与MongoDB进行交互。 成功验证之后，您将看到如何使用Angular Router导航到HomeComponent 。

您如何学习编写Angular应用程序及其后端的经验？ 请在下面的评论中告诉我们您的想法和建议。

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

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