PHP et Vue : Comment implémenter la fonction d'échange de points d'adhésion et de cadeaux

PHP et Vue : réalisent la fonction d'échange de points d'adhésion et de cadeaux

La plupart des centres commerciaux en ligne proposent un système de points d'adhésion pour attirer les utilisateurs, et l'une des façons d'utiliser les points d'adhésion est de les échanger contre des cadeaux. Dans cet article, nous présenterons comment utiliser PHP et Vue pour implémenter la fonction d'échange de points d'adhésion et de cadeaux, et fournirons des exemples de code spécifiques.

1. Conception de la base de données

Tout d'abord, nous devons concevoir la base de données pour stocker les points d'adhésion et les informations sur les cadeaux. Nous créons deux tables : membres et cadeaux. La table members stocke les informations sur les membres, y compris les champs d'ID, de nom et de points du membre. La table cadeaux stocke les informations sur les cadeaux, y compris les champs d'identifiant du cadeau, de nom et de points requis. members和gifts。members表存储会员信息，包括会员ID、姓名和积分字段。gifts表存储礼品信息，包括礼品ID、名称和所需积分字段。

以下是members表和gifts

Voici les instructions de création SQL pour la table members et la table gifts :

CREATE TABLE members (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(50),
  points INT
);

CREATE TABLE gifts (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(50),
  points_required INT
);

2. API Backend

Ensuite, nous créons un fichier PHP pour gérer l'API back-end. Nous utiliserons l'extension PDO pour nous connecter à la base de données et exécuter des requêtes SQL.

Tout d'abord, nous créons une API pour obtenir des points d'adhésion. Nous interrogeons la base de données par ID de membre et renvoyons les points correspondants.

<?php
header('Content-Type: application/json');

$memberId = $_GET['memberId'];

try {
  $pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  $stmt = $pdo->prepare('SELECT points FROM members WHERE id = :id');
  $stmt->bindParam(':id', $memberId, PDO::PARAM_INT);
  $stmt->execute();
  
  $result = $stmt->fetch(PDO::FETCH_ASSOC);
  
  echo json_encode($result);
} catch(PDOException $e) {
  echo json_encode(['error' => $e->getMessage()]);
}
?>

Ensuite, nous créons une API pour effectuer des points d'adhésion et des échanges de cadeaux. Nous vérifions d'abord si les points du membre sont suffisants, et si c'est le cas, soustrayons les points correspondants et insérons un enregistrement d'échange.

<?php
header('Content-Type: application/json');

$memberId = $_POST['memberId'];
$giftId = $_POST['giftId'];

try {
  $pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  
  // 获取会员积分
  $stmt = $pdo->prepare('SELECT points FROM members WHERE id = :id');
  $stmt->bindParam(':id', $memberId, PDO::PARAM_INT);
  $stmt->execute();
  
  $memberPoints = $stmt->fetchColumn();
  
  // 获取礼品所需积分
  $stmt = $pdo->prepare('SELECT points_required FROM gifts WHERE id = :id');
  $stmt->bindParam(':id', $giftId, PDO::PARAM_INT);
  $stmt->execute();
  
  $giftPoints = $stmt->fetchColumn();
  
  if ($memberPoints >= $giftPoints) {
    // 减去积分
    $stmt = $pdo->prepare('UPDATE members SET points = points - :points WHERE id = :id');
    $stmt->bindParam(':id', $memberId, PDO::PARAM_INT);
    $stmt->bindParam(':points', $giftPoints, PDO::PARAM_INT);
    $stmt->execute();
    
    // 插入兑换记录
    $stmt = $pdo->prepare('INSERT INTO exchanges (member_id, gift_id) VALUES (:memberId, :giftId)');
    $stmt->bindParam(':memberId', $memberId, PDO::PARAM_INT);
    $stmt->bindParam(':giftId', $giftId, PDO::PARAM_INT);
    $stmt->execute();
    
    echo json_encode(['success' => true]);
  } else {
    echo json_encode(['success' => false, 'message' => 'Insufficient points']);
  }
} catch(PDOException $e) {
  echo json_encode(['error' => $e->getMessage()]);
}
?>

3. Interface front-end

Sur le front-end, nous utilisons Vue pour créer des interfaces interactives et envoyer des requêtes AJAX.

Tout d'abord, nous créons un composant d'affichage des points des membres.

<template>
  <div>
    <h2>Member Points: {{ points }}</h2>
    <button @click="exchangeGift">Exchange Gift</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      points: 0,
      memberId: 1,
      giftId: 1
    };
  },
  mounted() {
    this.fetchPoints();
  },
  methods: {
    fetchPoints() {
      axios
        .get('api/getPoints.php', {
          params: {
            memberId: this.memberId
          }
        })
        .then(response => {
          this.points = response.data.points;
        })
        .catch(error => {
          console.error(error);
        });
    },
    exchangeGift() {
      axios
        .post('api/exchangeGift.php', {
          memberId: this.memberId,
          giftId: this.giftId
        })
        .then(response => {
          if (response.data.success) {
            alert('Exchange successful');
            this.fetchPoints();
          } else {
            alert(response.data.message);
          }
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

Ensuite, nous créons un composant de sélection de cadeaux.

<template>
  <div>
    <h2>Select Gift</h2>
    <select v-model="giftId">
      <option v-for="gift in gifts" :key="gift.id" :value="gift.id">{{ gift.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gifts: [],
      giftId: 1
    };
  },
  mounted() {
    this.fetchGifts();
  },
  methods: {
    fetchGifts() {
      axios
        .get('api/getGifts.php')
        .then(response => {
          this.gifts = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

Enfin, nous introduisons ces deux composants dans l'interface principale.

<template>
  <div>
    <member-points></member-points>
    <gift-selection></gift-selection>
  </div>
</template>

<script>
import MemberPoints from './MemberPoints.vue';
import GiftSelection from './GiftSelection.vue';

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

4. Résumé

En utilisant PHP et Vue, nous pouvons mettre en œuvre simplement et efficacement la fonction d'échange de points d'adhésion et de cadeaux. Obtenez des points de membre et des informations sur les cadeaux à partir de l'API back-end, et affichez et effectuez des opérations d'échange dans l'interface frontale, afin que les utilisateurs puissent facilement utiliser des points pour échanger des cadeaux. Ce qui précède n'est qu'un exemple simple. Dans les applications réelles, il doit être étendu et optimisé en fonction des besoins spécifiques. 🎜

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!