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

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

1. 简介

本文将介绍如何使用 Angular 和 MongoDB 构建具有登录功能的博客应用程序，您可以使用该应用程序在互联网上创建个人博客。在这个教程中，我们将使用 Angular 作为前端框架、MongoDB 作为后端数据库，同时使用 Express.js 作为应用程序服务器.

2. 前置条件

2.1 安装 Angular CLI

打开命令行运行下面的命令来安装 Angular CLI：

npm install -g @angular/cli

安装完成之后，您可以使用下面的命令来检查安装是否成功：

ng version

2.2 安装 Node.js 和 MongoDB

要使用我们的应用程序，您需要安装 Node.js 和 MongoDB。下载并安装 Node.js 和 MongoDB，然后按照官方文档进行相应的设置。

3. 创建应用程序

3.1 创建 Angular 项目

使用下面的命令来在本地创建一个名为 blog-app 的 Angular 项目：

ng new blog-app

现在，我们已经在本地创建了一个 Angular 项目。

3.2 安装必需的依赖项

进入 blog-app 项目并使用下面的命令来安装必需的依赖项：

cd blog-app

npm install --save express body-parser mongoose jsonwebtoken bcryptjs

这里我们的应用程序需要使用的依赖项。

3.3 创建后端 API

我们将创建一个名为 server.js 的文件来处理应用程序的后端 API。在项目的根目录下创建 server.js 文件：

touch server.js

然后使用下面的代码将 server.js 文件填充：

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const app = express();
const PORT = 3000;
app.use(bodyParser.json());
// Connect to MongoDB database
mongoose.connect('mongodb://localhost:27017/blog-app', { useNewUrlParser: true, useUnifiedTopology: true });
mongoose.connection.on('connected', () => {
    console.log('Connected to MongoDB!');
});
// Define user schema
const userSchema = new mongoose.Schema({
    email: { type: String, unique: true },
    password: { type: String, required: true }
});
// Define user model
const User = mongoose.model('User', userSchema);
// Create user
app.post('/api/users', (req, res) => {
    const salt = bcrypt.genSaltSync(10);
    const hash = bcrypt.hashSync(req.body.password, salt);
    const user = new User({
        email: req.body.email,
        password: hash
    });
    user.save((err) => {
        if (err) {
            return res.status(400).json({ message: 'Error creating user' });
        }
        return res.status(201).json({ message: 'User created' });
    });
});
// Login user
app.post('/api/login', (req, res) => {
    User.findOne({ email: req.body.email }, (err, user) => {
        if (err) {
            return res.status(400).json({ message: 'Error finding user' });
        }
        if (!user) {
            return res.status(401).json({ message: 'Invalid email or password' });
        }
        const validPassword = bcrypt.compareSync(req.body.password, user.password);
        if (!validPassword) {
            return res.status(401).json({ message: 'Invalid email or password' });
        }
        const token = jwt.sign({ email: req.body.email }, 'my-secret-key');
        return res.status(200).json({ token: token });
    });
});
// Start server
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

这里我们定义了一个 Express 应用程序并创建了两个端点，用于创建用户和用户登录。我们使用 bcryptjs 和 jsonwebtoken 库来处理用户密码的哈希和 JSON Web Token。请注意，我们在 MongoDB 数据库中定义了一个 User 模型，并在每次用户注册时将其保存在数据库中。

3.4 创建前端组件

我们将创建三个组件：登录、注册和主页。在命令行中使用下面的命令创建这些组件：

ng generate component login ng generate component register

ng generate component home

现在，我们在项目的 src/app 目录下创建了三个组件。

4. 集成后端和前端

我们已经创建了一个后端代码，将其连接到前端代码，使我们的应用程序正常工作。在这里，我们将使用 Angular 服务将前端代码连接到后端 API。

4.1 创建服务

在命令行中使用下面的命令创建名为 auth.service.ts 的 Angular 服务：

ng generate service auth

现在，我们在项目的 src/app 目录下创建了一个 Angular 服务。

