如何将我正在使用 webpack 构建的反应应用程序链接到 phpmyadmin 外部数据库并查询它而不在代码中显示我的数据库密码？

Posted 2023-02-24

【中文标题】如何将我正在使用 webpack 构建的反应应用程序链接到 phpmyadmin 外部数据库并查询它而不在代码中显示我的数据库密码？

【英文标题】：How do I link a react app I am building using webpack to a phpmyadmin external database and query it without showing my database password in the code?

【发布时间】：2019-11-25 12:46:49

【问题描述】：

所以我目前正在学习 react 和 webpack，以便我可以将它实现到我当前的站点中。我已经有一个已建立的 phpmyadmin 数据库，它可以输出我想出现在我的网站上的信息，但我不知道在编程时如何将我的用户名和密码隐藏到数据库中。我习惯于使用 php 与我的数据库总线进行交互，因为 react 纯粹是 javascript，我不知道该怎么做。

【参考方案1】：

您需要运行一个与您的数据库和您的 React 应用程序对话的服务器。听起来您可能以 PHP 应用程序的形式拥有它。您的 PHP 应用程序需要通过 HTTP 端点公开数据，然后您可以从 React 应用程序内部获取这些数据。

本教程：https://www.techiediaries.com/php-react-rest-api-crud-tutorial/ 是您入门的好地方。

【讨论】：

哦，好的。谢谢回复！所以为了澄清，我基本上必须编写一堆与数据库交互并返回 json 数据的 php 函数。然后使用 axios 在我的反应应用程序中根据需要调用所述函数？

基本思路就是这样！一般流程是：数据库 --> 服务器端数据库查询 -> 通过 HTTP 公开查询结果，格式为 json 或其他数据类型 -> 获取 HTTP 端点（通过 axios、fetch api 等）反应组件。

请从答案中删除该链接。它促进了不良做法（字符串连接以构建 SQL），从而导致软件中的严重漏洞。这种类型的漏洞称为“SQL 注入”，可能导致未经授权访问数据库。见：en.wikipedia.org/wiki/SQL_injection

【参考方案2】：

我同意您需要“运行一个与您的数据库和您的反应应用程序对话的服务器”，如接受的答案所述。另一方面，这并不意味着您必须从头开始编写代码。

如果你不想为后端编写 PHP，那么你也可以从the list of 'automatic APIs' 配置软件。自动 API 是“将您的数据库转换为 REST/GraphQL API 的软件”。

我是PHP-CRUD-API 的作者，这是一个“自动 API”，我认为它适合您的需求，但您也可以使用上述列表中的任何其他软件。