PHP et Vue : Comment implémenter l'achat de points dans un centre commercial pour les points des membres

PHP et Vue : Comment réaliser des achats dans un centre commercial avec des points membres

Introduction :
Le centre commercial de points est une forme courante d'activités promotionnelles sur les plateformes de commerce électronique modernes. Les utilisateurs peuvent utiliser leurs points pour échanger des produits ou participer à des activités. . Dans cet article, nous présenterons comment utiliser PHP et Vue pour implémenter une fonction simple d'achat de points d'adhésion dans un centre commercial et fournirons des exemples de code spécifiques.

1. Implémentation backend (PHP) :

1. Créer une table de base de données
Tout d'abord, nous devons créer une table de base de données pour stocker les informations sur les points des membres. Voici un exemple simple de structure de tableau :

CREATE TABLE `members` (
   `id` INT(11) NOT NULL AUTO_INCREMENT,
   `name` VARCHAR(50) NOT NULL,
   `points` INT(11) NOT NULL DEFAULT '0',
   PRIMARY KEY (`id`)
);

2. Obtenir des informations sur les points des membres
Ensuite, nous devons écrire une interface PHP pour obtenir des informations sur les points des membres. Dans cet exemple, nous utiliserons une simple requête GET pour obtenir des informations sur les points des membres.

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

if (!$conn) {
   die("连接失败: " . mysqli_connect_error());
}

// 获取会员积分信息
$sql = "SELECT * FROM members WHERE id = " . $_GET['memberId'];
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
   // 输出会员积分信息
   while($row = mysqli_fetch_assoc($result)) {
      echo "会员ID: " . $row['id'] . ", 积分: " . $row['points'];
   }
} else {
   echo "会员不存在";
}

// 关闭连接
mysqli_close($conn);
?>

3. Mettre à jour les informations sur les points du membre
Une fois que l'utilisateur a échangé des cadeaux ou participé à des activités, nous devons mettre à jour les informations sur les points du membre. Ce qui suit est un exemple d’interface pour mettre à jour les informations sur les points d’un membre. Dans cet exemple, nous supposons que chaque fois que vous échangez un article, un certain nombre de points est consommé.

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

if (!$conn) {
   die("连接失败: " . mysqli_connect_error());
}

// 更新会员积分
$sql = "UPDATE members SET points = points - " . $_POST['points'] . " WHERE id = " . $_POST['memberId'];

if (mysqli_query($conn, $sql)) {
   echo "积分更新成功";
} else {
   echo "积分更新失败: " . mysqli_error($conn);
}

// 关闭连接
mysqli_close($conn);
?>

2. Implémentation front-end (Vue) :

1. Créer un projet Vue
Tout d'abord, nous devons utiliser la CLI Vue pour créer un nouveau projet Vue. Ouvrez le terminal et exécutez la commande suivante :

vue create point-mall

Configurez selon les invites et entrez dans le répertoire du projet après une création réussie :

cd point-mall

2 Créez un composant de page
Créez un composant Vue nommé Home.vue dans le répertoire src pour. afficher les points des membres et la liste des produits. Voici un exemple de code simplifié :

<template>
   <div>
      <h1 id="会员积分商城">会员积分商城</h1>
      <p>当前积分: {{ points }}</p>
      <h2 id="商品列表">商品列表：</h2>
      <ul>
         <li v-for="item in items" :key="item.id">
            {{ item.name }} - {{ item.points }}积分
            <button @click="exchange(item)">兑换</button>
         </li>
      </ul>
   </div>
</template>

<script>
export default {
   data() {
      return {
         points: 0,
         items: [
            { id: 1, name: '商品1', points: 10 },
            { id: 2, name: '商品2', points: 20 },
            { id: 3, name: '商品3', points: 30 }
         ]
      };
   },
   methods: {
      exchange(item) {
         // 发送POST请求更新积分
         fetch('/api/update_points', {
            method: 'POST',
            body: JSON.stringify({
               memberId: 1, // 替换为实际会员ID
               points: item.points
            }),
            headers: {
               'Content-Type': 'application/json'
            }
         })
         .then(response => response.json())
         .then(data => {
            if (data.success) {
               alert('兑换成功');
               // 更新积分
               this.points -= item.points;
            } else {
               alert('兑换失败');
            }
         })
         .catch(error => {
            console.error('错误:', error);
         });
      }
   },
   mounted() {
      // 获取会员积分信息
      fetch('/api/get_points?memberId=1') // 替换为实际会员ID
         .then(response => response.text())
         .then(data => {
            this.points = data;
         })
         .catch(error => {
            console.error('错误:', error);
         });
   }
};
</script>

3. Configurer les projets de routage et de démarrage
Ensuite, nous devons configurer les projets de routage et de démarrage. Ouvrez le fichier main.js dans le répertoire src et ajoutez le code suivant :

import Home from './Home.vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
   routes: [
      { path: '/', component: Home }
   ]
});

new Vue({
   router,
   render: h => h(Home)
}).$mount('#app');

4. Démarrez le projet
Exécutez la commande suivante dans le terminal pour démarrer le projet :

npm run serve

Visitez http://localhost:8080 pour voir. la page du centre commercial de points membres.

Résumé :
Grâce à l'exemple ci-dessus, nous pouvons voir comment utiliser PHP et Vue pour implémenter une fonction simple d'achat de points dans un centre commercial pour les points des membres. Obtenez et mettez à jour les informations sur les points des membres via l'interface PHP back-end, affichez les points des membres et les listes de produits via le composant Vue frontal et implémentez la fonction d'échange de points. Ceci n'est qu'un exemple simple. Dans les applications réelles, des problèmes tels que la sécurité et l'authentification des utilisateurs doivent être pris en compte, mais cet exemple peut être utilisé comme cadre de base sur lequel vous pouvez développer et optimiser.

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!