VueCli從前端傳資料至後端

在 Vue CLI 前端將資料傳遞給後端的方法，通常是透過 HTTP 請求來實現。你可以使用 axios 或 Vue 自帶的 fetch 方法來進行這個操作。以下是一些常見的做法：

1. 使用 `axios` 傳遞資料給後端

axios 是一個非常流行的 HTTP 請求庫，適用於發送 GET、POST 等請求。

首先，安裝 axios：

npm install axios

然後在 Vue 組件中使用它來發送資料：

例子：使用 POST 請求將資料傳遞給後端

import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      dc_name: '',
      img: '',
      time: ''
    };
  },
  methods: {
    submitData() {
      const payload = {
        username: this.username,
        dc_name: this.dc_name,
        img: this.img,
        time: this.time
      };

      axios.post('http://你的後端網址/api/endpoint', payload)
        .then(response => {
          console.log('資料已成功傳送:', response.data);
        })
        .catch(error => {
          console.error('發送資料時出錯:', error);
        });
    }
  }
};

2. 使用 `fetch` 傳遞資料給後端

fetch 是瀏覽器原生的 API，也可以用來發送 HTTP 請求。

例子：使用 `fetch` 傳遞資料

export default {
  data() {
    return {
      username: '',
      dc_name: '',
      img: '',
      time: ''
    };
  },
  methods: {
    submitData() {
      const payload = {
        username: this.username,
        dc_name: this.dc_name,
        img: this.img,
        time: this.time
      };

      fetch('http://你的後端網址/api/endpoint', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
      })
        .then(response => response.json())
        .then(data => {
          console.log('資料已成功傳送:', data);
        })
        .catch(error => {
          console.error('發送資料時出錯:', error);
        });
    }
  }
};

小結

axios 提供了更多的功能和便利，例如處理請求攔截器、取消請求等，適合用於需要更多功能的應用。
fetch 是原生的 API，使用簡單，但相較於 axios，處理一些複雜情境會需要更多手動設置。

你可以根據需求選擇最適合的方式來與後端進行資料交換。

後端接收前端資料

在後端接收來自前端傳遞的資料時，通常會使用 PHP 來處理 HTTP 請求。根據你選擇的請求方法（例如 POST 或 GET），PHP 會從 $_POST 或 $_GET 變數中獲取資料，或者如果是 JSON 格式的資料，則需要讀取 PHP 的 php://input 資料流。

以下是幾種常見的方式來接收來自前端的資料：

1. 接收來自前端的 JSON 資料

假設前端使用 axios 或 fetch 發送 JSON 格式的資料（如上面的例子），那麼後端可以通過以下方式來接收這些資料。

範例：接收 JSON 資料

<?php
// 設定回應標頭
header('Content-Type: application/json');

// 讀取從前端傳來的 JSON 資料
$input = file_get_contents('php://input');
$data = json_decode($input, true);

// 檢查是否成功解析資料
if ($data) {
    // 取得傳送過來的資料
    $username = $data['username'] ?? '';
    $dc_name = $data['dc_name'] ?? '';
    $img = $data['img'] ?? '';
    $time = $data['time'] ?? '';

    // 在這裡可以處理資料，進行資料庫操作或其他業務邏輯

    // 回應前端
    echo json_encode(['status' => 'success', 'message' => '資料已成功接收']);
} else {
    // 解析失敗
    echo json_encode(['status' => 'error', 'message' => '無效的資料']);
}
?>

2. 接收來自前端的表單資料（`application/x-www-form-urlencoded` 或 `multipart/form-data`）

如果前端傳遞的是表單資料（例如透過 axios.post() 或 fetch 發送 application/x-www-form-urlencoded 類型的資料），那麼資料會以 $_POST 陣列的方式傳遞。

範例：接收表單資料

<?php
// 設定回應標頭
header('Content-Type: application/json');

// 檢查是否有表單資料
if (isset($_POST['username'], $_POST['dc_name'], $_POST['img'], $_POST['time'])) {
    $username = $_POST['username'];
    $dc_name = $_POST['dc_name'];
    $img = $_POST['img'];
    $time = $_POST['time'];

    // 在這裡可以處理資料，進行資料庫操作或其他業務邏輯

    // 回應前端
    echo json_encode(['status' => 'success', 'message' => '資料已成功接收']);
} else {
    // 表單資料缺失
    echo json_encode(['status' => 'error', 'message' => '缺少必要的資料']);
}
?>

3. 使用 `$_GET` 來接收 URL 查詢參數（適用於 GET 請求）

如果前端發送的是 GET 請求，資料會附加在 URL 的查詢字串中。你可以使用 $_GET 來取得這些資料。

範例：接收 GET 請求資料

<?php
// 設定回應標頭
header('Content-Type: application/json');

// 檢查是否有查詢字串資料
if (isset($_GET['username'], $_GET['dc_name'], $_GET['img'], $_GET['time'])) {
    $username = $_GET['username'];
    $dc_name = $_GET['dc_name'];
    $img = $_GET['img'];
    $time = $_GET['time'];

    // 在這裡可以處理資料，進行資料庫操作或其他業務邏輯

    // 回應前端
    echo json_encode(['status' => 'success', 'message' => '資料已成功接收']);
} else {
    // 查詢字串資料缺失
    echo json_encode(['status' => 'error', 'message' => '缺少必要的資料']);
}
?>

小結

JSON 資料：當前端傳送的是 JSON 格式資料時，後端需要使用 file_get_contents('php://input') 來讀取並解析 JSON。
表單資料：當前端使用表單提交資料時，後端可以通過 $_POST 來接收資料。
GET 請求：如果是 GET 請求，資料會在 URL 查詢字串中，並且可以通過 $_GET 來取得。

確保後端的 API 能夠根據不同的請求格式正確處理並返回相應的結果。

整合

前端test.vue






































<template>
    <div class="container">
        <div class="row">
            <div class="col">
                <input type="text" v-model="message">
                <button class="btn btn-primary w-100 mt-5" @click="submitData">送出</button>
            </div>
        </div>
    </div>
</template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        message: ''        // 顯示操作結果的訊息
      };
    },
    methods: {
      submitData(){
        const payload={
            message:this.message,
        };
        axios.post('https://iotsvm.shop/discord_verify/backend/apitest.php',payload)
        .then(response=>{
            console.log('成功',response.data);
            
        })
        .catch(error=>{
            console.error('錯誤',error);
        });
      }
    }
  };
  </script>

後端apitest.php



























<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);

header('Access-Control-Allow-Origin: http://localhost:8080');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Credentials: true');
header('Content-Type: application/json'); // 確保回傳 JSON
// 讀取從前端傳來的 JSON 資料
$input = file_get_contents('php://input');
$data = json_decode($input, true);

// 檢查是否成功解析資料
if ($data) {
    // 取得傳送過來的資料
    $message = $data['message'] ?? '';

    // 回應前端
    echo json_encode(['status' => 'success', 'message' => '資料已成功接收']);
} else {
    // 解析失敗
    echo json_encode(['status' => 'error', 'message' => '無效的資料']);
}
?>

補充：為甚麼要用到async

在你提供的 updateState 方法中，async 是必須的，因為你使用了 axios 進行異步請求，而 axios 的請求是非同步的（它會返回一個 Promise）。如果你希望能夠等待 axios 請求完成後再進行後續的操作（例如顯示成功訊息或錯誤訊息），就需要將這個方法設為 async，並使用 await 來等待請求的結果。

原因如下：

axios 是非同步操作：axios 會返回一個 Promise，而 JavaScript 的非同步操作不會立即返回結果。這意味著，在你發送 axios 請求時，JavaScript 不會停下來等待回應，而是繼續執行後續代碼，這可能會導致異步操作的結果（如錯誤訊息或更新）在還沒收到回應之前就執行了。
使用 async 和 await 可以處理異步操作：async 和 await 是 ES8（ECMAScript 2017）引入的語法糖，能讓你更方便地處理異步操作，讓代碼看起來像是同步執行的。

具體的解釋：

在你的 updateState 方法中，你需要等 axios 發送的請求完成後，再根據返回結果進行操作。如果不使用 async 和 await，你將無法等待 axios 請求的回應，這樣就無法正確處理回應結果。

修改前：

updateState(item) {
    axios.post('your_api_url', { id: item.id, state: item.state })
        .then(response => {
            if (response.data.success) {
                this.message = "審核狀態已更新！";
            } else {
                this.message = "更新失敗，請稍後再試。";
            }
        })
        .catch(error => {
            console.error("更新狀態時發生錯誤:", error);
            this.message = "更新失敗，請稍後再試。";
        });
}

這段代碼雖然可以正常運行，但是它會使用 .then 和 .catch 來處理異步結果。如果你使用 async 和 await，可以讓這些異步操作看起來像是同步的，代碼也會更加清晰和簡潔。

修改後：

async updateState(item) {
    try {
        const response = await axios.post('your_api_url', {
            id: item.id,
            state: item.state
        });

        if (response.data.success) {
            this.message = "審核狀態已更新！";
        } else {
            this.message = "更新失敗，請稍後再試。";
        }
    } catch (error) {
        console.error("更新狀態時發生錯誤:", error);
        this.message = "更新失敗，請稍後再試。";
    }
}

這樣寫的好處是：

await 等待結果：當 await axios.post() 被調用時，JavaScript 會暫停在那行代碼，直到請求完成，然後才繼續執行後面的代碼。這樣就能確保回應結果被處理後才顯示成功或錯誤訊息。
錯誤處理：try...catch 讓你能夠捕捉並處理異常，保證即使在請求過程中出現錯誤，也能給用戶反饋。

總結：

如果你希望讓你的代碼能夠「同步」等待 axios 的回應並進行後續操作，那麼 async 和 await 是必須的，這樣能夠讓你處理異步請求更加直觀和簡單。