PHP dan Vue: Bagaimana untuk melaksanakan fungsi bertukar mata keahlian dan hadiah

PHP dan Vue: merealisasikan fungsi mata ahli dan pertukaran hadiah

Kebanyakan pusat membeli-belah dalam talian menyediakan sistem mata ahli untuk menarik pengguna, dan salah satu cara untuk menggunakan mata keahlian ialah menukarnya dengan hadiah. Dalam artikel ini, kami akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi bertukar mata keahlian dan hadiah, serta menyediakan contoh kod khusus.

1. Reka bentuk pangkalan data

Pertama sekali, kita perlu mereka bentuk pangkalan data untuk menyimpan mata keahlian dan maklumat hadiah. Kami mencipta dua jadual: ahli dan hadiah. Jadual ahli menyimpan maklumat ahli, termasuk ID ahli, nama dan medan mata. Jadual hadiah menyimpan maklumat hadiah, termasuk ID hadiah, nama dan medan mata yang diperlukan. members和gifts。members表存储会员信息，包括会员ID、姓名和积分字段。gifts表存储礼品信息，包括礼品ID、名称和所需积分字段。

以下是members表和gifts

Berikut ialah pernyataan penciptaan SQL untuk jadual ahli dan jadual hadiah:

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

Seterusnya, kami mencipta fail PHP untuk mengendalikan API bahagian belakang. Kami akan menggunakan sambungan PDO untuk menyambung ke pangkalan data dan melaksanakan pertanyaan SQL.

Pertama, kami mencipta API untuk mendapatkan mata keahlian. Kami menanyakan pangkalan data dengan ID ahli dan mengembalikan mata yang sepadan.

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

Seterusnya, kami mencipta API untuk melaksanakan mata keahlian dan pertukaran hadiah. Kami mula-mula menyemak sama ada mata ahli adalah mencukupi, dan jika ya, tolak mata yang sepadan dan masukkan rekod penebusan.

<?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. Antara muka hadapan

Di bahagian hadapan, kami menggunakan Vue untuk membina antara muka interaktif dan menghantar permintaan AJAX.

Pertama, kami mencipta komponen paparan mata ahli.

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

Seterusnya, kami mencipta komponen pemilihan hadiah.

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

Akhir sekali, kami memperkenalkan kedua-dua komponen ini ke dalam antara muka utama.

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

Dengan menggunakan PHP dan Vue, kami boleh melaksanakan fungsi bertukar mata keahlian dan hadiah dengan mudah dan berkesan. Dapatkan mata ahli dan maklumat hadiah daripada API bahagian belakang, serta paparkan serta lakukan operasi penebusan dalam antara muka bahagian hadapan, supaya pengguna boleh menggunakan mata untuk menebus hadiah dengan mudah. Di atas hanyalah contoh mudah Dalam aplikasi sebenar, ia perlu dikembangkan dan dioptimumkan mengikut keperluan tertentu.

Atas ialah kandungan terperinci PHP dan Vue: Bagaimana untuk melaksanakan fungsi bertukar mata keahlian dan hadiah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!