Cara menggunakan PHP dan Vue untuk membangunkan fungsi membuka kunci mata keahlian secara automatik selepas pembayaran-tutorial php-php.cn

Cara menggunakan PHP dan Vue untuk membangunkan fungsi membuka kunci mata keahlian secara automatik selepas pembayaran

王林

Lepaskan： 2023-09-24 09:20:01

asal

751 orang telah melayarinya

Cara menggunakan PHP dan Vue untuk membangunkan fungsi membuka kunci mata keahlian secara automatik selepas pembayaran

Dengan perkembangan pesat e-dagang, semakin banyak syarikat mula memberi perhatian kepada sistem keahlian. Untuk menarik pengguna, banyak syarikat menyediakan sistem mata keahlian, dan anda boleh mendapatkan beberapa hak atau faedah istimewa dengan mengumpul mata melalui penggunaan. Jadi, bagaimana untuk merealisasikan fungsi membuka kunci mata keahlian secara automatik selepas pengguna membayar? Artikel ini akan memperkenalkan cara untuk membangunkan ciri ini menggunakan PHP dan Vue, dan memberikan contoh kod khusus.

Pertama, kami memerlukan pelayan bahagian belakang untuk mengendalikan logik pembayaran pengguna dan membuka kunci mata. Di sini kami menggunakan PHP sebagai bahasa backend. Pertama, kita perlu mencipta jadual pangkalan data untuk menyimpan maklumat mata pengguna. Anda boleh mencipta jadual bernama "ahli", yang mengandungi medan berikut:

id: ID ahli, pengecam unik
nama: nama ahli
mata: bilangan mata ahli
status: status ahli, digunakan untuk menunjukkan sama ada Unlocked

Seterusnya, kita boleh mencipta fail PHP (seperti unlock.php) untuk mengendalikan logik mata membuka kunci selepas pembayaran. Pertama, kami mengira bilangan mata yang perlu diperoleh berdasarkan jumlah pembayaran dengan menerima parameter pembayaran pengguna (seperti ID ahli dan jumlah pembayaran).

<?php
// 获取用户支付的参数
$memberId = $_POST["memberId"];
$paymentAmount = $_POST["paymentAmount"];

// 计算积分数量
$points = $paymentAmount * 10; // 假设每10元获得1积分

// 更新会员积分信息
$conn = new mysqli("localhost", "username", "password", "database_name");
$sql = "UPDATE members SET points = points + $points WHERE id = $memberId";
$result = $conn->query($sql);

if ($result) {
  echo "积分解锁成功";
} else {
  echo "积分解锁失败";
}
?>

Salin selepas log masuk

Dengan cara ini, apabila pengguna berjaya membayar, bilangan mata dalam jadual keahlian akan meningkat dengan sewajarnya. Seterusnya, kita perlu menggunakan Vue untuk melaksanakan fungsi membuka kunci mata pada halaman hadapan.

Pertama, kami perlu memperkenalkan perpustakaan Vue dan axios untuk interaksi data dengan bahagian belakang. Anda boleh menambah kod berikut dalam fail HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>支付后会员积分自动解锁</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <div id="app">
    <h1>会员积分解锁</h1>
    <input type="text" v-model="memberId" placeholder="请输入会员ID">
    <input type="number" v-model="paymentAmount" placeholder="请输入支付金额">
    <button v-on:click="unlockPoints">解锁积分</button>
    <p>{{ unlockResult }}</p>
  </div>

  <script>
    new Vue({
      el: "#app",
      data: {
        memberId: "",
        paymentAmount: "",
        unlockResult: ""
      },
      methods: {
        unlockPoints: function() {
          axios.post("unlock.php", {
              memberId: this.memberId,
              paymentAmount: this.paymentAmount
            })
            .then(function(response) {
              this.unlockResult = response.data;
            })
            .catch(function(error) {
              console.log(error);
            });
        }
      }
    });
  </script>
</body>

</html>

Salin selepas log masuk

Dalam atribut data Vue, kami mentakrifkan tiga pembolehubah: ID ahli, jumlah pembayaran dan hasil buka kunci. Dalam atribut kaedah, kami mentakrifkan kaedah unlockPoints untuk mengendalikan logik mengklik butang titik buka kunci. Kaedah ini menghantar permintaan POST ke bahagian belakang melalui pustaka axios, menghantar ID ahli dan jumlah pembayaran sebagai parameter kepada fail unlock.php bahagian belakang.

Selepas menerima parameter, fail unlock.php di bahagian belakang mengira bilangan mata yang perlu diperoleh berdasarkan jumlah pembayaran, dan mengemas kini bilangan mata ahli yang sepadan dalam jadual keahlian. Akhir sekali, hasil buka kunci yang sepadan dikembalikan ke bahagian hadapan melalui respons, dan halaman hujung hadapan boleh memaparkan hasil buka kunci.

Di atas adalah langkah khusus dan kod contoh untuk menggunakan PHP dan Vue untuk membangunkan fungsi membuka kunci mata keahlian secara automatik selepas pembayaran. Melalui fungsi ini, pengguna secara automatik boleh mendapatkan mata keahlian yang sepadan dan menikmati keistimewaan keahlian selepas pembayaran selesai. Ciri ini bukan sahaja meningkatkan pengalaman pengguna, tetapi juga menggalakkan pengguna membuat pembelian berulang. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan fungsi membuka kunci mata keahlian secara automatik selepas pembayaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!