构建CRUD应用程序：MEAN Stack教程-易源易彩

摘要

本文将引导读者通过一个逐步的MEAN Stack教程，学习如何使用Angular 7构建一个CRUD（创建、读取、更新、删除）应用程序。读者将掌握如何整合MongoDB、Express.js、Angular和Node.js这些关键技术，以构建一个全功能的Web应用程序。

关键词

MEAN Stack, Angular 7, CRUD App, MongoDB, Node.js

一、MEAN Stack概述

1.1 什么是MEAN Stack

MEAN Stack是一种流行的全栈JavaScript开发框架，它由四个主要组件组成：MongoDB、Express.js、Angular和Node.js。这种组合允许开发者使用一致的编程语言——JavaScript——来构建从客户端到服务器端的整个应用程序。MEAN Stack不仅简化了开发流程，还提高了开发效率，使得开发者能够在短时间内构建出功能丰富且性能优异的应用程序。

1.2 MEAN Stack的组成部分

MongoDB

MongoDB是一款基于文档的NoSQL数据库系统，以其灵活性和可扩展性而闻名。它能够存储结构化或非结构化的数据，并且支持动态查询和索引，非常适合处理大量非关系型数据。

Express.js

Express.js是Node.js平台上的一个轻量级Web应用框架，它简化了HTTP请求的处理过程，提供了丰富的API来帮助开发者快速搭建RESTful风格的服务端应用。Express.js的灵活性使其成为构建各种规模Web应用的理想选择。

Angular

Angular是由Google维护的一个开源前端框架，用于构建动态Web应用。Angular 7版本引入了许多新特性，如改进的性能、更好的模块化支持以及更强大的表单处理能力等。它通过双向数据绑定、依赖注入等机制极大地简化了前端开发工作。

Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者使用JavaScript编写服务器端代码。Node.js采用事件驱动、非阻塞I/O模型，非常适合构建高性能、高并发的应用程序。

1.3 MEAN Stack的优点

统一的编程语言：由于整个栈都基于JavaScript，这大大降低了学习成本并提高了开发效率。
高度可扩展性：无论是前端还是后端，MEAN Stack都能轻松应对从小型项目到大型企业级应用的扩展需求。
丰富的社区资源：得益于庞大的开发者社区，MEAN Stack拥有大量的插件、库和工具，可以加速开发进程。
易于部署：Node.js和Express.js的结合使得部署变得简单快捷，同时MongoDB也支持云服务部署选项。
灵活性与适应性：MEAN Stack适用于多种应用场景，包括社交网络、实时聊天应用、电子商务平台等。

二、环境设置

2.1 安装Node.js

为了开始构建MEAN Stack应用程序，首先需要安装Node.js。Node.js是整个栈的基础，因为它不仅提供了运行Express.js所需的环境，同时也是Angular CLI（命令行工具）运行的前提条件。访问Node.js官方网站 (https://nodejs.org/) 下载最新稳定版的安装包。安装过程中，请确保勾选“npm”选项，因为npm（Node Package Manager）是Node.js自带的包管理器，后续步骤中会用到它来安装其他必要的软件包。

2.2 安装MongoDB

接下来，安装MongoDB作为数据库管理系统。MongoDB是一款非常强大的NoSQL数据库，能够高效地存储和检索数据。访问MongoDB官网 (https://www.mongodb.com/) 下载页面，根据你的操作系统选择合适的安装包。安装完成后，启动MongoDB服务，并确保它正在运行。对于Windows用户，可以在命令提示符中输入mongod --dbpath "C:\data\db"来启动服务；而对于MacOS或Linux用户，则可以通过brew services start mongodb-community@<version>命令来启动服务（其中<version>应替换为实际安装的MongoDB版本号）。

2.3 安装Express.js

Express.js是Node.js平台上最流行的Web应用框架之一。虽然它不是一个独立的软件包，但可以通过npm来安装。打开终端或命令提示符，输入以下命令来全局安装Express.js：

npm install -g express-generator

安装完成后，可以通过express --help命令来验证是否成功安装。接下来，使用express myapp命令来生成一个新的Express.js项目，其中myapp是你项目的名称。之后进入项目目录，并运行npm install来安装所有必需的依赖包。

2.4 安装Angular 7

最后一步是安装Angular 7。Angular CLI是一个强大的工具，可以帮助我们快速搭建Angular项目。在终端或命令提示符中执行以下命令来全局安装Angular CLI：

npm install -g @angular/cli@7

安装完成后，可以通过ng --version命令来验证安装情况。接下来，使用ng new my-app命令来创建一个新的Angular项目，其中my-app是你的项目名称。创建完成后，进入项目目录并通过ng serve命令启动开发服务器。此时，你可以通过浏览器访问http://localhost:4200/来查看你的Angular应用程序。

三、构建CRUD应用程序

3.1 创建Angular 7项目

在这一节中，我们将详细介绍如何使用Angular CLI创建一个新的Angular 7项目。Angular CLI是一个强大的命令行工具，它可以帮助开发者快速搭建Angular应用程序的基本结构，并提供了一系列实用的命令来辅助开发过程。

步骤 1: 初始化项目

打开终端或命令提示符，确保已经全局安装了Angular CLI。如果尚未安装，请参照上一节中的说明进行安装。接下来，使用以下命令创建一个新的Angular 7项目：

ng new my-crud-app

这里，my-crud-app是你的项目名称。Angular CLI将会询问你是否需要添加路由和支持样式，你可以根据实际情况选择。通常情况下，选择默认选项即可。

步骤 2: 进入项目目录

创建完成后，进入项目目录：

cd my-crud-app

步骤 3: 启动开发服务器

在项目目录中，运行以下命令启动开发服务器：

ng serve

此时，Angular CLI会在浏览器中自动打开http://localhost:4200/，显示你的Angular应用程序首页。

步骤 4: 添加组件和服务

为了实现CRUD操作，我们需要创建一些组件和服务。使用Angular CLI的generate命令来快速生成这些文件。例如，创建一个名为item的组件和服务：

ng generate component item
ng generate service item

这将分别生成item.component.ts和item.service.ts文件。

3.2 设计数据库 schema

在设计数据库schema之前，我们需要先确定应用程序的数据模型。假设我们的CRUD应用程序是用来管理物品列表的，那么每个物品可能包含以下字段：name（名称）、description（描述）、price（价格）和quantity（数量）。

步骤 1: 定义Mongoose schema

首先，我们需要安装Mongoose，这是一个用于操作MongoDB的Node.js库。在你的项目根目录下运行以下命令：

npm install mongoose

接着，在Express.js后端项目中定义一个Mongoose schema。创建一个名为item.model.js的文件，并在其中定义如下内容：

const mongoose = require('mongoose');

const ItemSchema = new mongoose.Schema({
  name: { type: String, required: true },
  description: { type: String, required: true },
  price: { type: Number, required: true },
  quantity: { type: Number, required: true }
});

module.exports = mongoose.model('Item', ItemSchema);

步骤 2: 连接MongoDB

在Express.js项目的入口文件（通常是app.js或index.js）中，使用Mongoose连接到MongoDB数据库：

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/my_crud_app', {
  useNewUrlParser: true,
  useUnifiedTopology: true
}).then(() => console.log('Connected to MongoDB'))
  .catch(err => console.error('Could not connect to MongoDB...', err));

3.3 实现CRUD操作

现在我们已经有了Angular前端和Express.js后端，接下来就是实现具体的CRUD操作了。

步骤 1: 创建操作

在Express.js后端，我们需要定义一个用于创建新物品的路由。在routes/item.routes.js文件中添加以下代码：

const express = require('express');
const router = express.Router();
const Item = require('../models/item.model');

