教你如何开发你的第一个MEAN堆栈应用程序

DebugUsery
616 阅读10分钟

MEAN栈是基于JavaScript的框架，用于开发网络应用。MEAN是以MongoDB、Express、Angular和Node命名的，这四种关键技术构成了堆栈的各个层次。

  • MongoDB--文档数据库
  • Express(.js)--Node.js网络框架
  • Angular(.js)--一个客户端JavaScript框架
  • **Node(.js)--**主要的JavaScript网络服务器

MEAN栈还有一些变种，如MERN（用React.js替换Angular.js）和MEVN（使用Vue.js）。MEAN堆栈是构建Web应用的最流行的技术概念之一。

MEAN栈的剖析

  1. AngularJS被用来作为客户端语言。这意味着当客户端发出请求时，AngularJS会处理它。
  2. 该请求会进入服务器端语言Node.JS。
  3. 请求进入Express JS，在那里向数据库进行查询。
  4. MongoDB访问数据，并向ExpressJS发送一个合适的响应。
  5. 响应从ExpressJS到NodeJS，最后到AngularJS。

为什么是MEAN

  • 同构代码。MEAN栈允许同构编码。它允许开发者在前端和后端使用Javascript。这对初创公司是有利的，因为编码资源可以得到有效利用。
  • 开源。所有的MEAN stack组件都是开源的，并且定期更新，它允许开发者根据他们的需要定制代码。
  • MongoDB是一个NoSQL数据库，与其他SQL数据库相比，它在本质上是灵活的。MongoDB可以很容易地对数据模型进行修改，并提供了很多选项，使特定结果集的查询更快。
  • 支持MVC架构- AngularJS使用MVC来组织应用程序，从而支持快速和并行开发。MVC模型允许多个程序员同时进行代码工作。
  • **NodeJS -**它建立在谷歌的V8 JIT-compiled JavaScript引擎上，该引擎可以非常快速地将JavaScript代码编译并执行为本地机器代码。Node.js还使用异步编程，使网络连接、文件系统和数据库的I/O等过程执行得非常快。

入门

本文是为创建一个MEAN应用程序而设计的。为此，我们使用Angular、Node和Mongo创建了一个员工管理系统，包括CRUD操作（创建、读取、更新和删除）。

内容列表

让我们开始吧。

要求

希望你已经安装了这些要求。你必须解锁mongodb的安装程序以进行安装。这可以通过属性窗口和检查右下角的解锁复选框来完成。

同时确保你已经在环境变量中添加了mongodb路径。

在命令提示符下运行以下命令来验证安装状态。

npm -v

第一部分 - 设置Node.JS后端

最好是将后端和前端的文件夹分开组织。这将提高你的代码的可访问性。因此，在这个项目中，我们将创建后端和前端的文件夹来管理代码。

首先，创建一个后端文件夹并移动到该文件夹。

mkdir backend

下一步是创建一个package.json文件。

npm init

npm init 会提示你输入一些信息，如应用的名称、描述、版本、作者、关键词，也会问你看到的是否是你喜欢的。输入 "是"，然后按回车键，就完成了package.json的创建。

Package.json是一个给npm提供必要信息的文件，这使得它能够识别项目以及处理项目的依赖性。

  • 通过输入code ...打开这个文件夹下的VSCode。
  • 然后打开package.json文件，将这个任务添加到脚本中。
"start": "node index.js"

  • 创建一个名为index.js的文件。在这里，我们将编写协议来创建我们的服务器。
  • 创建三个独立的文件夹，称为models、routes和controllers。
  • 在所有三个文件夹中创建Employee.js。

最后的文件夹结构应该是这样的。

安装所需的软件包

