React+Node.js+Express+MySQL构建CRUD应用

[JayFate]

React+Node.js+Express+MySQL构建CRUD应用

[JayFate]

React + Node.js + Express + MySQL 示例：构建 CRUD 应用程序

在本文中，我们将使用 React + Node.js + Express + MySQL CRUD 构建一个全栈应用。使用 Node.js + Express 来实现 REST API 后端 server，使用 React Router、Axios 和 Bootstrap 来开发 React.js 前端客户端。

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

我们将构建一个教程网站的全栈应用程序：

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

以下是应用的截图。

• 添加项目：

• 显示所有项目：

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

在此页面上，您可以：

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

• 按字段标题搜索对象：

• 检查MySQL数据库：

React、Node.js Express、MySQL 架构

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

• Node.js Express 导出 REST API 并使用 Sequelize ORM 与 MySQL 数据库交互。

• React 客户端使用 Axios 发送 HTTP 请求并获取 HTTP 响应，使用组件渲染数据。使用React Router导航页面。

Node.js Express 后端

概述

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

Methods	Urls	Actions
GET	api/tutorials	获取所有教程
GET	api/tutorials/:id	获取教程id
POST	api/tutorials	添加新教程
PUT	api/tutorials/:id	更新教程通过id
DELETE	api/tutorials/:id	删除教程通过id
DELETE	api/tutorials	删除所有教程
GET	api/tutorials?title=[kw]	查找标题包含的所有教程'kw'

项目结构

• db.config.js : 导出 MySQL 连接和 Sequelize 的配置参数。
• server.js : Express server，其中配置了 CORS、初始化并运行 Express REST API。
• 接下来，我们在models/index.js 中添加 MySQL 数据库的配置，在 models/tutorial.model.js 中创建Sequelize 数据模型。
• controllers 中的 Tutorial controller
• 在 tutorial.routes.js 中定义处理所有 CRUD 操作（包括自定义查找器）的路由。

如果您想使用原始 SQL（不带 Sequelize），请访问：
使用 Express 和 MySQL 构建 Node.js Rest API

该后端与本教程中的前端配合良好。

创建 Node.js 应用程序

首先，我们创建一个文件夹：

$ mkdir nodejs-express-sequelize-mysql
$ cd nodejs-express-sequelize-mysql

接下来，我们使用package.json文件初始化 Node.js 应用程序：

npm init

name: (nodejs-express-sequelize-mysql) 
version: (1.0.0) 
description: Node.js Rest Apis with Express, Sequelize & MySQL.
entry point: (index.js) server.js
test command: 
git repository: 
keywords: nodejs, express, sequelize, mysql, rest, api
author: bezkoder
license: (ISC)

Is this ok? (yes) yes

我们需要安装必要的模块：express、sequelize和mysql2。 运行命令：cors

npm install express sequelize mysql2 cors --save

设置 Express Web 服务器

在根文件夹中，我们创建一个新的server.js文件：

const express = require("express");
const cors = require("cors");

const app = express();

var corsOptions = {
  origin: "http://localhost:8081"
};

app.use(cors(corsOptions));

// parse requests of content-type - application/json
app.use(express.json());

// parse requests of content-type - application/x-www-form-urlencoded
app.use(express.urlencoded({ extended: true }));

// simple route
app.get("/", (req, res) => {
  res.json({ message: "Welcome to bezkoder application." });
});

