Beispiel-Tutorial zu PHP und Vue.js: So verwenden Sie statistische Diagramme zur Anzeige von Verkaufsdaten

PHP- und Vue.js-Beispiel-Tutorial: So verwenden Sie statistische Diagramme zur Anzeige von Verkaufsdaten

Einführung:
Im Prozess der Website- oder Anwendungsentwicklung ist es häufig erforderlich, Daten anzuzeigen, insbesondere Verkaufsdaten. Statistische Diagramme können Datentrends und Schlüsselindikatoren klar darstellen und uns eine intuitivere Möglichkeit bieten, Daten zu verstehen und zu analysieren. In diesem Artikel wird erläutert, wie Sie mit PHP und Vue.js statistische Diagramme erstellen und Verkaufsdaten anzeigen.

1. Vorbereitung
Bevor wir mit dem Tutorial beginnen, müssen wir einige Grundkenntnisse und Tools vorbereiten:
1. Installieren Sie die PHP-Umgebung und die MySQL-Datenbank.
2. Installieren Sie Vue.js, Vue CLI und zugehörige Abhängigkeiten.

2. Backend-Entwicklung

1. Datenbank erstellen
   Zuerst müssen wir eine Tabelle in der MySQL-Datenbank erstellen, um Verkaufsdaten zu speichern. Mit der folgenden SQL-Anweisung können Sie eine Tabelle mit dem Namen „sales_data“ erstellen:

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

   Diese Tabelle enthält vier Felder: ID, Datum, Menge und Produkt-ID.

2. PHP-Schnittstelle erstellen
   Als nächstes müssen wir eine PHP-Schnittstelle erstellen, um CRUD-Vorgänge (Erstellen, Lesen, Aktualisieren und Löschen) von Daten abzuwickeln. Erstellen Sie im Projektverzeichnis einen Ordner mit dem Namen „api“ und darin eine Datei mit dem Namen „sales.php“. Kopieren Sie den folgenden Code in „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.");
    }
   }
   ?>

   Der obige Code erstellt eine „Sales“-Klasse für die Verarbeitung von CRUD-Operationen an Verkaufsdaten. Die Schnittstelle unterstützt GET- und POST-Anfragen.

3. Erstellen Sie die Datenbankverbindung und die Vertriebsklasse.
   Erstellen Sie eine Datei mit dem Namen „database.php“ im Ordner „config“ und kopieren Sie den folgenden Code hinein:

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

   Ersetzen Sie „Ihr_Datenbankname“, „Ihr_Benutzername“ und „Ihr_Passwort“. " mit Ihrem Datenbanknamen, Benutzernamen und Passwort.

Als nächstes erstellen Sie eine Datei namens „sales.php“ im Ordner „objects“ und kopieren Sie den folgenden Code hinein:

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

Dieser Code definiert eine „Sales“-Klasse und enthält die Get Sales-Daten und Methoden zum Erstellen Verkaufsdaten.

3. Frontend-Entwicklung

1. Erstellen Sie ein Vue.js-Projekt
   Öffnen Sie die Befehlszeile und navigieren Sie zu Ihrem Projektverzeichnis. Führen Sie den folgenden Befehl aus, um ein neues Vue.js-Projekt zu erstellen:

   vue create sales-chart

   Wählen Sie die entsprechenden Konfigurationselemente gemäß dem Assistenten aus und warten Sie, bis das Projekt erstellt wird.

2. Chart.js installieren
   Führen Sie den folgenden Befehl im Projektverzeichnis aus, um chart.js zu installieren:

   npm install chart.js

3. Seitencode schreiben
   Öffnen Sie die Datei „App.vue“ im Ordner „src“ und fügen Sie Folgendes hinzu Code Kopieren Sie es hinein:

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

   Im obigen Code haben wir zuerst die Bibliothek chart.js eingeführt und die Funktion createChart in der gemounteten Funktion aufgerufen. In der Funktion „createChart“ werden die Verkaufsdaten über die Fetch-Methode von der PHP-Schnittstelle abgerufen und auf Grundlage der Daten ein Diagramm erstellt.

4. Führen Sie das Projekt aus
Führen Sie abschließend den folgenden Befehl aus, um das Vue.js-Projekt zu starten:

npm run serve

Besuchen Sie http://localhost:8080 im Browser. Sie können das statistische Diagramm mit den Verkaufsdaten sehen.

Zusammenfassung:
Dieser Artikel beschreibt, wie Sie mit PHP und Vue.js statistische Diagramme erstellen und Verkaufsdaten anzeigen. In diesem Beispiel-Tutorial erfahren Sie, wie Sie PHP verwenden, um Schnittstellen im Back-End bereitzustellen, und wie Sie die Bibliotheken Vue.js und chart.js im Front-End verwenden, um Diagramme zu erstellen. Ich hoffe, dieser Artikel ist hilfreich für Sie, vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zu PHP und Vue.js: So verwenden Sie statistische Diagramme zur Anzeige von Verkaufsdaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!