PHP et Vue : Comment implémenter une requête d'historique d'utilisation des points d'adhésion

PHP et Vue : implémentation de requêtes d'historique d'utilisation des points membres et exemples de code

Introduction :
Avec la popularité du commerce électronique, le système de points d'adhésion est de plus en plus largement utilisé. Interroger l’historique d’utilisation des points d’adhésion est devenu l’une des exigences fonctionnelles les plus importantes. Cet article expliquera comment utiliser PHP et Vue pour implémenter la fonction de requête d'historique d'utilisation des points d'adhésion et fournira des exemples de code spécifiques.

1. Conception de la base de données
Afin de stocker l'historique d'utilisation des points membres, nous pouvons concevoir une table de données nommée member_points_history. La table peut contenir les champs suivants : member_points_history的数据表。该表可以包含以下字段：

1. id：主键，自增；
2. member_id：会员ID，用于和会员表关联；
3. points：使用的积分数量；
4. action：积分操作类型，如消费、兑换等；
5. create_time：记录创建时间。

二、后端实现

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());
    }
}
?>

三、前端实现

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>

四、页面调用

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
   1. id : clé primaire, auto-incrémentation ;
   2. member_id : identifiant du membre, utilisé pour associer à la table membre
3. points : le nombre de points utilisés ;

   action : type d'opération de point, tel que consommation, rachat, etc. ;

4. create_time : heure de création de l'enregistrement. 🎜🎜🎜2. Implémentation backend🎜
   1. Créez un fichier PHP api.php pour traiter les requêtes front-end. 🎜
   2. Tout d'abord, nous devons nous connecter à la base de données et définir l'encodage des caractères. 🎜🎜rrreee
      3. Ensuite, nous pouvons écrire une API pour obtenir l'historique d'utilisation des points des membres. 🎜🎜rrreee🎜3. Implémentation front-end🎜
         1. Créez le composant Vue MemberPointsHistory.vue pour afficher l'historique d'utilisation des points des membres. 🎜🎜rrreee🎜4. Appel de page🎜
            1. Introduisez le composant MemberPointsHistory dans la page qui doit afficher l'historique d'utilisation des points des membres. 🎜🎜rrreee
               2. Modifiez l'ID de membre dans MemberPointsHistory.vue et remplacez-le par l'ID de membre réel. 🎜🎜🎜À ce stade, nous avons terminé la mise en œuvre de la fonction de requête sur l'historique d'utilisation des points membres. La page frontale affichera l'historique d'utilisation des points du membre et obtiendra des données basées sur l'API fournie par le back-end. Grâce à la coopération de PHP et Vue, nous pouvons rapidement implémenter cette fonction. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!