Javascript 如何将 MySQL 数据库连接到 ReactJS 应用程序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54325397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to connect MySQL database to ReactJS app?
提问by Iskender Berdiev
I have build a Todo App with create-react-app. The store I'm using is based on Local Storage(JS attribute of object window). Now I created a MySQL databases and want to connect to that database, so the state will show the values from database, and will be updated through actions.
我已经使用 create-react-app 构建了一个 Todo 应用程序。我使用的存储基于本地存储（对象窗口的 JS 属性）。现在我创建了一个 MySQL 数据库并想连接到该数据库，因此状态将显示数据库中的值，并将通过操作进行更新。
I've tried to connect to db and output values through 'node' console using db.js. It works.
我尝试使用 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);
});
});
Is it possible to connect the state of app to database using this script?
是否可以使用此脚本将应用程序的状态连接到数据库？
回答by Quentin
You can't connect them directly.
你不能直接连接它们。
JavaScript running in a web browser cannot speak the MySQL protocol (nor can it make rawnetwork connections that would be needed to write an implementation in JS).
在 Web 浏览器中运行的 JavaScript 不能使用 MySQL 协议（也不能建立在 JS 中编写实现所需的原始网络连接）。
Instead, create a web service (in the programming language of your choice, which could be JavaScript running on Node.js (e.g. the code you have already + Express.js + some glue) and use Ajax to communicate with it.
相反，创建一个 Web 服务（使用您选择的编程语言，可以是在 Node.js 上运行的 JavaScript（例如，您已经拥有的代码 + Express.js + 一些胶水）并使用 Ajax 与其进行通信。
回答by Thomas Brok
The general solution for a question like this is the following framework:
像这样的问题的一般解决方案是以下框架：
- Back-end (Node.js, Express, Database connection including authorization)
- Front-end (React(, Redux to manage state))
- 后端（Node.js、Express、包括授权的数据库连接）
- 前端（React（，Redux 来管理状态））
If you then launch the React app, it should populate its state based on data retrieved from the database, which is a process to which you can add authorization (make retrievable data depend on the role/status of the user).
如果您随后启动 React 应用程序，它应该根据从数据库中检索到的数据填充其状态，这是一个您可以添加授权的过程（使可检索数据取决于用户的角色/状态）。
In the back-end you can define functions that take in a certain subset of parameters, which performs database actions, to which you can add business rules for your application. The React app then just sends HTTP requests to the Express server, which handles everything that needs verification and authorization before even touching the data.
在后端，您可以定义接受特定参数子集的函数，这些参数执行数据库操作，您可以向其中添加应用程序的业务规则。然后 React 应用程序只向 Express 服务器发送 HTTP 请求，该服务器甚至在接触数据之前处理需要验证和授权的所有内容。
If you search the internet for any configuration of a fullstack architecture using React and MySQL, you'll find similar results to what I mentioned.
如果您在 Internet 上搜索使用 React 和 MySQL 的全栈架构的任何配置，您会发现与我提到的类似的结果。