我们创建了一个 AuthService 类来处理登录、注册和退出登录等任务。用下面的代码替换 auth.service.ts 文件的内容：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private registerUrl = '/api/users';
  private loginUrl = '/api/login';
  constructor(private http: HttpClient) { }
  register(user) {
    return this.http.post<any>(this.registerUrl, user);
  }
  login(user) {
    return this.http.post<any>(this.loginUrl, user);
  }
  loggedIn() {
    return !!localStorage.getItem('token');
  }
  getToken() {
    return localStorage.getItem('token');
  }
  logout() {
    localStorage.removeItem('token');
  }
}

在此服务中，我们将创建注册、登录、退出登录等方法。

4.2 更新组件

现在，我们将更新我们的组件以使用 AuthService。

用下面的代码替换 login.component.ts：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  loginForm: FormGroup;
  message: string;
  constructor(private authService: AuthService, private formBuilder: FormBuilder, private router: Router) { }
  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }
  onSubmit() {
    this.authService.login(this.loginForm.value).subscribe(
      (res) => {
        localStorage.setItem('token', res.token);
        this.router.navigate(['home']);
      },
      (err) => {
        this.message = err.error.message;
      }
    );
  }
}

然后用下面的代码替换 register.component.ts：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  registerForm: FormGroup;
  message: string;
  constructor(private authService: AuthService, private formBuilder: FormBuilder, private router: Router) { }
  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }
  onSubmit() {
    this.authService.register(this.registerForm.value).subscribe(
      (res) => {
        this.router.navigate(['login']);
      },
      (err) => {
        this.message = err.error.message;
      }
    );
  }
}

然后用下面的代码替换 home.component.ts：

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private authService: AuthService) { }
  ngOnInit() {
  }
  logout() {
    this.authService.logout();
  }
  isLoggedIn() {
    return this.authService.loggedIn();
  }
}

4.3 更新模板

现在，我们将更新我们的模板以使用 AuthService。

用下面的代码替换 login.component.html：

<form class="form-signin" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
  <div *ngIf="message" class="alert alert-danger">{{ message }}</div>
  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="inputEmail" class="form-control" placeholder="Email address" [formControl]="loginForm.get('email')" required autofocus>
  <label for="inputPassword" class="sr-only">Password</label>
  <input type="password" id="inputPassword" class="form-control" placeholder="Password" [formControl]="loginForm.get('password')" required>
  <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>>
  Don't have an account? <a routerLink="/register">Register</a>
</form>

然后用下面的代码替换 register.component.html：

<form class="form-signin" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <h1 class="h3 mb-3 font-weight-normal">Please register</h1>
  <div *ngIf="message" class="alert alert-danger">{{ message }}</div>
  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="inputEmail" class="form-control" placeholder="Email address" [formControl]="registerForm.get('email')" required autofocus>
  <label for="inputPassword" class="sr-only">Password</label>
  <input type="password" id="inputPassword" class="form-control" placeholder="Password" [formControl]="registerForm.get('password')" required>
  <button class="btn btn-lg btn-primary btn-block" type="submit">Register</button>
  Already have an account? <a routerLink="/login">Login</a>
</form>

然后用下面的代码替换 home.component.html：

<h1 class="mt-5">Welcome to your blog!</h1>
<p *ngIf="isLoggedIn()">You're logged in. <button (click)="logout()" class="btn btn-danger">Logout</button>
<p *ngIf="!isLoggedIn()">Please <a routerLink="/login">login</a> or <a routerLink="/register">register</a>.

5. 运行应用程序

最后，我们将在本地启动我们的应用程序并检查它是否正在运行。在命令行中使用下面的命令启动本地服务器：

npm start

现在，在浏览器中打开 http://localhost:4200，注册一个新账户，然后使用该账户登录到您的博客页面。现在您可以开始使用您的博客啦！

总结

在本文中，我们使用 Angular 和 MongoDB 创建了一个具有登录功能的博客应用程序。我们使用了 Angular CLI 快速生成项目和组件，并使用 Express.js 处理后端 API。使用 bcryptjs 和 jsonwebtoken 库，我们可以安全地处理用户密码和 JSON Web Token。