Exemple de tutoriel PHP et Vue.js : Comment utiliser des graphiques statistiques pour afficher les données de ventes

Tutoriel d'exemple PHP et Vue.js : Comment utiliser des graphiques statistiques pour afficher les données de ventes

Introduction :
Dans le processus de développement de sites Web ou d'applications, il est souvent nécessaire d'afficher des données, notamment des données de ventes. Les graphiques statistiques peuvent présenter clairement les tendances des données et les indicateurs clés, nous offrant ainsi un moyen plus intuitif de comprendre et d'analyser les données. Cet article explique comment utiliser PHP et Vue.js pour créer des graphiques statistiques et afficher les données de ventes.

1. Préparation
Avant de commencer le tutoriel, nous devons préparer quelques connaissances et outils de base :
1. Installez l'environnement PHP et la base de données MySQL.
2. Installez Vue.js, Vue CLI et les dépendances associées.

2. Développement back-end

1. Créer une base de données
   Tout d'abord, nous devons créer une table dans la base de données MySQL pour stocker les données de vente. Vous pouvez créer une table nommée "sales_data" à l'aide de l'instruction SQL suivante :

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

   Cette table comporte quatre champs : id, date, montant et product_id.

2. Créer une interface PHP
   Ensuite, nous devons créer une interface PHP pour gérer les opérations CRUD (créer, lire, mettre à jour et supprimer) des données. Créez un dossier nommé « api » dans le répertoire du projet et créez-y un fichier nommé « sales.php ». Copiez le code suivant dans "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.");
    }
   }
   ?>

   Le code ci-dessus crée une classe "Sales" pour gérer les opérations CRUD sur les données de vente. L'interface prend en charge les requêtes GET et POST.

3. Créez la connexion à la base de données et la classe Sales
   Créez un fichier appelé "database.php" dans le dossier "config" et copiez-y le code suivant :

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

   Remplacez "your_database_name", "your_username" et remplacez "your_password" " avec le nom de votre base de données, votre nom d'utilisateur et votre mot de passe.

Ensuite, créez un fichier appelé "sales.php" dans le dossier "objects" et copiez-y le code suivant :

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

Ce code définit une classe "Sales" et contient les données Get Sales et les méthodes de création données de ventes.

3. Développement front-end

1. Créez un projet Vue.js
   Ouvrez la ligne de commande et accédez au répertoire de votre projet. Exécutez la commande suivante pour créer un nouveau projet Vue.js :

   vue create sales-chart

   Sélectionnez les éléments de configuration correspondants selon l'assistant et attendez que le projet soit créé.

2. Installer chart.js
   Exécutez la commande suivante dans le répertoire du projet pour installer chart.js :

   npm install chart.js

3. Écrire le code de la page
   Ouvrez le fichier "App.vue" dans le dossier "src" et ajoutez ce qui suit code Copiez-y :

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

   Dans le code ci-dessus, nous avons d'abord introduit la bibliothèque chart.js et appelé la fonction createChart dans la fonction montée. Dans la fonction createChart, les données de ventes sont obtenues à partir de l'interface PHP via la méthode fetch et un graphique est créé sur la base des données.

4. Exécutez le projet
Enfin, exécutez la commande suivante pour démarrer le projet Vue.js :

npm run serve

Visitez http://localhost:8080 dans le navigateur, vous pouvez voir le graphique statistique affichant les données de ventes.

Résumé :
Cet article explique comment utiliser PHP et Vue.js pour créer des graphiques statistiques et afficher les données de ventes. Grâce à cet exemple de didacticiel, vous pouvez apprendre à utiliser PHP pour fournir des interfaces sur le back-end et à utiliser les bibliothèques Vue.js et chart.js sur le front-end pour créer des graphiques. J'espère que cet article vous sera utile, merci d'avoir lu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!