Tutorial contoh PHP dan Vue.js: Cara menggunakan carta statistik untuk memaparkan data jualan

Tutorial contoh PHP dan Vue.js: Cara menggunakan carta statistik untuk memaparkan data jualan

Pengenalan:
Dalam proses pembangunan laman web atau aplikasi, selalunya perlu untuk memaparkan data, terutamanya data jualan. Carta statistik boleh membentangkan arah aliran data dan penunjuk utama dengan jelas, memberikan kami cara yang lebih intuitif untuk memahami dan menganalisis data. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue.js untuk membuat carta statistik dan memaparkan data jualan.

1. Persediaan
Sebelum memulakan tutorial, kita perlu menyediakan beberapa pengetahuan dan alatan asas:
1. Pasang persekitaran PHP dan pangkalan data MySQL.
2. Pasang Vue.js, Vue CLI dan kebergantungan yang berkaitan.

2. Pembangunan bahagian belakang

1. Buat pangkalan data
   Pertama, kita perlu mencipta jadual dalam pangkalan data MySQL untuk menyimpan data jualan. Anda boleh membuat jadual bernama "data_jualan" menggunakan pernyataan SQL berikut:

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

   Jadual ini mempunyai empat medan: id, tarikh, jumlah dan product_id.

2. Buat antara muka PHP
   Seterusnya, kita perlu mencipta antara muka PHP untuk mengendalikan operasi CRUD (cipta, baca, kemas kini dan padam) data. Cipta folder bernama "api" dalam direktori projek dan buat fail bernama "sales.php" di dalamnya. Salin kod berikut ke dalam "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.");
    }
   }
   ?>

   Kod di atas mencipta kelas "Jualan" untuk mengendalikan operasi CRUD pada data jualan. Antara muka menyokong permintaan GET dan POST.

3. Buat sambungan pangkalan data dan kelas Jualan
   Buat fail yang dipanggil "database.php" dalam folder "config" dan salin kod berikut ke dalamnya:

   <?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;
    }
   }
   ?>

   Gantikan "nama_database_anda", "nama_pengguna_anda" dan Gantikan "kata laluan_anda " dengan nama pangkalan data, nama pengguna dan kata laluan anda.

Seterusnya, buat fail bernama "sales.php" dalam folder "objek" dan salin kod berikut ke dalamnya:

<?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;
    }
}
?>

Kod ini mentakrifkan kelas "Jualan" dan mengandungi data Dapatkan Jualan dan kaedah mencipta data jualan.

3. Pembangunan bahagian hadapan

1. Buat projek Vue.js
   Buka baris arahan dan navigasi ke direktori projek anda. Jalankan arahan berikut untuk mencipta projek Vue.js baharu:

   vue create sales-chart

   Pilih item konfigurasi yang sepadan mengikut wizard dan tunggu projek dibuat.

2. Pasang chart.js
   Lakukan arahan berikut dalam direktori projek untuk memasang chart.js:

   npm install chart.js

3. Tulis kod halaman
   Buka fail "App.vue" dalam folder "src" dan tambahkan yang berikut kod Salin ke dalamnya:

   <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>

   Dalam kod di atas, kami mula-mula memperkenalkan pustaka chart.js dan memanggil fungsi createChart dalam fungsi yang dipasang. Dalam fungsi createChart, data jualan diperoleh daripada antara muka PHP melalui kaedah pengambilan dan carta dibuat berdasarkan data.

4 Jalankan projek
Akhir sekali, jalankan arahan berikut untuk memulakan projek Vue.js:

npm run serve

Lawati http://localhost:8080 dalam penyemak imbas, anda boleh melihat carta statistik yang memaparkan data jualan.

Ringkasan:
Artikel ini memperincikan cara menggunakan PHP dan Vue.js untuk mencipta carta statistik dan memaparkan data jualan. Melalui tutorial contoh ini, anda boleh belajar cara menggunakan PHP untuk menyediakan antara muka di bahagian belakang dan menggunakan perpustakaan Vue.js dan chart.js di bahagian hadapan untuk mencipta carta. Saya harap artikel ini berguna kepada anda, terima kasih kerana membaca!

Atas ialah kandungan terperinci Tutorial contoh PHP dan Vue.js: Cara menggunakan carta statistik untuk memaparkan data jualan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!