PHP and Vue: How to implement the function of exchanging membership points and gifts

PHP and Vue: realize the function of exchanging membership points and gifts

Most online malls provide a membership points system to attract users, and the use of membership points One way is to exchange with gifts. In this article, we will introduce how to use PHP and Vue to implement the function of exchanging membership points and gifts, and provide specific code examples.

1. Database design

First, we need to design a database to store membership points and gift information. We create two tables: members and gifts. membersThe table stores member information, including member ID, name and points fields. The gifts table stores gift information, including gift ID, name and required points fields.

The following are the SQL creation statements for the members table and the gifts table:

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. Backend API

Next, we create a PHP file to handle the backend API. We will use the PDO extension to connect to the database and execute SQL queries.

First, we create an API for obtaining membership points. We query the database by member ID and return the corresponding points.

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

Next, we create an API for performing membership points and gift exchanges. We first check whether the member's points are sufficient, and if so, subtract the corresponding points and insert a redemption record.

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

In the front-end, we use Vue to build the interactive interface and send AJAX requests.

First, we create a member points display component.

<template>
  <div>
    <h2 id="Member-Points-points">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>

Next, we create a gift selection component.

<template>
  <div>
    <h2 id="Select-Gift">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>

Finally, we introduce these two components in the main interface.

<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. Summary

By using PHP and Vue, we can simply and effectively implement the function of exchanging membership points and gifts. Obtain member points and gift information from the back-end API, and display and perform redemption operations in the front-end interface, so that users can easily use points to redeem gifts. The above is just a simple example. In actual applications, it needs to be expanded and optimized according to specific needs.

The above is the detailed content of PHP and Vue: How to implement the function of exchanging membership points and gifts. For more information, please follow other related articles on the PHP Chinese website!