使用英语阅读

通过

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

  • 项目
  • 2024/11/11

适用对象： 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 教程视频系列。

先决条件

  • Node.js
  • HTTP 测试工具
    • 建议使用 Insomnia、curl、Visual Studio 或 Invoke-RestMethod

完成的项目

从 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，以及如何使用 HTTP 测试实用工具和 React UI 测试这些方法。

在应用中删除和更新 hero

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

完成应用

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

清理资源

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

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

后续步骤

本教程介绍了如何：

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

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

将 MongoDB 数据导入 Azure Cosmos DB

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

其他资源

文档