你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

通过 React 和 Azure Cosmos DB 创建 MongoDB 应用

  • 项目

适用于： MongoDB

本视频教程包含多个部分，演示了如何使用 React 前端创建 hero 跟踪应用。 该应用使用适用于服务器的 Node 和 Express，连接到使用 Azure Cosmos DB 的 MongoDB API 配置的 Azure Cosmos DB 数据库，然后将 React 前端连接到应用的服务器部分。 本教程还演示了如何在 Azure 门户中对 Azure Cosmos DB 进行点击缩放，以及如何将应用部署到 Internet，方便每个人跟踪其最喜欢的 hero。

Azure Cosmos DB 支持与 MongoDB 的有线协议兼容性，让客户能用 Azure Cosmos DB 代替 MongoDB。

本教程分为多个部分，涵盖以下任务：

  • 简介
  • 设置项目
  • 通过 React 生成 UI
  • 使用 Azure 门户创建 Azure Cosmos DB 帐户
  • 使用 Mongoose 连接到 Azure Cosmos DB
  • 向应用添加响应、创建、更新和删除操作

想要通过 Angular 生成这个相同的应用？ 请参阅 Angular 教程视频系列。

先决条件

完成的项目

从 GitHub 获取完成的应用程序。

简介

在此视频中，Burke Holland 简单介绍了 Azure Cosmos DB，并详细讲解了在此视频系列中创建的应用。

项目设置

此视频介绍如何在同一项目中设置 Express 和 React。 Burke 随后详细介绍了项目中的代码。

生成 UI

此视频介绍如何使用 React 创建应用程序的用户界面 (UI)。

注意

可以在 react-cosmosdb GitHub 存储库中找到此视频中引用的 CSS。

连接到 Azure Cosmos DB

此视频介绍如何在 Azure 门户中创建 Azure Cosmos DB 帐户，安装 MongoDB 和 Mongoose 包，然后使用 Azure Cosmos DB 连接字符串将应用连接到新创建的帐户。

在应用中读取和创建 hero

此视频介绍如何在 Azure Cosmos DB 数据库中读取 hero 和创建 hero，以及如何使用 Postman 和 React UI 测试这些方法。

在应用中删除和更新 hero

此视频介绍如何在应用中删除和更新 hero，以及如何在 UI 中显示更新。

完成应用

此视频介绍如何完成应用，以及如何将 UI 挂接到后端 API。

清理资源

如果不打算继续使用此应用，请使用以下步骤删除本教程在 Azure 门户中创建的所有资源。

  1. 在 Azure 门户的左侧菜单中，单击“资源组” ，并单击已创建资源的名称。
  2. 在资源组页上单击“删除” ，在文本框中键入要删除的资源的名称，并单击“删除” 。

后续步骤

本教程介绍了如何：

  • 通过 React、Node、Express 和 Azure Cosmos DB 创建应用
  • 创建 Azure Cosmos DB 帐户
  • 将应用连接到 Azure Cosmos DB 帐户
  • 使用 Postman 测试应用
  • 运行应用程序并向数据库添加 hero

你可以继续学习下一教程，了解如何将 MongoDB 数据导入 Azure Cosmos DB 中。

将 MongoDB 数据导入 Azure Cosmos DB

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