PHP and Vue: How to implement membership point usage history query

PHP and Vue: Member points usage history query implementation and code examples

Introduction:
With the popularity of e-commerce, the membership points system is increasingly used widely used. Querying the usage history of membership points has become one of the very important functional requirements. This article will introduce how to use PHP and Vue to implement the membership points usage history query function, and provide specific code examples.

1. Database design
In order to store the usage history of member points, we can design a data table named member_points_history. The table can contain the following fields:

1. id: primary key, auto-increment;
2. member_id: member ID, used to associate with the member table;
3. points: use The number of points;
4. action: type of point operation, such as consumption, redemption, etc.;
5. create_time: record creation time.

2. Back-end implementation

1. Create PHP file api.php for processing front-end requests.
2. First, we need to connect to the database and set the character encoding.

<?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. Next, we can write an API for obtaining member points usage history.

<?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. Front-end implementation

1. Create Vue component MemberPointsHistory.vue, used to display member points usage history.

<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. Page call

1. Introduce the MemberPointsHistory component into the page that needs to display the member points usage history.

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

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

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

2. Modify the member ID in MemberPointsHistory.vue and replace it with the actual member ID.

So far, we have completed the implementation of the member points usage history query function. The front-end page will display the member's points usage history and obtain data based on the API provided by the back-end. Through the cooperation of PHP and Vue, we can quickly implement this function.

The above is the detailed content of PHP and Vue: How to implement membership point usage history query. For more information, please follow other related articles on the PHP Chinese website!