如何通过反应连接到 SQL 数据库？

Posted 2023-03-23

【中文标题】如何通过反应连接到 SQL 数据库？

【英文标题】：How to connect to SQL database with react?

【发布时间】：2018-10-25 20:25:54

【问题描述】：

我目前有一个网站，用 html 和 php 编写，可以访问我的 SQL 数据库。我现在已经开始学习 React，并且希望我的超级简单的网站也能连接到 SQL 数据库。

以前我做过这个：

<php
    $conn = mysqli_connect($serverIP, $dbusername,$dbpassword,$dbname);
    if(mysqli_errno($conn)) 
     die("<p>MySQL error:</p>\n<p>" . mysqli_error($conn) . "</p>\n</body>\n</html>\n");
    
?>

然后在 index.php 文件中，这样做：

<?php include_once "connection.php"; ?>

然后继续使用基本 SQL 来获取数据。

我如何在 React 中做同样的事情？更具体地说，如何在 React 中编写 PHP 才能连接到 SQL 数据库？这段代码看起来如何？

另外，由于我正在自学 React，如果有一个人们可以审查代码的地方，并且我可以收到改进的提示，那就太好了。有这样的网站/社区吗？

【参考方案1】：

我认为您可能还不明白如何将图层完全组合在一起（不用担心 - 需要一些时间才能理解）。在您的情况下，您的服务器端 (PHP) 代码将使您的所有数据库调用并检索/修改您需要的任何数据（毕竟，您不希望在客户端查看您的数据库凭据！）。

为了显示或更改来自 React JS 前端的数据，您需要一种将这些意图传达给后端的方法；这可以通过在您的 PHP 代码库中创建 REST 端点来完成，然后您需要从您的 React JS 代码中调用它（您可以为此使用 Axios、fetch 或许多其他 HTTP 库）。

这是我从 reddit 上的 /u/roboctocat 获取的一个超级简单的示例： https://www.reddit.com/r/reactjs/comments/8lb6u3/can_anyone_provide_me_a_basic_example_tutorial/

您的客户代码：

// index.jsx
class MyComponent extends React.Component 
    onClick()  
        fetch("http://your-php-server/ping-pong.php")
            .then(res => res.json()) 
            .then((result) =>  console.log(result); ) 
    

    render()  
        return ( 
            <button onClick=this.onClick /> 
        ); 
     

还有你的服务器代码：

// ping-pong.php
<?php
    header('Content-Type: application/json'); 
    echo json_encode(array('ping' => 'pong')); 
?>

【参考方案2】：

试试这个

const getData()=>
  //function to fetch data
  const handleData=()=>
    axios.get('php file path')
      .then(response=>response.json())
      .then((data)=>console.log(data.json));

    
  

  return(
  <>
      <button onClick=handleData></button>
  </>
  );
 //end main

export default getData()

【参考方案3】：

首先我建议你编写你的php代码如下：

 $conn = mysqli_connect($serverIP, $dbusername,$dbpassword,$dbname);
    if(mysqli_errno($conn)) 
     
     $connError = array(
         "status" => boolval(0),
         "error" => mysqli_errno($conn)
     );

     $error = json_encode($connError);

     die($error);
    

现在您可以从后端在 React 中获得更好的响应。

然后在下一步中，您可以调用 fetch api 将请求发送到您的后端并检查数据库连接：

useEffect(() => 
  fetch("https://your-server/connection.php")
    .then((response) => response.json())
    .then((res) => console.log(res));
, []);

现在使用useEffect() 挂钩，您可以在每次页面加载时检查一次数据库连接。

您还可以检查res 的typeof 是否为array，然后执行诸如向用户显示错误消息之类的操作。

希望对你有帮助。