React + Node.js + MySQL CRUD 示例

进一步阅读

在本教程中，我将向您展示如何使用 Express 构建全栈 React + Node.js + MySQL CRUD 示例。后端服务器使用 Node.js + Express 实现 REST API，前端是一个包含 React Router、Axios 和 Bootstrap 的 React.js 客户端。

全文：https://bezkoder.com/react-node-express-mysql/

React + Node.js + MySQL CRUD 示例概述

我们将构建一个全栈教程应用程序，其中：

教程有id、标题、描述、发布状态。
用户可以创建、检索、更新、删除教程。
有一个搜索框可以按标题查找教程。

以下是示例的屏幕截图。

– 添加项目：

– 显示所有项目：

– 单击“编辑”按钮查看项目的详细信息：

在此页面，您可以：

使用“发布/未发布”按钮将状态更改为“已发布/待发布”
使用删除按钮从 MySQL 数据库中删除对象
使用“更新”按钮更新数据库中此对象的详细信息

按字段“标题”搜索对象：

检查MySQL数据库：

React + Node.js + MySQL 架构

我们将按照以下架构构建应用程序：

– Node.js Express 导出 REST API 并使用 Sequelize ORM 与 MySQL 数据库交互。– React Client 使用Axios
发送 HTTP 请求并检索 HTTP 响应，并在组件上使用数据。React Router 用于导航到页面。

视频

这是我们的 React Node.js Express Sequelize 应用程序演示（带有简要说明），使用 MySQL 数据库运行。

Node.js Express 后端

这些是 Node.js Express App 将导出的 API：

方法	网址	行动
得到	API/教程	获取所有教程
得到	api/教程/：id	获取教程`id`
邮政	API/教程	添加新教程
放	api/教程/：id	更新教程`id`
删除	api/教程/：id	删除教程`id`
删除	API/教程	删除所有教程
得到	api/教程？标题=[kw]	查找标题包含以下内容的所有教程`'kw'`