PHP と Vue: メンバーシップ ポイントの使用履歴クエリを実装する方法

PHP と Vue: メンバー ポイントの使用履歴クエリの実装とコード例

はじめに:
電子商取引の人気に伴い、メンバー ポイント システムはますます普及しています。広く使われています。会員ポイントの使用履歴を照会することは、非常に重要な機能要件の 1 つになっています。この記事では、PHPとVueを使って会員ポイント利用履歴照会機能を実装する方法と具体的なコード例を紹介します。

1. データベースの設計
会員ポイントの使用履歴を保存するために、member_points_history という名前のデータ テーブルを設計できます。テーブルには次のフィールドを含めることができます:

1. id: 主キー、自動インクリメント;
2. member_id: メンバー テーブルとの関連付けに使用されるメンバー ID;
3. points: ポイントの数を使用します;
4. action: ポイント操作のタイプ (消費、償還など);
5. create_time: レコードの作成時間。

2. バックエンドの実装

1. フロントエンド リクエストを処理するための PHP ファイル api.php を作成します。
2. まず、データベースに接続し、文字エンコーディングを設定する必要があります。

<?php
header('Content-Type: application/json; charset=utf-8');

$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "your_database";

$conn = new mysqli($servername, $username, $password, $dbname);
$conn->set_charset("utf8");

// 检查数据库连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}
?>

3. 次に、会員ポイントの使用履歴を取得するための API を記述します。

<?php
// 获取指定会员的积分使用历史记录
if ($_SERVER['REQUEST_METHOD'] == 'GET' && isset($_GET['member_id'])) {
    $member_id = $_GET['member_id'];

    $sql = "SELECT * FROM member_points_history WHERE member_id = $member_id ORDER BY create_time DESC";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        $rows = array();
        while ($row = $result->fetch_assoc()) {
            $rows[] = $row;
        }
        echo json_encode($rows);
    } else {
        echo json_encode(array());
    }
}
?>

3. フロントエンドの実装

1. メンバー ポイントの使用履歴を表示するために使用される Vue コンポーネント MemberPointsHistory.vue を作成します。

<template>
    <div>
        <h1 id="会员积分使用历史查询">会员积分使用历史查询</h1>
        <table>
            <thead>
                <tr>
                    <th>记录ID</th>
                    <th>会员ID</th>
                    <th>积分数量</th>
                    <th>操作类型</th>
                    <th>创建时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="history in pointsHistory" :key="history.id">
                    <td>{{ history.id }}</td>
                    <td>{{ history.member_id }}</td>
                    <td>{{ history.points }}</td>
                    <td>{{ history.action }}</td>
                    <td>{{ history.create_time }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pointsHistory: [],
        };
    },
    mounted() {
        // 发送请求获取会员积分使用历史记录
        const member_id = 1; // 替换为实际会员ID
        fetch(`api.php?member_id=${member_id}`)
            .then((response) => response.json())
            .then((data) => {
                this.pointsHistory = data;
            });
    },
};
</script>

<style>
/* 样式可根据实际需要进行修改 */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #ccc;
}
</style>

4. ページ呼び出し

1. メンバー ポイントの使用履歴を表示する必要があるページに MemberPointsHistory コンポーネントを導入します。

<template>
    <div>
        <!-- 其他页面内容 -->
        <member-points-history></member-points-history>
        <!-- 其他页面内容 -->
    </div>
</template>

<script>
import MemberPointsHistory from './MemberPointsHistory.vue';

export default {
    components: {
        MemberPointsHistory,
    }
};
</script>

2. MemberPointsHistory.vue のメンバー ID を変更し、実際のメンバー ID に置き換えます。

これで会員ポイント利用履歴照会機能の実装が完了しました。フロントエンドページでは会員のポイント利用履歴を表示したり、バックエンドが提供するAPIに基づいてデータを取得したりします。 PHP と Vue の連携により、この機能を迅速に実装できます。

以上がPHP と Vue: メンバーシップ ポイントの使用履歴クエリを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。