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

IT技术 javascript mysql reactjs
2021-04-11 07:10:09

我已经使用 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);
  });
});

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

2个回答

你不能直接连接它们。

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

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

像这样的问题的一般解决方案是以下框架:

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

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

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

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

您将如何管理安全性,因为 React 应用程序和 Web 服务是两个不同的 URL,因此 cookie 将不起作用
2021-05-23 07:10:09
@djack109 事实上,一个正确部署的 React 应用程序源自与它对话的服务器相同的 URL。在此服务器中,您可以配置 cookie 的允许和相应的 CORS 设置,以使其能够很好地协同工作。如果您搜索术语“React”、“Deployment”、“CORS”和“Cookies”的任意组合,您将得到大量答案。
2021-06-13 07:10:09