PHP和Vue.js實例教學：如何使用統計圖表展示銷售數據

PHP和Vue.js實例教學：如何使用統計圖表展示銷售資料

導語：
在網站或應用程式開發過程中，經常需要展示數據，特別是銷售數據。統計圖表能夠清晰地呈現資料變化趨勢和關鍵指標，為我們提供了更直觀的方式來理解和分析資料。本文將為大家介紹如何使用PHP和Vue.js建立統計圖表，並展示銷售數據。

一、準備工作
在開始教學之前，我們需要準備一些基礎知識和工具:
1.安裝PHP環境和MySQL資料庫。
2.安裝Vue.js和Vue CLI以及相關依賴。

二、後端開發

1. 建立資料庫
   首先，我們需要在MySQL資料庫中建立一個表格來儲存銷售資料。可以使用下列SQL語句建立一個名為"sales_data"的表：

   CREATE TABLE sales_data (
     id INT PRIMARY KEY AUTO_INCREMENT,
     date DATE,
     amount DECIMAL(10,2),
     product_id INT
   );

   這個表有四個欄位：id、date、amount和product_id。

2. 建立PHP介面
   接下來，我們需要建立一個PHP介面來處理資料的CRUD操作（建立、讀取、更新和刪除）。在專案目錄下方建立一個名為"api"的資料夾，並在其中建立一個名為"sales.php"的檔案。將以下程式碼複製到"sales.php"：

   <?php
   header("Access-Control-Allow-Origin: *");
   header("Content-Type: application/json");
   
   include_once 'config/database.php';
   include_once 'objects/sales.php';
   
   $database = new Database();
   $db = $database->getConnection();
   
   $sales = new Sales($db);
   
   $request_method = $_SERVER["REQUEST_METHOD"];
   
   // 处理GET请求
   if($request_method == 'GET'){
    $data = $sales->getSalesData();
    echo json_encode($data);
   } 
   // 处理POST请求
   else if($request_method == 'POST'){
    $data = json_decode(file_get_contents("php://input"));
   
    $sales->date = $data->date;
    $sales->amount = $data->amount;
    $sales->product_id = $data->product_id;
   
    if($sales->createSalesData()){
        echo json_encode("Sales data was created.");
    } else{
        echo json_encode("Unable to create sales data.");
    }
   }
   ?>

   上述程式碼建立了一個"Sales"類，用於處理銷售資料的CRUD作業。介面支援GET和POST請求。

3. 建立資料庫連線和Sales類別
   在"config"資料夾中建立一個名為"database.php"的文件，並將下列程式碼複製到其中：

   <?php
   class Database{
    
    private $host = "localhost";
    private $db_name = "your_database_name";
    private $username = "your_username";
    private $password = "your_password";
    public $conn;
    
    public function getConnection(){
    
        $this->conn = null;
    
        try{
            $this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
            $this->conn->exec("set names utf8");
        }catch(PDOException $exception){
            echo "Connection error: " . $exception->getMessage();
        }
    
        return $this->conn;
    }
   }
   ?>

   將"your_database_name"、"your_username"和"your_password"替換為您的資料庫名稱、使用者名稱和密碼。

接著，在"objects"資料夾中建立一個名為"sales.php"的文件，並將以下程式碼複製到其中：

<?php
class Sales{
 
    private $conn;
    private $table_name = "sales_data";
 
    public $id;
    public $date;
    public $amount;
    public $product_id;
 
    public function __construct($db){
        $this->conn = $db;
    }
 
    function getSalesData(){
        $query = "SELECT date, SUM(amount) as amount FROM " . $this->table_name . " GROUP BY date";
        $stmt = $this->conn->prepare($query);
        $stmt->execute();
 
        return $stmt;
    }
 
    function createSalesData(){
        $query = "INSERT INTO " . $this->table_name . " SET date=:date, amount=:amount, product_id=:product_id";
        $stmt = $this->conn->prepare($query);
 
        $this->date=htmlspecialchars(strip_tags($this->date));
        $this->amount=htmlspecialchars(strip_tags($this->amount));
        $this->product_id=htmlspecialchars(strip_tags($this->product_id));
 
        $stmt->bindParam(":date", $this->date);
        $stmt->bindParam(":amount", $this->amount);
        $stmt->bindParam(":product_id", $this->product_id);
 
        if($stmt->execute()){
            return true;
        }
 
        return false;
    }
}
?>

這段程式碼定義了一個"Sales"類，並包含取得銷售資料和建立銷售資料的方法。

三、前端開發

1. 建立Vue.js專案
   開啟命令列，並定位到你的專案目錄。執行以下命令來建立新的Vue.js專案：

   vue create sales-chart

   根據精靈選擇對應的配置項，並等待專案建立完成。

2. 安裝chart.js
   在專案目錄下執行以下指令來安裝chart.js：

   npm install chart.js

3. 寫頁面程式碼
   在"src"資料夾中開啟"App.vue"文件，並將以下程式碼複製到其中：

   <template>
     <div id="app">
    <canvas id="chart"></canvas>
     </div>
   </template>
   
   <script>
   import Chart from 'chart.js';
   
   export default {
     mounted() {
    this.createChart();
     },
     methods: {
    createChart() {
      fetch('http://localhost/api/sales.php')
        .then(response => response.json())
        .then(data => {
          const chartData = {
            labels: [],
            datasets: [
              {
                label: '销售额',
                data: [],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1,
              },
            ],
          };
   
          data.forEach(row => {
            chartData.labels.push(row.date);
            chartData.datasets[0].data.push(row.amount);
          });
   
          new Chart(document.getElementById('chart'), {
            type: 'line',
            data: chartData,
            options: {
              scales: {
                yAxes: [{
                  ticks: {
                    beginAtZero: true,
                  },
                }],
              },
            },
          });
        });
    },
     },
   };
   </script>
   
   <style>
   #chart {
     width: 600px;
     height: 400px;
   }
   </style>

   在上述程式碼中，我們首先引入了chart.js庫，並在mounted函數中呼叫createChart函數。 createChart函數中透過fetch方法從PHP介面取得銷售數據，並根據數據建立圖表。

四、執行專案
最後，執行下列指令啟動Vue.js專案：

npm run serve

在瀏覽器中造訪http://localhost:8080，即可看到統計圖表顯示銷售數據。

總結：
本文詳細介紹如何使用PHP和Vue.js建立統計圖表，並展示銷售資料。透過這個實例教程，您可以了解到如何在後端使用PHP提供接口，以及在前端使用Vue.js和chart.js庫來建立圖表。希望本文對您有幫助，謝謝閱讀！

以上是PHP和Vue.js實例教學：如何使用統計圖表展示銷售數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！