Question

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

我尝试使用db.js通过“节点”控制台连接到db并输出值。可以。

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);
  });
});

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

Answer 1

您不能直接连接它们。

在网络浏览器中运行的JavaScript不能说MySQL协议（也不能建立使用JS编写实现所需的 raw 网络连接”。

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

Answer 2

对于那些同样感到头痛的人，我发现了两篇非常有用的文章： Code Your First API With Node.js and Express: Set Up the Server，以及 Code Your First API With Node.js and Express: Connect a Database

Answer 3

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

后端（Node.js，Express，包括授权的数据库连接）
前端（React（，Redux以管理状态））

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

在后端，您可以定义包含某些参数子集的函数，这些子集执行数据库操作，并可以向其中添加应用程序的业务规则。然后，React应用程序只是将HTTP请求发送到Express服务器，该服务器处理甚至在触摸数据之前需要进行验证和授权的所有内容。

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

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

3 个答案: