Cara menggunakan PHP dan Vue untuk membangunkan dan mengemas kini nilai mata keahlian mengikut jenis produk selepas pembayaran

Cara menggunakan PHP dan Vue untuk membangun dan mengemas kini nilai mata ahli mengikut jenis produk selepas pembayaran

Dengan populariti pembayaran mudah alih, semakin ramai peniaga mula menggunakan teknologi Internet untuk menukar transaksi luar talian kepada pembayaran dalam talian. Dalam proses ini, peniaga sering berharap untuk mengemas kini nilai mata ahli berdasarkan jenis barang yang dibeli oleh pengguna. Artikel ini akan memperkenalkan cara menggunakan teknologi PHP dan Vue untuk melaksanakan fungsi ini, dan memberikan contoh kod khusus.

1. Pembangunan back-end (PHP)

1. Buat jadual pangkalan data

Pertama, kita perlu mencipta jadual pangkalan data untuk menyimpan maklumat ahli, termasuk ID ahli, nama ahli, mata ahli, item yang dibeli oleh ahli dan medan lain . Cipta struktur jadual berikut:

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

2. Tulis kod PHP untuk mengemas kini mata ahli

Dalam kod PHP, apabila pengguna berjaya membayar, kita perlu mengemas kini nilai mata ahli yang sepadan mengikut jenis produk yang dibeli. Tulis kod PHP berikut:

<?php
  $productId = $_POST['product_id']; // 获取商品ID
  $memberId = $_POST['member_id']; // 获取会员ID

  // 根据商品ID查询对应的积分增加值
  $points = getPointsByProductId($productId);

  // 更新会员积分
  updateMemberPoints($memberId, $points);

  // 返回更新结果
  echo json_encode(['status' => 'success', 'message' => '积分更新成功']);

  // 根据商品ID查询积分增加值的函数
  function getPointsByProductId($productId) {
    // 根据产品ID查询对应的积分增加值
    // 这里可以根据具体业务逻辑自行实现查询逻辑
    $points = 0;
    switch ($productId) {
      case 1:
        $points = 10;
        break;
      case 2:
        $points = 20;
        break;
      case 3:
        $points = 30;
        break;
      default:
        $points = 0;
        break;
    }
    return $points;
  }

  // 更新会员积分的函数
  function updateMemberPoints($memberId, $points) {
    // 根据会员ID更新会员的积分
    // 这里可以根据具体业务逻辑自行实现更新逻辑
  }
?>

Dalam kod di atas, kami memperoleh ID produk dan ID ahli yang diluluskan oleh pengguna selepas pembayaran berjaya, tanya mata yang sepadan meningkatkan nilai berdasarkan ID produk, dan kemudian mengemas kini mata ahli.

2. Pembangunan bahagian hadapan (Vue)

1. Buat projek Vue

Pertama, kita perlu mencipta projek Vue, yang boleh dibuat dengan cepat menggunakan Vue CLI. Jalankan arahan berikut dalam terminal:

$ vue create member-points

2. Tulis komponen Vue

Dalam projek Vue, kita perlu mencipta komponen untuk melaksanakan fungsi mengemas kini mata ahli selepas pembayaran. Cipta komponen MemberPoints.vue dalam direktori src/components dan tulis kod berikut:

<template>
  <div>
    <h2 id="支付成功-更新会员积分">支付成功，更新会员积分</h2>
    <form @submit.prevent="updatePoints">
      <label>商品ID:</label>
      <input type="number" v-model="productId">
      <label>会员ID:</label>
      <input type="number" v-model="memberId">
      <button type="submit">更新积分</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productId: '',
      memberId: ''
    }
  },
  methods: {
    updatePoints() {
      // 发送请求到后端更新会员积分
      fetch('/update_points.php', {
        method: 'POST',
        body: JSON.stringify({
          product_id: this.productId,
          member_id: this.memberId
        })
      })
      .then(response => response.json())
      .then(data => {
        console.log(data);
        // 更新成功后的处理逻辑
      })
      .catch(error => {
        console.error(error);
        // 更新失败后的处理逻辑
      });
    }
  }
}
</script>

Dalam kod di atas, kami mencipta borang untuk memasukkan ID produk dan ID ahli, dan menghantar permintaan POST ke bahagian belakang update_points.php melalui fail fungsi ambil untuk mengemas kini mata keahlian.

3. Menggunakan komponen MemberPoints dalam App.vue

Dalam fail src/App.vue, kita boleh menggunakan komponen MemberPoints untuk memaparkan fungsi mengemas kini mata ahli selepas pembayaran. Ubah suai fail App.vue seperti berikut:

<template>
  <div>
    <h1 id="支付后会员积分更新">支付后会员积分更新</h1>
    <MemberPoints></MemberPoints>
  </div>
</template>

<script>
import MemberPoints from './components/MemberPoints.vue'

export default {
  components: {
    MemberPoints
  }
}
</script>

Pada ketika ini, kami telah selesai menggunakan PHP dan Vue untuk membangunkan fungsi mengemas kini nilai mata ahli mengikut jenis produk selepas pembayaran.

Ringkasan:

Dengan menggunakan teknologi PHP dan Vue, artikel ini memperkenalkan cara melaksanakan fungsi mengemas kini nilai mata ahli mengikut jenis produk selepas pembayaran. Kod PHP hujung belakang digunakan untuk memproses logik kemas kini mata ahli, dan kod Vue hujung hadapan digunakan untuk memaparkan dan mencetuskan operasi kemas kini mata ahli. Semoga artikel ini bermanfaat kepada semua.

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan dan mengemas kini nilai mata keahlian mengikut jenis produk selepas pembayaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!