如何将 MySQL 数据库连接到 ReactJS 应用程序？答案

【问题标题】：How to connect MySQL database to ReactJS app?如何将 MySQL 数据库连接到 ReactJS 应用程序？
【发布时间】：2019-06-16 22:25:33
【问题描述】：

我已经使用 create-react-app 构建了一个 Todo 应用程序。我正在使用的商店基于本地存储（对象窗口的 JS 属性）。现在我创建了一个 MySQL 数据库并希望连接到该数据库，因此状态将显示数据库中的值，并将通过操作进行更新。

我尝试使用 db.js 通过“节点”控制台连接到数据库并输出值。它有效。

const mysql = require('mysql');

const con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "root",
  database: 'root'
});

con.connect(function(err) {
  if (err) throw err;
  con.query("SELECT * FROM tasks", function (err, result, fields) {
    if (err) throw err;
    console.log(result);
  });
});

是否可以使用此脚本将应用程序的状态连接到数据库？

【问题讨论】：

从不让您的 Web 应用程序以 root 身份登录数据库。 Root 可以为所欲为，因此，如果您的应用程序有任何漏洞，这只会让您的数据库成为黑客的开放书。而是专门为此应用程序创建一个单独的用户帐户，该帐户仅具有它实际需要才能正常工作的权限。甚至不要在开发或测试期间使用 root 帐户作为快捷方式，因为您还需要测试您的帐户权限 - 否则当您上线时，您可能会遇到与用户帐户设置相关的意外错误。
“是否可以连接应用程序的状态” ...您必须更详细地解释您的意思以及您关心的问题。基本上，您可以将任何您希望的数据写入数据库，也可以从中读出您希望的任何数据。数据可以表示任何类型的状态，或您想要的任何其他信息。由你决定。 NodeJS 是 React 前端和数据库服务器之间的中间步骤——它接收来自前端的请求，查询数据库并返回结果。这是一个非常标准的 Web 应用程序设置。

标签： javascript mysql reactjs

【解决方案1】：

你不能直接连接它们。

在 Web 浏览器中运行的 JavaScript 无法使用 MySQL 协议（也无法建立在 JS 中编写实现所需的原始网络连接）。

相反，创建一个 Web 服务（使用您选择的编程语言，可以是在 Node.js 上运行的 JavaScript（例如，您已经拥有的代码 + Express.js + 一些胶水）并使用 Ajax 与其通信。

【讨论】：

【解决方案2】：

此类问题的一般解决方案是以下框架：

后端（Node.js、Express、数据库连接，包括授权）
前端（React(, Redux 来管理状态)）

如果您随后启动 React 应用程序，它应该根据从数据库中检索到的数据填充其状态，这是您可以添加授权的过程（使可检索数据取决于用户的角色/状态）。

在后端，您可以定义接收特定参数子集的函数，这些函数执行数据库操作，您可以向其中添加应用程序的业务规则。然后，React 应用程序只需将 HTTP 请求发送到 Express 服务器，该服务器会在接触数据之前处理所有需要验证和授权的事情。

如果您在互联网上搜索使用 React 和 MySQL 的全栈架构的任何配置，您会发现与我提到的类似的结果。

【讨论】：

您将如何管理安全性，因为 React 应用程序和 Web 服务是两个不同的 URL，因此 cookie 无法工作
@djack109 事实上，一个正确部署的 React 应用程序源自与其通信的服务器相同的 URL。在此服务器中，您可以配置 cookie 的允许和相应的 CORS 设置，以使其很好地协同工作。如果您搜索术语“React”、“Deployment”、“CORS”和“Cookies”的任意组合，您会得到大量答案。