router.post('/', async (req, res) => {
  try {
    const newItem = new Item(req.body);
    await newItem.save();
    res.status(201).json(newItem);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

module.exports = router;

接着，在主应用文件中使用此路由：

const itemRoutes = require('./routes/item.routes');
app.use('/items', itemRoutes);

步骤 2: 读取操作

为了读取物品列表，我们需要定义一个GET请求。在item.routes.js中添加以下代码：

router.get('/', async (req, res) => {
  try {
    const items = await Item.find();
    res.json(items);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

步骤 3: 更新操作

更新物品信息时，我们需要定义一个PUT请求。在item.routes.js中添加以下代码：

router.put('/:id', getOneItem, async (req, res) => {
  if (req.body.name != null) {
    res.item.name = req.body.name;
  }
  if (req.body.description != null) {
    res.item.description = req.body.description;
  }
  if (req.body.price != null) {
    res.item.price = req.body.price;
  }
  if (req.body.quantity != null) {
    res.item.quantity = req.body.quantity;
  }
  try {
    const updatedItem = await res.item.save();
    res.json(updatedItem);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

async function getOneItem(req, res, next) {
  let item;
  try {
    item = await Item.findById(req.params.id);
    if (item == null) {
      return res.status(404).json({ message: 'Cannot find item' });
    }
  } catch (err) {
    return res.status(500).json({ message: err.message });
  }

  res.item = item;
  next();
}

步骤 4: 删除操作

最后，我们需要定义一个DELETE请求来删除物品。在item.routes.js中添加以下代码：

router.delete('/:id', getOneItem, async (req, res) => {
  try {
    await res.item.remove();
    res.json({ message: 'Deleted Item' });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

至此，我们已经完成了CRUD操作的实现。接下来，你需要在Angular前端中调用这些API接口来实现用户界面的交互。

四、前端实现

4.1 使用Angular 7实现CRUD界面

在这一节中，我们将详细介绍如何使用Angular 7来实现CRUD操作的用户界面。Angular 7提供了丰富的特性，如模板语法、指令和服务通信机制，这些都将帮助我们构建一个直观且响应迅速的用户界面。

步骤 1: 创建CRUD组件

首先，我们需要创建几个组件来负责不同的CRUD操作。使用Angular CLI的generate命令来生成这些组件：

ng generate component create-item
ng generate component read-item
ng generate component update-item
ng generate component delete-item

这将分别为创建、读取、更新和删除操作生成相应的组件。

步骤 2: 设计表单

对于创建和更新操作，我们需要设计表单来收集用户输入的信息。在create-item.component.html和update-item.component.html文件中，我们可以使用Angular的模板语法来创建表单：

<!-- create-item.component.html -->
<form (ngSubmit)="onSubmit(createForm)" #createForm="ngForm">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" [(ngModel)]="item.name" required>
  </div>
  <div>
    <label for="description">Description:</label>
    <textarea id="description" name="description" [(ngModel)]="item.description" required></textarea>
  </div>
  <div>
    <label for="price">Price:</label>
    <input type="number" id="price" name="price" [(ngModel)]="item.price" required>
  </div>
  <div>
    <label for="quantity">Quantity:</label>
    <input type="number" id="quantity" name="quantity" [(ngModel)]="item.quantity" required>
  </div>
  <button type="submit">Submit</button>
</form>

步骤 3: 实现CRUD方法

在对应的组件类中，我们需要实现与后端API交互的方法。例如，在create-item.component.ts中，我们可以使用Angular的HttpClient来发送POST请求：

// create-item.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-create-item',
  templateUrl: './create-item.component.html',
  styleUrls: ['./create-item.component.css']
})
export class CreateItemComponent implements OnInit {
  item = {
    name: '',
    description: '',
    price: 0,
    quantity: 0
  };

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
  }

  onSubmit(form: any): void {
    this.http.post('/items', this.item)
      .subscribe(response => {
        console.log('Item created:', response);
        form.reset();
      }, error => {
        console.error('Error creating item:', error);
      });
  }
}

步骤 4: 显示物品列表

为了显示物品列表，我们需要创建一个组件来负责读取操作。在read-item.component.html文件中，我们可以使用*ngFor指令来遍历物品列表：

<!-- read-item.component.html -->
<div *ngFor="let item of items">
  <h3>{{ item.name }}</h3>
  <p>Description: {{ item.description }}</p>
  <p>Price: {{ item.price }}</p>
  <p>Quantity: {{ item.quantity }}</p>
</div>

在read-item.component.ts文件中，我们需要实现一个方法来获取物品列表：

// read-item.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-read-item',
  templateUrl: './read-item.component.html',
  styleUrls: ['./read-item.component.css']
})
export class ReadItemComponent implements OnInit {
  items: any[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get('/items')
      .subscribe(data => {
        this.items = data as any[];
      }, error => {
        console.error('Error fetching items:', error);
      });
  }
}

4.2 使用Angular 7实现数据绑定

Angular 7提供了多种方式来实现数据绑定，包括属性绑定、事件绑定和双向数据绑定。这些机制使得我们能够轻松地在视图和模型之间同步数据。

属性绑定

属性绑定允许我们将组件类中的属性值绑定到HTML元素的属性上。例如，在create-item.component.html文件中，我们可以使用[(ngModel)]来实现双向数据绑定：

<input type="text" id="name" name="name" [(ngModel)]="item.name" required>

事件绑定

事件绑定允许我们将组件类中的方法与HTML元素的事件关联起来。例如，在create-item.component.html文件中，我们可以使用(ngSubmit)来绑定表单提交事件：

<form (ngSubmit)="onSubmit(createForm)" #createForm="ngForm">

双向数据绑定

Angular 7中的双向数据绑定是通过ngModel指令实现的，它结合了属性绑定和事件绑定的功能。在前面的例子中，我们已经在表单控件中使用了[(ngModel)]来实现双向数据绑定。

通过上述步骤，我们已经实现了基本的CRUD操作界面，并利用Angular 7的强大特性实现了数据绑定。接下来，你可以进一步优化用户界面，比如添加验证逻辑、错误处理等功能，以提升用户体验。

五、后端实现

5.1 使用Express.js实现RESTful API

在构建CRUD应用程序的过程中，Express.js作为后端的核心框架，负责处理HTTP请求并提供RESTful API接口。下面将详细介绍如何使用Express.js来实现这些API接口。

步骤 1: 设置Express.js项目

确保已经按照第二节中的说明安装了Express.js。创建一个新的Express.js项目，并在项目中定义路由和中间件。在app.js或index.js文件中设置基本的Express.js配置：

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

// Middleware
app.use(express.json()); // 解析JSON请求体
app.use(express.urlencoded({ extended: true })); // 解析URL编码的请求体

// Routes
const itemRoutes = require('./routes/item.routes');
app.use('/items', itemRoutes);

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

步骤 2: 定义RESTful API路由

在Express.js项目中，我们需要定义一系列的路由来处理CRUD操作。这些路由将对应于HTTP请求的不同类型（GET, POST, PUT, DELETE），并映射到特定的API端点。

创建操作 (POST /items)

router.post('/', async (req, res) => {
  try {
    const newItem = new Item(req.body);
    await newItem.save();
    res.status(201).json(newItem);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

读取操作 (GET /items 和 GET /items/:id)

router.get('/', async (req, res) => {
  try {
    const items = await Item.find();
    res.json(items);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

router.get('/:id', getOneItem, (req, res) => {
  res.json(res.item);
});

更新操作 (PUT /items/:id)

router.put('/:id', getOneItem, async (req, res) => {
  if (req.body.name != null) {
    res.item.name = req.body.name;
  }
  if (req.body.description != null) {
    res.item.description = req.body.description;
  }
  if (req.body.price != null) {
    res.item.price = req.body.price;
  }
  if (req.body.quantity != null) {
    res.item.quantity = req.body.quantity;
  }
  try {
    const updatedItem = await res.item.save();
    res.json(updatedItem);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

删除操作 (DELETE /items/:id)

router.delete('/:id', getOneItem, async (req, res) => {
  try {
    await res.item.remove();
    res.json({ message: 'Deleted Item' });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

步骤 3: 中间件函数

为了简化代码并避免重复，我们可以定义一些中间件函数来处理常见的任务，例如查找特定ID的物品。

async function getOneItem(req, res, next) {
  let item;
  try {
    item = await Item.findById(req.params.id);
    if (item == null) {
      return res.status(404).json({ message: 'Cannot find item' });
    }
  } catch (err) {
    return res.status(500).json({ message: err.message });
  }

  res.item = item;
  next();
}

通过以上步骤，我们已经使用Express.js实现了完整的RESTful API接口，这些接口将被Angular前端用来执行CRUD操作。

5.2 使用MongoDB实现数据存储

MongoDB作为MEAN Stack中的数据库层，负责存储和管理应用程序的数据。下面将介绍如何使用MongoDB来实现数据存储。

步骤 1: 连接到MongoDB

在Express.js项目中，我们需要使用Mongoose来连接到MongoDB数据库。在app.js或index.js文件中添加以下代码：

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/my_crud_app', {
  useNewUrlParser: true,
  useUnifiedTopology: true
}).then(() => console.log('Connected to MongoDB'))
  .catch(err => console.error('Could not connect to MongoDB...', err));

步骤 2: 定义Mongoose Schema

在Express.js项目中，我们需要定义一个Mongoose Schema来描述物品的数据结构。创建一个名为item.model.js的文件，并在其中定义如下内容：

const mongoose = require('mongoose');

const ItemSchema = new mongoose.Schema({
  name: { type: String, required: true },
  description: { type: String, required: true },
  price: { type: Number, required: true },
  quantity: { type: Number, required: true }
});

module.exports = mongoose.model('Item', ItemSchema);

步骤 3: 使用Mongoose操作数据

在定义了Schema之后，我们就可以使用Mongoose提供的API来执行CRUD操作。例如，在创建新物品时，我们可以使用save()方法：

const newItem = new Item(req.body);
await newItem.save();

在读取物品列表时，我们可以使用find()方法：

const items = await Item.find();

在更新物品信息时，我们可以直接修改对象属性并调用save()方法：

res.item.name = req.body.name;
res.item.description = req.body.description;
res.item.price = req.body.price;
res.item.quantity = req.body.quantity;
await res.item.save();

在删除物品时，我们可以使用remove()方法：

await res.item.remove();

通过以上步骤，我们已经成功地使用MongoDB实现了数据存储，并通过Express.js的RESTful API接口与Angular前端进行了交互。这样就构建了一个完整的CRUD应用程序。

六、测试和部署

6.1 测试CRUD应用程序

在完成CRUD应用程序的开发之后，测试阶段至关重要。这一步骤确保了应用程序的各项功能正常运作，并且能够满足预期的需求。测试不仅包括功能性的验证，还需要考虑性能、安全性和用户体验等方面。下面将详细介绍如何对CRUD应用程序进行全面的测试。

功能测试

创建操作：通过前端表单提交新的物品信息，检查后端是否正确接收并保存至数据库。
读取操作：从前端发起请求获取物品列表，确认返回的数据与数据库中的记录相匹配。
更新操作：选择一个已存在的物品，通过前端表单更改其信息，验证后端是否成功更新数据库中的相应记录。
删除操作：选择一个物品进行删除操作，确认该物品是否从数据库中彻底移除。

性能测试

负载测试：模拟多个用户同时访问应用程序，观察系统的响应时间和稳定性。
压力测试：逐渐增加并发用户的数量，直到系统达到极限，以此来评估系统的最大承载能力。

安全性测试

身份验证：确保只有经过认证的用户才能执行CRUD操作。
授权控制：验证不同角色的用户只能访问他们被授权的数据。
输入验证：防止恶意数据注入，确保所有输入都经过适当的验证和清理。

用户体验测试

界面友好性：检查用户界面是否直观易用，确保用户能够轻松完成各项操作。
响应速度：评估各个页面加载的速度，确保良好的用户体验。

6.2 部署CRUD应用程序到生产环境

一旦测试阶段顺利完成，接下来的步骤就是将应用程序部署到生产环境中。这一步骤需要仔细规划，以确保应用程序能够在真实世界中稳定运行。

准备生产环境

服务器配置：选择合适的服务器硬件和操作系统，确保有足够的计算资源来支撑应用程序。
安全设置：配置防火墙规则，限制不必要的网络访问，保护服务器免受攻击。
备份策略：设定定期备份数据库的计划，以防数据丢失。

配置应用程序

环境变量：设置正确的环境变量，如数据库连接字符串、密钥等敏感信息。
日志记录：启用详细的日志记录，以便于监控应用程序的状态和调试问题。
性能优化：根据测试结果调整应用程序的配置，提高性能表现。

部署过程

构建打包：使用Angular CLI的ng build --prod命令生成生产环境下的构建文件。
上传文件：将构建好的文件上传到服务器。
启动服务：确保Node.js和MongoDB服务正在运行，并启动Express.js应用。
域名绑定：如果需要，配置DNS记录，将域名指向服务器IP地址。

监控与维护

性能监控：使用工具如New Relic或Datadog来监控应用程序的性能指标。
错误报告：设置错误报告系统，如Sentry或Rollbar，及时发现并解决潜在的问题。
定期更新：随着技术的发展，定期更新依赖库和框架，保持应用程序的安全性和兼容性。

通过以上步骤，我们可以确保CRUD应用程序在生产环境中稳定运行，并为用户提供优质的服务。

七、总结

通过本教程的学习，读者已经掌握了如何使用MEAN Stack（MongoDB、Express.js、Angular和Node.js）构建一个完整的CRUD应用程序。从环境搭建到前后端开发，再到测试与部署，每一步都详细地介绍了所需的技术要点和实践步骤。

本教程不仅涵盖了Angular 7的使用方法，还深入探讨了如何利用Express.js和MongoDB来构建RESTful API和管理数据。通过实际操作，读者能够理解如何将这些技术有机地结合起来，以构建出功能完备且性能优异的Web应用程序。

此外，本文还强调了测试的重要性，包括功能测试、性能测试、安全性测试以及用户体验测试等多个方面，确保应用程序在上线前能够满足高标准的质量要求。最后，通过详细的部署指南，读者可以了解到如何将应用程序顺利地部署到生产环境中，并对其进行有效的监控与维护。

总之，本教程为希望使用MEAN Stack构建Web应用程序的开发者提供了一条清晰的学习路径，帮助他们在实践中掌握这些关键技术，并能够独立开发出高质量的应用程序。