PHP dan Vue: Cara mengemas kini mata keahlian secara automatik berdasarkan jumlah pembayaran

PHP dan Vue: Cara mengemas kini mata keahlian secara automatik berdasarkan jumlah pembayaran

Dalam masyarakat moden, banyak syarikat dan peniaga akan menyediakan pelanggan dengan sistem mata keahlian untuk menggalakkan penggunaan pelanggan dan meningkatkan kesetiaan pelanggan. Bagi sesetengah perusahaan kecil dan sederhana, ramai yang akan memilih untuk menggunakan PHP dan Vue untuk membangunkan tapak web atau pusat membeli-belah mereka sendiri dan melaksanakan fungsi mata keahlian tersebut.

Artikel ini akan menggunakan contoh kod khusus untuk memperkenalkan cara menggunakan PHP dan Vue untuk mengemas kini mata keahlian secara automatik berdasarkan jumlah pembayaran.

1. Backend Development (PHP)
   Pertama, kita perlu menulis kod di bahagian belakang untuk mengendalikan logik pembayaran dan kemas kini mata. Kita boleh menggunakan PHP untuk menyelesaikan tugas ini.

(1) Buat jadual pangkalan data
Pertama, kita perlu mencipta jadual pangkalan data bernama "ahli" untuk menyimpan maklumat ahli dan mata.

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

(2) Tambah ahli dan kemas kini mata
Seterusnya, kita perlu menulis kod PHP untuk menambah ahli baharu dan mengemas kini mata.

<?php
// 连接到数据库
$conn = mysqli_connect("localhost", "username", "password", "database_name");

// 检查连接是否成功
if (!$conn) {
    die("连接数据库失败: " . mysqli_connect_error());
}

// 添加新会员
$name = $_POST['name'];
$sql = "INSERT INTO members (name) VALUES ('$name')";
if (mysqli_query($conn, $sql)) {
    echo "新会员添加成功";
} else {
    echo "添加会员失败: " . mysqli_error($conn);
}

// 更新积分
$points = $_POST['points'];
$member_id = $_POST['member_id'];
$sql = "UPDATE members SET points = points + $points WHERE id = $member_id";
if (mysqli_query($conn, $sql)) {
    echo "积分更新成功";
} else {
    echo "积分更新失败: " . mysqli_error($conn);
}

// 关闭数据库连接
mysqli_close($conn);
?>

2. Pembangunan bahagian hadapan (Vue)
   Seterusnya, kita perlu menggunakan Vue untuk mengendalikan pembayaran bahagian hadapan dan fungsi kemas kini mata.

(1) Buat komponen Vue yang mengandungi borang pembayaran dan logik kemas kini mata.

<template>
  <div>
    <form @submit="handlePayment">
      <label for="amount">支付金额:</label>
      <input type="number" id="amount" v-model="amount" required>
      <button type="submit">支付</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 0,
    };
  },
  methods: {
    handlePayment(event) {
      event.preventDefault();

      // 调用后端API来添加新会员
      axios
        .post('/api/addMember', { name: 'John Doe' })
        .then((response) => {
          console.log(response.data);
        })
        .catch((error) => {
          console.error(error);
        });

      // 调用后端API来更新积分
      axios
        .post('/api/updatePoints', { member_id: 1, points: this.amount })
        .then((response) => {
          console.log(response.data);
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

3. Sepadukan bahagian belakang dan bahagian hadapan
   Akhir sekali, kita perlu menyepadukan kod PHP bahagian belakang dan kod Vue bahagian hadapan.

Dalam projek PHP anda, buat fail bernama "api.php" dan tambahkan kod berikut di dalamnya.

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $request_uri = $_SERVER['REQUEST_URI'];

    if ($request_uri === '/api/addMember') {
        // 添加会员的代码
    }

    else if ($request_uri === '/api/updatePoints') {
        // 更新积分的代码
    }
}
?>

Dalam projek Vue, perkenalkan komponen Vue untuk kemas kini pembayaran dan mata ke dalam halaman yang diperlukan.

<template>
  <div>
    <h1 id="Pay-and-Update-Points">Pay and Update Points</h1>
    <payment-form></payment-form>
  </div>
</template>

<script>
import PaymentForm from './PaymentForm.vue';

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

Di atas ialah contoh kod menggunakan PHP dan Vue untuk mengemas kini mata keahlian secara automatik berdasarkan jumlah pembayaran. Dengan cara ini, kami boleh melaksanakan sistem mata ahli yang mudah dan mengemas kini mata ahli berdasarkan jumlah pembayaran. Sudah tentu, ini hanyalah contoh asas, dan lebih banyak keperluan perniagaan serta langkah keselamatan perlu dipertimbangkan dalam sistem sebenar. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci PHP dan Vue: Cara mengemas kini mata keahlian secara automatik berdasarkan jumlah pembayaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!