// set port, listen for requests
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}.`);
});

我们所做的是：
– 导入express和cors模块：

• Express 用于构建 Rest api
• cors提供了 Express 中间件来启用具有各种选项的 CORS。

– 创建一个 Express 应用程序，然后使用方法添加主体解析器（json和urlencoded）和cors中间件app.use()。请注意，我们设置了 origin: http://localhost:8081。
– 定义一个易于测试的GET路由。
– 在端口 8080 上侦听传入请求。

现在让我们使用命令运行应用程序node server.js：使用 url http://localhost:8080/
打开浏览器，您将看到：

是的，第一步已经完成。我们将在下一节中使用 Sequelize。

配置 MySQL 数据库 & Sequelize

在app文件夹中，我们创建一个单独的config文件夹，用于使用db.config.js文件进行配置，如下所示：

module.exports = {
  HOST: "localhost",
  USER: "root",
  PASSWORD: "123456",
  DB: "testdb",
  dialect: "mysql",
  pool: {
    max: 5,
    min: 0,
    acquire: 30000,
    idle: 10000
  }
};

前五个参数用于 MySQL 连接。
pool是可选的，它将用于 Sequelize 连接池配置：

• max：池中的最大连接数
• min：池中的最小连接数
• idle：连接在释放之前可以空闲的最长时间（以毫秒为单位）
• acquire：该池在抛出错误之前尝试获取连接的最长时间（以毫秒为单位）

有关更多详细信息，请访问Sequelize 构造函数的 API 参考。

初始化序列

我们将在app / models文件夹中初始化 Sequelize，该文件夹将在下一步中包含模型。

现在使用以下代码创建app / models / index.js ：

const dbConfig = require("../config/db.config.js");

const Sequelize = require("sequelize");
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
  host: dbConfig.HOST,
  dialect: dbConfig.dialect,
  operatorsAliases: false,

  pool: {
    max: dbConfig.pool.max,
    min: dbConfig.pool.min,
    acquire: dbConfig.pool.acquire,
    idle: dbConfig.pool.idle
  }
});

const db = {};

db.Sequelize = Sequelize;
db.sequelize = sequelize;

db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize);

module.exports = db;

不要忘记调用server.jssync()中的方法：

...
const app = express();
app.use(...);

const db = require("./app/models");
db.sequelize.sync();

...

在开发中，您可能需要删除现有表并重新同步数据库。只需使用force: true如下代码：

db.sequelize.sync({ force: true }).then(() => {
  console.log("Drop and re-sync db.");
});

定义 Sequelize 模型

在models文件夹中，创建tutorial.model.js文件，如下所示：

module.exports = (sequelize, Sequelize) => {
  const Tutorial = sequelize.define("tutorial", {
    title: {
      type: Sequelize.STRING
    },
    description: {
      type: Sequelize.STRING
    },
    published: {
      type: Sequelize.BOOLEAN
    }
  });

  return Tutorial;
};

这个 Sequelize 模型代表MySQL 数据库中的教程表。这些列将自动生成：id、title、description、published、createdAt、updatedAt。

初始化Sequelize后，我们不需要编写CRUD函数，Sequelize都支持：

• 创建一个新教程：create(object)
• 通过 id 查找教程：findByPk(id)
• 获取所有教程：findAll()
• 按 id 更新教程：update(data, where: { id: id })
• 删除教程：destroy(where: { id: id })
• 删除所有教程：destroy(where: {})
• 按标题查找所有教程：findAll({ where: { title: ... } })

这些函数将在我们的控制器中使用。

我们可以通过为每个教程添加注释来改进示例。这是一对多关系，我为此编写了一个教程：
Sequelize Associations: One-to-Many example – Node.js, MySQL

或者，您可以为每个教程添加标签，并将教程添加到标签（多对多关系）：
Sequelize Many-to-Many Association example with Node.js & MySQL

创建控制器

在app / controllers文件夹中，让我们使用这些 CRUD 函数创建tutorial.controller.js ：

• 创造
• 找到所有
• 找一个
• 更新
• 删除
• 删除所有
• 查找所有已发布的内容

const db = require("../models");
const Tutorial = db.tutorials;
const Op = db.Sequelize.Op;

// Create and Save a new Tutorial
exports.create = (req, res) => {
  
};

// Retrieve all Tutorials from the database.
exports.findAll = (req, res) => {
  
};

// Find a single Tutorial with an id
exports.findOne = (req, res) => {
  
};

// Update a Tutorial by the id in the request
exports.update = (req, res) => {
  
};

// Delete a Tutorial with the specified id in the request
exports.delete = (req, res) => {
  
};

// Delete all Tutorials from the database.
exports.deleteAll = (req, res) => {
  
};

// Find all published Tutorials
exports.findAllPublished = (req, res) => {
  
};

您可以继续在帖子中逐步实现此 Node.js Express 应用程序：
Node.js Rest APIs example with Express, Sequelize & MySQL

运行 Node.js Express 服务器

使用命令运行我们的 Node.js 应用程序node server.js：
控制台显示：

Server is running on port 8080.
Executing (default): DROP TABLE IF EXISTS `tutorials`;
Executing (default): CREATE TABLE IF NOT EXISTS `tutorials` (`id` INTEGER NOT NULL auto_increment , `title` VARCHAR(255), `description` VARCHAR(255), `published` TINYINT(1), `createdAt` DATETIME NOT NULL, `updatedAt` DATETIME NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB;
Executing (default): SHOW INDEX FROM `tutorials`
Drop and re-sync db.

React.js 前端

概述

–App组件是一个包含 React 的容器Router。它具有navbar到路由路径的链接。

–TutorialsList组件获取并显示教程。
–Tutorial组件具有用于编辑基于:id.
–AddTutorial组件具有用于提交新教程的表单。

– 这些组件调用TutorialDataService用于发出 HTTP 请求和接收响应的方法axios。

或者你可以将 React 与 Redux 结合使用：

更多详细信息，请访问：React Redux CRUD App example with Rest API

技术

• 反应 18/17
• 反应路由器 dom 6
• axios 0.27.2
• 引导程序4

项目结构

– package.json包含 4 个主要模块：react, react-router-dom, axios& bootstrap。
–App是具有 & 导航栏的容器Router。
– 有 3 个组成部分：TutorialsList、Tutorial、AddTutorial。
– http-common.js使用 HTTP 基本 Url 和标头初始化 axios。
–TutorialDataService具有向 API 发送 HTTP 请求的方法。
– .env为此 React CRUD 应用程序配置端口。

对于 React Hooks 版本，请访问本教程。

对于打字稿版本：

请访问：
使用 Web API 的 React Typescript CRUD 示例

执行

设置 React.js 项目

在要保存Project的文件夹中打开cmd，运行命令：
npx create-react-app react-crud

流程完成后。我们创建其他文件夹和文件，如下树所示：

 public

 src

 components

 add-tutorial.component.js

 tutorial.component.js

 tutorials-list.component.js

 services

 tutorial.service.js

 App.css

 App.js

 index.js

 package.json

---

将 Bootstrap 导入到 React CRUD 应用程序

运行命令：npm install bootstrap.

打开src / App.js并修改其中的代码如下 -

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

class App extends Component {
  render() {
    // ...
  }
}

export default App;

将 React Router 添加到 React CRUD 应用程序

– 运行命令：npm install react-router-dom。
– 打开src / index.js并按对象包装App组件BrowserRouter。

import React from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";

import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container);

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

将导航栏添加到 React CRUD 应用程序

打开src / App.js，该App组件是我们应用程序的根容器，它将包含一个navbar，以及一个Routes带有多个Route. 每个都Route指向一个 React 组件。

import React, { Component } from "react";
...

class App extends Component {
  render() {
    return (
      <div>
        <nav className="navbar navbar-expand navbar-dark bg-dark">
          <a href="/tutorials" className="navbar-brand">
            bezKoder
          </a>
          <div className="navbar-nav mr-auto">
            <li className="nav-item">
              <Link to={"/tutorials"} className="nav-link">
                Tutorials
              </Link>
            </li>
            <li className="nav-item">
              <Link to={"/add"} className="nav-link">
                Add
              </Link>
            </li>
          </div>
        </nav>

        <div className="container mt-3">
          <Routes>
            <Route path="/" element={<TutorialsList/>} />
            <Route path="/tutorials" element={<TutorialsList/>} />
            <Route path="/add" element={<AddTutorial/>} />
            <Route path="/tutorials/:id" element={<Tutorial/>} />
          </Routes>
        </div>
      </div>
    );
  }
}

export default App;

为 React CRUD HTTP 客户端初始化 Axios

让我们使用命令安装axiosnpm install axios：
在src文件夹下，我们使用以下代码创建http-common.js文件：

import axios from "axios";

export default axios.create({
  baseURL: "http://localhost:8080/api",
  headers: {
    "Content-type": "application/json"
  }
});

您可以更改baseURL取决于您的服务器配置的 REST API url。

创建数据服务

在此步骤中，我们将创建一个使用上面的 axios 对象发送 HTTP 请求的服务。

服务/tutorial.service.js _

import http from "../http-common";

class TutorialDataService {
  getAll() {
    return http.get("/tutorials");
  }

  get(id) {
    return http.get(`/tutorials/${id}`);
  }

  create(data) {
    return http.post("/tutorials", data);
  }

  update(id, data) {
    return http.put(`/tutorials/${id}`, data);
  }

  delete(id) {
    return http.delete(`/tutorials/${id}`);
  }

  deleteAll() {
    return http.delete(`/tutorials`);
  }

  findByTitle(title) {
    return http.get(`/tutorials?title=${title}`);
  }
}

export default new TutorialDataService();

我们调用 axios get、post、put、delete对应 HTTP 请求：GET、POST、PUT、DELETE 的方法来进行 CRUD 操作。

创建 React 组件/页面

现在我们要构建 3 个组件，对应之前定义的 3 个路由。

• 添加新项目
• 物品清单
• 商品详情

您可以继续在帖子中逐步实现此 React 应用程序：
–使用 Web API 的 React.js CRUD 示例
– 或使用 Web API 的 React Hooks CRUD 示例

将 React 与 Redux 结合使用：
–使用 Rest API 的 React Redux CRUD 示例
– React Hooks + Redux：使用 Rest API 的 CRUD 示例

对于 Typescript 版本：
使用 Web API 的 React Typescript CRUD 示例

运行 React CRUD 应用程序

您可以使用命令运行我们的应用程序：npm start。
如果该过程成功，请使用 Url: 打开浏览器http://localhost:8081/并检查它。

源代码

您可以在以下位置找到本教程的 Github 源代码：React + Node App Github

结论

今天我们概述了构建全栈 CRUD 应用程序时的 React.js + Node.js Express + MySQL 示例。

我们还研究了使用 Express 和 Sequelize ORM 的 REST API 的客户端-服务器架构，以及用于构建前端应用程序以发出 HTTP 请求和使用响应的 React.js 项目结构。

接下来的教程将向您展示有关如何实现该系统的更多详细信息（包括源代码）：
– 后端：

• 使用 Sequelize ORM
• 没有续集

- 前端：

• 使用 React 组件
• 使用 React Typescript 组件
• 使用 React Redux
• 使用反应钩子
• 使用 React Hooks + Redux
• 将 React 与 Material UI 结合使用

您将想知道如何在一个地方运行这两个项目：
如何在同一服务器/端口上将 React 与 Node.js Express 集成

使用分页：
使用 Material-UI 通过 API 来响应分页

或者使用 Firebase 进行无服务器：
– React Firebase CRUD 与实时数据库
– React Firestore CRUD 应用程序示例 | Firebase 云 Firestore

祝学习愉快，再见！