适用于: MongoDB

本教程包含多个部分,演示了如何通过 Express 和 Angular 创建以 Node.js 编写的新应用,然后将其连接到 使用 Azure Cosmos DB 的 API for MongoDB 配置的 Azure Cosmos DB 帐户

本教程的第 2 部分基于 简介 ,涵盖以下任务:

  • 安装 Angular CLI 和 TypeScript
  • 使用 Angular 创建新项目
  • 使用 Express 框架生成应用
  • 在 Postman 中测试应用
  • 在开始教程的此部分之前,请确保已观看 简介视频

    本教程还需要:

  • Node.js 8.4.0 或更高版本。
  • Postman
  • Visual Studio Code 或你喜欢用的代码编辑器。
  • 本教程介绍生成应用程序的各个步骤。 若要下载完成的项目,可从 GitHub 上的 angular-cosmosdb 存储库 获取完成的应用程序。

    安装 Angular CLI 和 TypeScript

  • 打开 Windows 命令提示符或 Mac Terminal 窗口并安装 Angular CLI。

    npm install -g @angular/cli
    
  • 在提示符处输入以下命令,安装 TypeScript。

    npm install -g typescript
    

    使用 Angular CLI 创建新项目

  • 在命令提示符处转到需在其中创建新项目的文件夹,然后运行以下命令。 此命令创建名为 angular-cosmosdb 的新文件夹和项目,并安装新应用所需的 Angular 组件。 它会使用最低设置 (--minimal),并指定该项目使用 Sass(一种带 --style scss 标志的类似 CSS 的语法)。

    ng new angular-cosmosdb --minimal --style scss
    
  • 完成该命令后,将目录转到 src/client 文件夹。

    cd angular-cosmosdb
    
  • 然后在 Visual Studio Code 中打开该文件夹。

    code .
    

    使用 Express 框架生成应用

  • 在 Visual Studio Code 的“资源管理器”窗格中,右键单击 src 文件夹,单击“新建文件夹”,然后将新文件夹命名为“server”。

  • 在“资源管理器”窗格中,右键单击“server”文件夹,单击“新建文件”,然后将新文件命名为“index.js”。

  • 回到命令提示符处,使用以下命令安装正文分析器。 这有助于应用分析通过 API 传入的 JSON 数据。

    npm i express body-parser --save
    
  • 将以下代码复制到 Visual Studio Code 的 index.js 文件中。 此代码:

  • 引用 Express
  • 拉入 body-parser,用于读取请求正文中的 JSON 数据
  • 使用称为 path 的内置功能
  • 设置根变量,方便查找代码所处位置
  • 启动 Express
  • 告知应用如何使用可以为服务器提供服务的中间件
  • 提供 dist 文件夹中将会成为静态内容的所有内容
  • 为应用程序提供服务,为服务器上找不到的任何 GET 请求提供 index.html(用于深层链接)
  • 通过 app.listen 启动服务器
  • 使用 arrow 函数来记录端口处于活动状态这一情况
  • const express = require('express');
    const bodyParser = require('body-parser');
    const path = require('path');
    const routes = require('./routes');
    const root = './';
    const port = process.env.PORT || '3000';
    const app = express();
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(express.static(path.join(root, 'dist/angular-cosmosdb')));
    app.use('/api', routes);
    app.get('*', (req, res) => {
      res.sendFile('dist/angular-cosmosdb/index.html', {root});
    app.listen(port, () => console.log(`API running on localhost:${port}`));
    
  • 在 Visual Studio Code 的“资源管理器”窗格中,右键单击 server 文件夹,然后单击“新建文件”。 将新文件命名为 routes.js。

  • 将以下代码复制到 routes.js 中。 此代码:

  • 引用 Express 路由器
  • 获取 hero
  • 发送回适用于已定义 hero 的 JSON
  • const express = require('express');
    const router = express.Router();
    router.get('/heroes', (req, res) => {
     res.send(200, [
        {"id": 10, "name": "Starlord", "saying": "oh yeah"}
    module.exports=router;
    
  • 保存所有修改过的文件。

  • 在 Visual Studio Code 中,单击“调试”按钮 ,单击“齿轮”按钮。 此时会在 Visual Studio Code 中打开新的 launch.json 文件。

  • 在 launch.json 文件的第 11 行将 "${workspaceFolder}\\server" 更改为 "program": "${workspaceRoot}/src/server/index.js",然后保存文件。

  • 单击“启动调试”按钮 运行该应用。

    应用应该正常运行。

    使用 Postman 来测试应用

  • 现在请打开 Postman,将 http://localhost:3000/api/heroes 置于 GET 框中。

  • 单击“发送”按钮,从应用获取 JSON 响应。

    该响应显示应用在本地启动并运行。

    尝试为迁移到 Azure Cosmos DB 进行容量规划? 可以使用有关现有数据库群集的信息进行容量规划。

  • 如果只知道现有数据库群集中的 vCore 和服务器数量,请阅读使用 vCore 或 vCPU 估算请求单位
  • 若知道当前数据库工作负载的典型请求速率,请阅读使用 Azure Cosmos DB 容量计划工具估算请求单位
  •