npm install body-parser cors express mongoose

  • body-parser。这是一个npm模块，JSON解析的中间件。它有助于解析JSON数据、纯文本或整个对象。
  • CORS。这是一个node.js包，Express.js中间件。它允许用多个选项启用 CORS。
  • Express.js: Node.js网络应用框架。它有助于创建Web应用程序和RESTful APIs。
  • Mongoose。用于Node的MongoDB ODM。它允许你与MongoDB数据库互动。

现在在backend > index.js文件内添加以下代码。

var express = require('express'),

// Connecting with mongo db

// Setting up configurations

// Setting up the routes

app.listen(port, () => {

// Find 404 and hand over to error handler

// error handler

让我们来理解这段代码。

  • 我们正在为Express app、cors、body-parser、mongodb和我们的模型初始化变量。
  • 使用mongoose.connect()方法建立node后端和mongodb数据库之间的连接。在那里你必须指定数据库的名称。
  • 在服务器中设置body-parser和cors的配置。
  • 为apis设置路由。因此，将路由导入服务器，并将其注册到Express应用程序中。这里我们只使用一个路由--雇员。
  • 最后，我们要在3000端口上运行服务器。

创建模型

我们在models文件夹下有employee.js文件。在这个文件中，我们将定义雇员集合的模式。我的数据类型是姓名、电子邮件、职务和电话号码。

在backend > models > employee.js文件中添加以下代码。

const mongoose = require('mongoose');

// Define collection and schema

module.exports = mongoose.model('Employee', Employee)

设置路由

让我们为Angular应用程序创建路由，通过RESTful APIs访问雇员数据。我将使用mongoose来创建、读取、更新和删除MongoDB数据库的数据。

在backend > routes > employee.js中添加以下代码

module.exports = function(app) {

设置控制器

我们的node应用程序的最后和核心部分是控制器。让我们为后端创建控制器，通过RESTful APIs访问雇员数据。

在backend > controllers > employee.js中添加以下代码

var mongoose = require('mongoose'),

我们已经使用Node、Express和MongoDB设置了我们的MEAN Stack后端。让我们通过以下命令启动服务器

npm start

现在，让我们尝试通过postman访问api。如果你没有postman，只需尝试在浏览器中加载网址http://localhost:3000/employee。如果服务器正在运行，它将返回一个空数组[]。

第二部分 - 设置Angular前台

Angular是一个用于构建移动和桌面Web应用程序的平台。Angular CLI是一个命令行界面工具，你可以用它来直接从命令壳中初始化、开发、搭建和维护Angular应用程序。你必须在你的系统中安装Angular CLI。使用下面的命令来安装Angular CLI，如果它已经安装了，请忽略。

npm install -g

成功安装Angular CLI后，我们可以使用ng new命令创建我们的第一个项目。

在进入前端创建之前，创建一个文件夹frontend来存放前端代码，并移动该文件夹。

mkdir frontend

Angular CLI在设置项目的时候会询问你的选择。

你想添加Angular路由吗？
选择Y，然后点击回车。

你想使用哪种样式表格式？
通过方向键选择CSS，然后点击回车。

你的Angular项目已经安装好了，现在进入项目目录。

然后切换到项目文件夹（mean-stack-crud-app），打开visual studio代码编辑器或那里的任何代码编辑器。

cd mean-stack-crud-app

Bootstrap是一个免费和开源的工具集，用于创建响应式网站和网络应用。我们将使用bootstrap进行造型设计。因此，使用npm安装bootstrap。

npm install bootstrap

然后，进入angular.json文件，在 "样式 "中添加以下代码。[]数组，如下所示。

"styles": [

生成组件

组件是Angular应用程序的主要构建块。每个组件由以下部分组成。一个HTML模板，声明在页面上呈现的内容。一个定义行为的Typescript类。
为了管理组件，将所有的组件放在组件文件夹中。使用下面的代码来生成组件。

ng g c components/employee-create

激活路由服务

为了在多个组件之间进行导航，我们必须在我们的应用程序中设置路由服务。现在，如果你还记得在设置Angular项目时，CLI问了这个问题**"你想添加Angular路由吗？"**。我们选择了 "是"，它就会自动创建app-routing.module.ts并在src > app > app.module.ts文件中注册。

用下面的代码替换app.module.ts的代码，在应用程序中启用路由服务。

import { NgModule } from '

import { HttpClientModule } from '

const routes: Routes = [

@NgModule

默认情况下，app.component.html包含一个虚拟网站的代码。我们不需要这样，我们的想法是在angular应用程序上实现CRUD操作。因此，我们需要从一个页面到另一个页面的导航。这可以通过路由服务来完成。
为了启用路由服务，用以下代码替换app.component.html文件的代码。

<nav>

<router-outlet></router-outlet>

创建Angular服务

为了在MEAN Stack Angualr 7应用程序中消费RESTful API，我们需要创建一个服务文件。这个服务文件将处理创建、读取、更新和删除操作。

在我们在MEAN Stack应用程序中创建服务以消费RESTful APIs之前，我们需要做以下两件事。

  • 配置HttpClientModule
    我们需要在app.module.ts文件中导入HttpClientModule服务。
import { HttpClientModule } from '@angular/common/http';
  • 创建雇员模型文件
    使用ng g cl model/employee和以下代码创建src > model > employee.ts文件。
export class Employee {

现在，你可以使用ng g s service/api创建angular服务文件
，然后在其中添加以下代码。

import { Injectable } from '

@Injectable

export class ApiService {

constructor(private http: HttpClient) { }

  // Create

  // Get all employees

  // Get employee

  // Update employee

// Delete employee

  // Error handling 

}

我们已经创建了Angular服务文件来处理我们应用程序中的CRUD操作，现在去app.module.ts文件中导入这个服务，并像下面这样添加到提供者数组中。

import { ApiService } from './service/api.service';

@NgModule

通过使用RESTful API注册一个雇员

我们已经创建了Angular服务文件来处理我们应用程序中的CRUD操作，现在去app.module.ts文件中导入这个服务并添加到提供者数组中，如下所示。
为了注册一个雇员，我们将使用Angular服务和RESTful APIs。我使用了Reactive表单来注册雇员。在我们的MEAN Stack应用教程中，我们也涵盖了Reactive表单的验证。

棱镜

转到组件 > employee-create > employee-create.component.ts文件，并添加以下代码。

import { Router } from '

@Component

export class EmployeeCreateComponent implements OnInit {  

ngOnInit() { }

  // Choose designation with select dropdown

  // Getter to access form control

onSubmit() {

}

然后转到employee-create.component.html，添加以下代码。

<div class="row justify-content-center">

通过消耗RESTful API显示雇员列表

进入src/app/components/employee-list/employee-list.component.ts文件，加入以下代码。

import { Component, OnInit } from '

@Component

export class EmployeeListComponent implements OnInit {

constructor(private apiService: ApiService) { 

ngOnInit() {}

readEmployee(){

removeEmployee(employee: any, index: number) {

}

然后到employee-list.component.html中加入以下代码。

<div class="container">

通过消耗RESTful API来编辑一个雇员

进入src/app/components/employee-edit/employee-edit.component.ts文件并加入以下代码。

import { Employee } from './../../model/employee';

@Component

export class EmployeeEditComponent implements OnInit {

constructor(

ngOnInit() {

// Choose options with select-dropdown

// Getter to access form control

getEmployee(id: any) {

updateEmployee() {

onSubmit() {

}

然后转到employee-edit.component.html，添加以下代码。

<div class="row justify-content-center">

你就拥有了!你自己的雇员管理系统在MEAN stack中 :)

我希望你在阅读和/或跟随过程中感到愉快。如果你有兴趣进一步探索，这里是这个项目的git repo。

开发你的第一个MEAN栈应用程序最初发表在Nerd For Tech的Medium上，在那里人们通过强调和回应这个故事来继续对话。

avatar
文章
阅读
粉丝