PHP dan Vue: Cara melaksanakan beli-belah pusat membeli-belah mata untuk mata ahli

php dan Vue: Cara Menyedari Points Mall Membeli-belah dengan Points Anggota Pengenalan:

points Mall adalah satu bentuk aktiviti promosi yang biasa dalam platform e-dagang moden. . Dalam artikel ini, kami akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi beli-belah pusat beli-belah mata keahlian yang mudah, dan menyediakan contoh kod khusus.

1. Pelaksanaan Backend (PHP):

1 Buat jadual pangkalan data

Pertama, kita perlu mencipta jadual pangkalan data untuk menyimpan maklumat mata ahli. Berikut ialah contoh struktur jadual mudah:

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

2. Dapatkan maklumat mata ahli

Seterusnya, kita perlu menulis antara muka PHP untuk mendapatkan maklumat mata ahli. Dalam contoh ini, kami akan menggunakan permintaan GET yang mudah untuk mendapatkan maklumat mata ahli.

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

if (!$conn) {
   die("连接失败: " . mysqli_connect_error());
}

// 获取会员积分信息
$sql = "SELECT * FROM members WHERE id = " . $_GET['memberId'];
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
   // 输出会员积分信息
   while($row = mysqli_fetch_assoc($result)) {
      echo "会员ID: " . $row['id'] . ", 积分: " . $row['points'];
   }
} else {
   echo "会员不存在";
}

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

3. Kemas kini maklumat mata ahli

Selepas pengguna menebus hadiah atau menyertai aktiviti, kami perlu mengemas kini maklumat mata ahli. Berikut adalah contoh antara muka untuk mengemas kini maklumat mata ahli. Dalam contoh ini, kami menganggap bahawa setiap kali anda menebus item, jumlah mata tertentu digunakan.

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

if (!$conn) {
   die("连接失败: " . mysqli_connect_error());
}

// 更新会员积分
$sql = "UPDATE members SET points = points - " . $_POST['points'] . " WHERE id = " . $_POST['memberId'];

if (mysqli_query($conn, $sql)) {
   echo "积分更新成功";
} else {
   echo "积分更新失败: " . mysqli_error($conn);
}

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

2. Pelaksanaan bahagian hadapan (Vue):

1 Buat projek Vue

Mula-mula, kita perlu menggunakan Vue CLI untuk mencipta projek Vue baharu. Buka terminal dan laksanakan arahan berikut:

vue create point-mall

Konfigurasikan mengikut gesaan, dan masukkan direktori projek selepas berjaya dibuat:

cd point-mall

2 Cipta komponen halaman

Buat komponen Vue bernama Home.vue dalam direktori src ke ahli paparan Mata dan senarai produk. Berikut ialah kod contoh yang dipermudahkan:

<template>
   <div>
      <h1>会员积分商城</h1>
      <p>当前积分: {{ points }}</p>
      <h2>商品列表：</h2>
      <ul>
         <li v-for="item in items" :key="item.id">
            {{ item.name }} - {{ item.points }}积分
            <button @click="exchange(item)">兑换</button>
         </li>
      </ul>
   </div>
</template>

<script>
export default {
   data() {
      return {
         points: 0,
         items: [
            { id: 1, name: '商品1', points: 10 },
            { id: 2, name: '商品2', points: 20 },
            { id: 3, name: '商品3', points: 30 }
         ]
      };
   },
   methods: {
      exchange(item) {
         // 发送POST请求更新积分
         fetch('/api/update_points', {
            method: 'POST',
            body: JSON.stringify({
               memberId: 1, // 替换为实际会员ID
               points: item.points
            }),
            headers: {
               'Content-Type': 'application/json'
            }
         })
         .then(response => response.json())
         .then(data => {
            if (data.success) {
               alert('兑换成功');
               // 更新积分
               this.points -= item.points;
            } else {
               alert('兑换失败');
            }
         })
         .catch(error => {
            console.error('错误:', error);
         });
      }
   },
   mounted() {
      // 获取会员积分信息
      fetch('/api/get_points?memberId=1') // 替换为实际会员ID
         .then(response => response.text())
         .then(data => {
            this.points = data;
         })
         .catch(error => {
            console.error('错误:', error);
         });
   }
};
</script>

3. Konfigurasikan penghalaan dan projek permulaan

Seterusnya, kita perlu mengkonfigurasi penghalaan dan projek permulaan. Buka fail main.js dalam direktori src dan tambahkan kod berikut:

import Home from './Home.vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
   routes: [
      { path: '/', component: Home }
   ]
});

new Vue({
   router,
   render: h => h(Home)
}).$mount('#app');

4 Mulakan projek

Lakukan arahan berikut dalam terminal untuk memulakan projek:

npm run serve

Lawati http://localhost:8080 untuk melihat. halaman pusat membeli belah ahli mata .

Ringkasan:

Melalui contoh di atas, kita dapat melihat cara menggunakan PHP dan Vue untuk melaksanakan fungsi beli-belah points mall yang ringkas untuk mata ahli. Dapatkan dan kemas kini maklumat mata ahli melalui antara muka PHP bahagian belakang, paparkan mata ahli dan senarai produk melalui komponen Vue bahagian hadapan, dan laksanakan fungsi penebusan mata. Ini hanyalah contoh mudah Dalam aplikasi sebenar, isu seperti keselamatan dan pengesahan pengguna perlu diambil kira, tetapi contoh ini boleh digunakan sebagai rangka kerja asas yang boleh anda kembangkan dan optimumkan.

Atas ialah kandungan terperinci PHP dan Vue: Cara melaksanakan beli-belah pusat membeli-belah mata untuk mata ahli. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!