65.9K
CodeProject 正在变化。 阅读更多。
Home

MEAN 堆栈专业应用程序开发 - 第 1 部分

Yaseer Mumtaz
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2018 年 3 月 15 日

CPOL

7分钟阅读

viewsIcon

9651

这是一个系列文章，我们将使用 MEAN 栈开发专业网站，并最终将其部署到服务器。首先，我们将使用 Angular 5 开发一个静态网站，并仅使用 node.js 在服务器上运行该网站。

Content

第 1 部分：基本项目设置

第 2 部分：创建布局和主页

引言

我将重新设计一个我在 2010-2011 年开发的网站，并考虑使用 MEAN 栈进行开发。我认为，如果我列出开发过程中的所有步骤，对学生和初学者会很有帮助。所以，这就是计划：

  • 我将开始使用 Angular 5 设计网站，并使用 node.js 在服务器上运行它。这将是一个没有数据库的静态网站，我们将以此作为基础。
  • 接下来，我将把它部署到我的现有域的 DigitalOcean 虚拟专用服务器上。
  • 稍后，我们将开发一个小型内容管理系统来动态控制网站内容，我们将通过用户名和密码来保护内容管理访问，并称之为管理区。
  • 我们将使用 MongoDB 作为后端数据库，并学习如何使用 Mongoose (MongoDB 对象建模) 来验证和插入数据。
  • 我们将使用 Express.js 来公开 RESTful API，并使用 Passport.js 和 JWT 来在服务器端（node.js）进行请求认证。

请记住，这不是一个预先开发好的计划项目，我可能会在开发过程中根据需要添加或删除代码，所以请做好准备。完成这个系列可能需要几周的时间，因为我是在业余时间进行的。在整个系列结束后，您将能够创建专业的 MEAN 栈应用程序。

仍然感兴趣吗？

可选

尽管我会解释开发的每一步，但如果您阅读我写的以下关于 Angular 和 node.js 的文章，将对您有一个基本的了解非常有帮助。

设置开发环境

请确保您的系统上已安装以下软件以用于静态网站。当我们开始实现带 MongoDB 的动态网站时，我们会安装更多软件。

  • Visual Studio Code
  • Node.js
  • 安装 node.js 后，打开命令提示符并键入命令 node -v 来检查安装是否成功以及 node 版本。
  • 打开命令提示符并运行命令：npm install -g @angular/cli 来安装 Angular CLI。Angular CLI 是一个命令行界面，用于创建 Angular 项目、组件、类、接口和构建。

