Reactjs Nodejs MongoDB CRUD 示例 – MERN 堆栈应用程序

教程位于:Reactjs Nodejs MongoDB CRUD 示例

在本教程中,我将介绍如何在 Ajax 的帮助下构建一个“React.js Nodejs CRUD MongoDB 示例”项目,并通过分步编码示例来发送/获取/放置/删除请求:

– Nodejs 项目使用 Mongoose ODM 的支持生成带有 MongoDB 数据库的 CRUD RestAPI。

– React.js 项目将通过 Ajax 使用 Nodejs CRUD RestAPI,然后显示在 Reactjs 组件的视图中。

待办事项清单:

– 我通过 Node Js Rest API 后端绘制了从 React.js 前端到 MongoDB 数据库的完整堆栈概览图架构。

– 在 Mongoose ODM 的支持下开发 Nodejs CRUD RestAPI。

– 使用 Ajax 获取 API 实现 Reactjs CRUD 应用程序,以向 Nodejs 后端 API 执行 CRUD 请求(Post/Get/Put/Delete)。

– 我创建了一个包含许多集成测试用例的测试套件,其中包含来自 Reactjs 的 CRUD RestAPI 请求,以对 Node Js Rest APIs Server 执行 CRUD 请求并将数据保存/检索到 MongoDB 数据库。

整体架构体系:Reactjs + Nodejs + MongoDB

[](https://res.cloudinary.com/practicaldev/image/fetch/s--tQkgXzu8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// loizenai.com/wp-content/uploads/2020/11/React.js-Nodejs-MongoDB-Diagram-Architecture.png)

• 我们构建了一个后端:Nodejs CRUD Application with MongoDB,它为 POST/GET/PUT/DELETE 数据实体提供 RestAPI,并将它们存储在 MongoDB 数据库中。

• 我们实现了 React.js CRUD 应用程序,它使用 Ajax 与 Nodejs CRUD 应用程序交互(调用/接收请求)并在 Reactjs 组件中显示相应的数据。

Nodejs MongoDB CRUD 设计应用

[](https://res.cloudinary.com/practicaldev/image/fetch/s--K7GBLi4q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://loizenai .com/wp-content/uploads/2020/11/Nodejs-MongoDB-CRUD-Example.png)

我们有 4 个主要的应用程序块:

• 为了在 Nodejs 应用程序中构建 RestAPI,我们使用 Express 框架。

• 为了与数据库 MongoDB 交互,我们使用 Mongoose ODM。

• 我们在 router.js 文件中定义 APIs URL

• 我们在controller.js文件中实现了如何处理每个API URL

• 我们使用 Bootstrap 和 JQuery Ajax 来实现前端客户端。

Reactjs CRUD 应用程序设计

[](https://res.cloudinary.com/practicaldev/image/fetch/s--QC--CyS---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https: //loizenai.com/wp-content/uploads/2020/11/Reactjs-CRUD-RestAPI-Application-Frontend-Architecture-Diagram-4.png)

• 个 React.js 组件让您可以将 UI 拆分为独立的、可重用的部分,并单独考虑每个部分。

• Reactjs组件使用Ajax通过http请求从远程restapi获取(post/put/get/delete)数据

Reactjs CRUD Application 定义了 5 个组件:

• Home.js 用作您的应用程序的登录页面。

• AppNavbar.js 用于在组件之间建立通用的 UI 功能。

• CustomerList.js 用于显示网页中的所有客户

• Customer Edit.js 用于修改现有客户

• App.js 使用 React Router 在组件之间导航。

综合项目目标

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ERmcW8n0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://loizenai.com /wp-content/uploads/2020/11/Project-Goal-Customer-List-3.png)

教程:Reactjs Nodejs MongoDB CRUD 示例

相关文章:

• Reactjs CRUD Firebase 实时数据库示例

• Reactjs JWT 认证示例

• Reactjs Nodejs PostgreSQL 示例

• Reactjs Nodejs MongoDB CRUD 示例 – MERN 堆栈应用程序