Rumah > Artikel > pembangunan bahagian belakang > 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`) );
<?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); ?>
<?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); ?>
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
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>
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');
npm run serve
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!