React+Node.js+Express+MySQL构建CRUD应用 #15
Comments
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 示例概述我们将构建一个教程网站的全栈应用程序：
以下是应用的截图。
在此页面上，您可以：
React、Node.js Express、MySQL 架构我们将使用以下架构构建应用程序：
Node.js Express 后端概述这些是 Node.js Express App 将导出的 API：
项目结构
如果您想使用原始 SQL（不带 Sequelize），请访问： 该后端与本教程中的前端配合良好。 创建 Node.js 应用程序首先，我们创建一个文件夹： 接下来，我们使用package.json文件初始化 Node.js 应用程序： 我们需要安装必要的模块： 设置 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 应用程序，然后使用方法添加主体解析器（ 现在让我们使用命令运行应用程序 是的，第一步已经完成。我们将在下一节中使用 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 连接。
有关更多详细信息，请访问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.js ...
const app = express();
app.use(...);
const db = require("./app/models");
db.sequelize.sync();
...在开发中，您可能需要删除现有表并重新同步数据库。只需使用 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都支持：
这些函数将在我们的控制器中使用。 我们可以通过为每个教程添加注释来改进示例。这是一对多关系，我为此编写了一个教程： 或者，您可以为每个教程添加标签，并将教程添加到标签（多对多关系）： 创建控制器在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 Express 服务器使用命令运行我们的 Node.js 应用程序 React.js 前端概述– – – 这些组件调用 或者你可以将 React 与 Redux 结合使用： 更多详细信息，请访问：React Redux CRUD App example with Rest API 技术
项目结构– package.json包含 4 个主要模块： 对于 React Hooks 版本，请访问本教程。 对于打字稿版本： 请访问： 执行设置 React.js 项目在要保存Project的文件夹中打开cmd，运行命令： 流程完成后。我们创建其他文件夹和文件，如下树所示： 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 应用程序运行命令： 打开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 应用程序– 运行命令： 将导航栏添加到 React CRUD 应用程序打开src / App.js，该 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让我们使用命令安装axios import axios from "axios";
export default axios.create({
baseURL: "http://localhost:8080/api",
headers: {
"Content-type": "application/json"
}
});您可以更改 创建数据服务在此步骤中，我们将创建一个使用上面的 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 创建 React 组件/页面现在我们要构建 3 个组件，对应之前定义的 3 个路由。
您可以继续在帖子中逐步实现此 React 应用程序： 将 React 与 Redux 结合使用： 对于 Typescript 版本： 运行 React CRUD 应用程序您可以使用命令运行我们的应用程序： 源代码您可以在以下位置找到本教程的 Github 源代码：React + Node App Github 结论今天我们概述了构建全栈 CRUD 应用程序时的 React.js + Node.js Express + MySQL 示例。 我们还研究了使用 Express 和 Sequelize ORM 的 REST API 的客户端-服务器架构，以及用于构建前端应用程序以发出 HTTP 请求和使用响应的 React.js 项目结构。 接下来的教程将向您展示有关如何实现该系统的更多详细信息（包括源代码）： - 前端：
您将想知道如何在一个地方运行这两个项目： 使用分页： 或者使用 Firebase 进行无服务器： 祝学习愉快，再见！ |
https://www.bezkoder.com/react-node-express-mysql/
The text was updated successfully, but these errors were encountered: