PHP 및 Vue.js 예제 튜토리얼: 통계 차트를 사용하여 판매 데이터를 표시하는 방법-PHP 튜토리얼-php.cn

PHP 및 Vue.js 예제 튜토리얼: 통계 차트를 사용하여 판매 데이터를 표시하는 방법

WBOY

풀어 주다： 2023-08-17 08:40:01

원래의

1475명이 탐색했습니다.

PHP 및 Vue.js 예제 튜토리얼: 통계 차트를 사용하여 판매 데이터를 표시하는 방법

소개:
웹사이트 또는 애플리케이션 개발 과정에서 데이터, 특히 판매 데이터를 표시해야 하는 경우가 많습니다. 통계 차트는 데이터 추세와 주요 지표를 명확하게 제시하여 데이터를 이해하고 분석하는 보다 직관적인 방법을 제공합니다. 이 기사에서는 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" 클래스를 정의하고 Get Sales 데이터와 생성 방법을 포함합니다. 판매 데이터.

3. 프런트엔드 개발

Vue.js 프로젝트 만들기
명령줄을 열고 프로젝트 디렉터리로 이동하세요. 다음 명령을 실행하여 새 Vue.js 프로젝트를 생성하세요.
```
vue create sales-chart
```
로그인 후 복사
마법사에 따라 해당 구성 항목을 선택하고 프로젝트가 생성될 때까지 기다립니다.
chart.js 설치
chart.js를 설치하려면 프로젝트 디렉터리에서 다음 명령을 실행하세요.
```
npm install chart.js
```
로그인 후 복사

페이지 코드 작성
"src" 폴더에 있는 "App.vue" 파일을 열고 다음을 추가하세요. code 복사해 보세요:

<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 라이브러리를 도입하고 마운트된 함수에서 createChart 함수를 호출했습니다. createChart 함수에서는 fetch 메소드를 통해 PHP 인터페이스에서 판매 데이터를 가져오고 해당 데이터를 기반으로 차트가 생성됩니다.

4. 프로젝트 실행
마지막으로 다음 명령을 실행하여 Vue.js 프로젝트를 시작합니다.

npm run serve

로그인 후 복사

브라우저에서 http://localhost:8080을 방문하면 판매 데이터를 표시하는 통계 차트를 볼 수 있습니다.

요약:
이 문서에서는 PHP와 Vue.js를 사용하여 통계 차트를 만들고 판매 데이터를 표시하는 방법을 자세히 설명합니다. 이 예제 튜토리얼을 통해 PHP를 사용하여 백엔드에서 인터페이스를 제공하고 프런트엔드에서 Vue.js 및 Chart.js 라이브러리를 사용하여 차트를 만드는 방법을 배울 수 있습니다. 이 글이 도움이 되셨으면 좋겠습니다. 읽어주셔서 감사합니다!

위 내용은 PHP 및 Vue.js 예제 튜토리얼: 통계 차트를 사용하여 판매 데이터를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!