开始吧

  1. 第一步是为您的网站创建一个文件夹，随便在您电脑上的任何地方创建一个文件夹。我将创建一个名为 mazharnco 的文件夹，并在该文件夹中再创建一个名为 server 的文件夹。server 文件夹是用于 node.js 的。
  2. 接下来，我们将使用 Angular CLI 创建 Angular 5 项目。打开命令提示符（Ctrl+ R 打开运行，然后输入 cmd 打开命令提示符）。
  3. 浏览新创建的项目文件夹，例如，cd c:/projects/mazharnco 并运行命令：ng new mazharncoweb 并等待几分钟。此命令将生成基本的 Angular 5 项目，并将所有必需的包下载到 node_modules 文件夹中。太好了，它确实为我们提供了一个开始项目开发的基线。
  4. 现在，暂时忘记 server 文件夹。让我们探索 mazharncoweb 文件夹，您会在其中看到几个文件夹和文件。让我们了解重要的部分。
    1. node_modules：所有具有某些功能的包/库，用于促进我们的 Angular 应用程序开发，事实上，Angular 中一切都是库。稍后，如果我们发现需要任何功能，我们将安装可以提供帮助的包。只需搜索您需要的东西，例如，搜索 angular share social，您会找到 social-share-ng2 链接，它会清楚地告诉您如何安装和使用此包。
    2. src：在 src 文件夹中，我们还有两个文件夹；app 和 assets。在 assets 文件夹中，您可以保存所有静态文件，例如图像、第三方 CSS 和任何其他辅助文件。app 文件夹将包含我们应用程序的所有组件、模块和服务。通常，我会在 app 文件夹中创建更多文件夹来分离应用程序的模块，您将在后续步骤中看到。
    3. environment：environment 文件夹有两个文件，environment.prod.ts 和 environment.ts，您可以在其中放置特定于环境的设置。如果您来自 .NET 背景，这与 app.config 和 app.Relase.config 等相同。我们将在后续步骤中使用它。
    4. 其余的是用于配置和运行应用程序的辅助文件。
  5. 好的，我已经在纸上设计好了网站，我们跳过这部分，直接进入开发。打开您的 Visual Studio Code，选择 **文件 -> 打开** 文件夹菜单项，找到 mazharnco 文件夹，然后点击 **选择文件夹** 按钮。在左侧的 Explorer 面板中，您应该看到两个文件夹，mazharncoweb 和 server。（如果未显示 Explorer 面板，请从顶部菜单中选择“视图”，然后选择“Explorer”菜单项。）
  6. 如果将右侧面板的底部栏向上拖动（如果尚未拖起），您将看到 **PROBLEMS**、**OUTPUT**、**DEBUG CONSOLE** 和 **TERMINAL** 选项卡。我主要使用 TERMINAL，它实际上是一个命令提示符，您可以通过点击右角上的 + 打开任意数量的命令提示符面板，并通过点击垃圾桶图标删除它们。使用下拉菜单在不同的打开面板之间切换。通常，我使用两个面板，一个用于 Angular，另一个用于 Node.js，但现在由于我们只开发 Angular 应用程序，所以只需要一个面板。我们将使用 Angular CLI 命令来创建不同的组件和构建，以及运行和打开服务器上的应用程序。
  7. 由于我们已经通过 Angular CLI 创建了一个基本的 Angular 应用程序，在 **TERMINAL** 选项卡中，输入命令：cd mazharncoweb，然后输入 ng build serve -o 来构建应用程序并在您的默认浏览器中打开它。稍等片刻，您就会在浏览器中看到正在运行的应用程序，地址为 https://:4200，显示一些默认的 Angular 页面。这意味着我们的 Angular 应用程序工作正常。
  8. 我刚尝试了步骤 7，遇到了这个错误：Error: Cannot find module '@angular-devkit/core' .... ，为了修复它，我遵循了以下说明：
    1. 运行命令：npm update -g @angular/cli
    2. 运行命令：npm install
    3. 它开始工作了，如果您仍然有问题，请告诉我。（如果您只是按照之前的步骤安装了 Angular CLI，应该不会出现这个问题。）
  9. 接下来，我们将添加 Angular Material 包，这个包包含一些很酷的 UI 组件，我们将在应用程序中使用它们，例如表单控件、文本框、日期控件、卡片等。在 Chrome 浏览器中，模态弹出框、文本框、下拉列表等控件都类似于 Angular Material UI 控件。
  10. 让我们安装 Angular Material 组件（请遵循步骤）。
    1. 将底部面板向上拖动，进入 cd mazharncoweb 文件夹（如果它还没有指向那里）。
    2. 运行命令：npm install --save @angular/material @angular/cdk
    3. 运行命令：npm install --save @angular/animations
    4. 编辑 mazharncoweb -> src -> style.css 文件并添加一行：@import "~@angular/material/prebuilt-themes/indigo-pink.css";
    5. 运行命令：npm install --save hammerjs
  11. 安装 Angular Material 包后，让我们将其添加到 AppModule 中，以便我们可以在应用程序中使用它。编辑 src -> app -> app.module.ts 文件并用以下内容替换其内容：
    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatStepperModule
} from '@angular/material';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatCardModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatTabsModule,
    MatSortModule,
    MatPaginatorModule,
    MatTableModule,
    MatSnackBarModule,
    MatIconModule,
    MatDialogModule,
    MatAutocompleteModule,
    MatGridListModule,
    MatMenuModule,
    MatProgressBarModule,
    MatExpansionModule,
    MatTooltipModule,
    MatSlideToggleModule,
],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  12. 为了节省时间，我在 import 部分添加了所有 UI 组件，您可以在项目开发结束时删除未使用的组件。
  13. 接下来，编辑 src -> app -> main.ts 并用以下内容替换其内容：
    //main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import 'hammerjs'; Added for Angular Material
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));
  14. 根据我们的 Angular Material 安装步骤，让我们将 Material Icons 链接添加到 index.html 中。您最终的 src -> index.html 应该如下所示。稍后我们将添加其他内容。
    <!doctype html>
<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <meta charset="utf-8">
  <title>Mazhar and Co</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
  15. 我认为现在环境已经搭建好了。运行命令 ng serve -o，检查是否没有出现任何错误，并在浏览器中看到默认的 Angular CLI 页面。
  16. 让我们在第 2 部分继续开发。
© . All rights reserved.