PHP と Vue.js のサンプル チュートリアル: 統計グラフを使用して販売データを表示する方法
- WBOYオリジナル
- 2023-08-17 08:39:211448ブラウズ
PHP と Vue.js のサンプル チュートリアル: 統計グラフを使用して販売データを表示する方法
はじめに:
Web サイトまたはアプリケーションの開発プロセスでは、多くの場合、データ、特に販売データを表示するために必要になります。統計グラフはデータの傾向と主要な指標を明確に示し、データを理解し、分析するためのより直観的な方法を提供します。この記事では、PHPとVue.jsを使って統計グラフを作成し、売上データを表示する方法を紹介します。
1. 準備
チュートリアルを開始する前に、いくつかの基本的な知識とツールを準備する必要があります:
1. PHP 環境と MySQL データベースをインストールします。
2. Vue.js、Vue CLI、および関連する依存関係をインストールします。
2. バックエンド開発
-
データベースの作成
まず、売上データを保存するテーブルを 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 の 4 つのフィールドがあります。
-
PHP インターフェイスの作成
次に、データの CRUD 操作 (作成、読み取り、更新、削除) を処理するための PHP インターフェイスを作成する必要があります。プロジェクトディレクトリに「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."); } } ?>上記のコードは、販売データに対する CRUD 操作を処理するための「Sales」クラスを作成します。このインターフェイスは GET リクエストと POST リクエストをサポートします。
-
データベース接続と 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」クラスには、売上データの取得および売上データの作成のためのメソッドが含まれます。
3. フロントエンド開発
-
Vue.js プロジェクトの作成
コマンド ラインを開き、プロジェクト ディレクトリに移動します。次のコマンドを実行して、新しい Vue.js プロジェクトを作成します。vue create sales-chart
ウィザードに従って対応する構成項目を選択し、プロジェクトが作成されるまで待ちます。
-
chart.js のインストール
プロジェクト ディレクトリで次のコマンドを実行して chart.js をインストールします:npm install chart.js
-
ページ コードの書き込み
「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 ライブラリを導入し、マウントされたfunction createChart 関数を呼び出します。 createChart関数では、PHPインターフェースからfetchメソッドを通じて売上データを取得し、そのデータに基づいてグラフを作成します。
4. プロジェクトを実行します
最後に、次のコマンドを実行して Vue.js プロジェクトを開始します:
npm run serve
http://localhost:8080 にアクセスします。ブラウザ上で売上データを示す統計グラフをご覧いただけます。
概要:
この記事では、PHP と Vue.js を使用して統計グラフを作成し、販売データを表示する方法について詳しく説明します。このサンプル チュートリアルを通じて、PHP を使用してバックエンドでインターフェイスを提供し、フロントエンドで Vue.js および chart.js ライブラリを使用してグラフを作成する方法を学ぶことができます。この記事があなたのお役に立てば幸いです、読んでいただきありがとうございます!
以上がPHP と Vue.js のサンプル チュートリアル: 統計グラフを使用して販売データを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。