无法使用 VueJs 从 Mysql DB 获取数据

Posted 2023-02-22

【中文标题】无法使用 VueJs 从 Mysql DB 获取数据

【英文标题】：Can't get data from Mysql DB using VueJs

【发布时间】：2021-04-16 21:50:10

【问题描述】：

我尝试在前端使用 vuejs 和 axios by orderdtls.id 从 mysql db 获取数据，但数据响应为 null。 我也检查了我的 php 代码，但没有发现任何问题，并且 php 代码本身可以正常工作。

PHP 代码：

    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE');
    header('Access-Control-Allow-Headers: X-Requested-With,Origin,Content-Type,Cookie,Accept');
    $Catch_Query = json_decode(file_get_contents("php://input"));

 if($Catch_Query->action == 'fetchdata')
    
              $orderid = $_GET['uniqid'];
              $getorder = "SELECT * FROM ordertbl WHERE uniqid='$orderid'";
              $order_query = $con->query($getorder);
              $order_init = $order_query->fetch_assoc();
              $Order_detalis = array();

              $Order_detalis[] = $order_init;
              echo json_encode($Order_detalis);
           
            

Vue 脚本：

var OrderInfo = new Vue(
            el: '#rdp',
            data:
                orderdtls:'',
            ,
            methods:
                fetchOrderDtls:function()
                    axios.post(BaseUrl + '/core/core.php', action:'fetchdata').then((response) => 
                        OrderInfo.orderdtls = response.data;
                        console.log(response);
                    ).catch(function(errors)
                        console.log(errors);
                    );
                
            ,
            created()
                this.fetchOrderDtls();
            


    );

这是控制台日志：

data: "", status: 200, statusText: "", headers: …, config: …, …
config: url: "https://example.com/core/core.php", method: "post", data: ""action":"fetchdata"", headers: …, transformRequest: Array(1), …
data: ""
headers: access-control-allow-headers: "X-Requested-With,Origin,Content-Type,Cookie,Accept", access-control-allow-methods: "GET, POST, OPTIONS, PUT, DELETE", access-control-allow-origin: "*", content-length: "0", content-type: "text/html; charset=UTF-8", …
request: XMLHttpRequest readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …
status: 200
statusText: ""
__proto__: Object

【问题讨论】：

$_GET['uniqid'] 来自哪里？那应该是未定义的

@Dan 它来自 url 中的一个变量，例如 example.com/page.php?uniqid=123

@Dan uniqid 显示在页面 url 中，我认为当 php 文件执行时，if 语句的主体也将被执行，$orderid 将填充 uniqid。我手动设置了 uniq id php 文件，但没有任何改变。

再看看你的 Vue 代码。您axios.post 的网址中没有uniqid。我发布了一个答案给你看。当你手动设置时，你var_dump($order_init)时看到了什么？

@Dan 什么都没有，甚至不是NULL 无论如何它应该是空的，我怀疑语句是否没有执行..

【参考方案1】：

编辑： 聊天讨论显示 301 重定向导致负载无法到达服务器路由。下面的答案仍然有效。

---

代码需要在数据库调用的数据对象中传递一个uniqid。此外，$_GET 将为空，因为您正在执行 axios post 而不是 get。

将uniqid 与其他数据一起传递：

axios.post(BaseUrl + '/core/core.php', 
  action:'fetchdata',
  uniqid: 1                      // <-- Passing the `id` now as well ✅
).then((response) => 
  OrderInfo.orderdtls = response.data;
  console.log(response);
).catch(function(errors)
  console.log(errors);
);

在PHP后端，从file_get_contents存储的post数据中获取这个uniqid：

if($Catch_Query->action == 'fetchdata')
   $orderid = $Catch_Query->uniqid;
   ...