如何使用PHP和Vue實現資料報表功能-php教程-PHP中文網

如何使用PHP和Vue實現資料報表功能

WBOY

發布： 2023-09-25 11:10:02

原創

1141 人瀏覽過

如何使用PHP和Vue實現資料報表功能

引言：

在現代的資料驅動時代，資料報表功能已經成為許多網站和應用程式的核心需求之一。 PHP和Vue是兩種非常受歡迎的開發技術，結合它們可以輕鬆地建立強大的資料報表功能。本文將介紹如何使用PHP和Vue實作資料報表功能，並提供具體的程式碼範例。

一、準備工作：

在開始之前，確保你已經安裝了PHP和Vue的開發環境，並且具備一定的基礎知識。

二、PHP後端：

建立一個名為"report.php"的文件，用於處理資料請求和產生報表資料。以下是一個簡單的範例：

<?php
// 连接数据库
$conn = new mysqli("localhost", "username", "password", "database");

// 查询数据
$result = $conn->query("SELECT * FROM report_data");

// 把数据转换为关联数组
$data = array();
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}

// 返回JSON格式的数据
header("Content-type: application/json");
echo json_encode($data);
?>

登入後複製

儲存並執行"report.php"文件，確保能夠正確地取得報表資料。

三、Vue前端：

建立一個名為"report.vue"的文件，用於顯示報表資料。以下是一個簡單的範例：

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>日期</th>
                    <th>销售额</th>
                    <th>利润</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="row in reportData" :key="row.date">
                    <td>{{ row.date }}</td>
                    <td>{{ row.sales }}</td>
                    <td>{{ row.profit }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            reportData: []
        }
    },
    mounted() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            fetch("report.php")
                .then(response => response.json())
                .then(data => {
                    this.reportData = data;
                })
                .catch(error => console.log(error));
        }
    }
}
</script>

登入後複製

註冊並使用"report.vue"元件，將其渲染到頁面中。以下是一個簡單的範例：

<!DOCTYPE html>
<html>
<head>
    <title>数据报表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <report></report>
    </div>

    <script src="report.vue"></script>
    <script>
        new Vue({
            el: "#app"
        });
    </script>
</body>
</html>

登入後複製