Rumah > pembangunan bahagian belakang > tutorial php > Pembangunan PHP dan Vue: Bagaimana untuk membekukan dan menyahbekukan mata keahlian

Pembangunan PHP dan Vue: Bagaimana untuk membekukan dan menyahbekukan mata keahlian

WBOY
Lepaskan: 2023-09-25 11:52:01
asal
1431 orang telah melayarinya

Pembangunan PHP dan Vue: Bagaimana untuk membekukan dan menyahbekukan mata keahlian

Pembangunan dengan PHP dan Vue: Cara membekukan dan menyahbekukan mata ahli

Dalam kebanyakan platform e-dagang atau sistem keahlian, mata ahli ialah mekanisme ganjaran yang penting dan penilaian terhadap penyertaan dan indeks kesetiaan pengguna. Walau bagaimanapun, dalam beberapa kes khas, untuk mengelakkan penyalahgunaan oleh pengguna berniat jahat, mata ahli perlu dibekukan dan dinyahbekukan. Artikel ini akan memperkenalkan cara menggunakan pembangunan PHP dan Vue untuk melaksanakan fungsi pembekuan dan penyahbekuan mata ahli, dan memberikan contoh kod khusus.

1. Penyediaan projek
Sebelum memulakan pembangunan, kita perlu menyediakan persekitaran dan alatan berikut:

  1. PHP 7.0 dan ke atas (untuk pembangunan bahagian belakang)
  2. Vue.js 2.0 dan ke atas (untuk pembangunan bahagian hadapan)
  3. Pangkalan data MySQL (digunakan untuk menyimpan mata ahli dan maklumat lain)

2. Reka bentuk pangkalan data
Sebelum melaksanakan fungsi pembekuan dan penyahbekuan mata ahli, kita perlu mereka bentuk jadual pangkalan data untuk menyimpan maklumat ahli dan data berkaitan mata. Berikut ialah reka bentuk jadual ringkas:

Meja ahli (ahli)

  • id (kunci utama)
  • nama (nama ahli)
  • mata (mata ahli)
  • status (status keahlian, 0 bermaksud biasa beku )
  • dicipta_pada (masa dibuat)
  • dikemas kini (masa terakhir dikemas kini)

3. Pembangunan bahagian belakang (PHP)

  1. Buat kelas bernama "Ahli" dan tentukan kaedah berikut untuk melaksanakan pembekuan dan nyahbeku fungsi :
class Member {
    // 冻结会员积分
    public function freezePoints($memberId) {
        // 根据会员ID更新会员状态为冻结
        // 具体的SQL语句可根据实际情况进行编写
        $sql = "UPDATE members SET status=1 WHERE id=:id";
        // 执行SQL语句并传入参数
        // $db为数据库连接对象,$memberId为待冻结的会员ID
        $stmt = $db->prepare($sql);
        $stmt->bindValue(':id', $memberId);
        $stmt->execute();
    }

    // 解冻会员积分
    public function unfreezePoints($memberId) {
        // 根据会员ID更新会员状态为正常
        // 具体的SQL语句可根据实际情况进行编写
        $sql = "UPDATE members SET status=0 WHERE id=:id";
        // 执行SQL语句并传入参数
        // $db为数据库连接对象,$memberId为待解冻的会员ID
        $stmt = $db->prepare($sql);
        $stmt->bindValue(':id', $memberId);
        $stmt->execute();
    }
}
Salin selepas log masuk
  1. Kod sampel untuk menggunakan kelas ini dalam projek adalah seperti berikut:
// 实例化Member类
$member = new Member();

// 冻结会员积分
$member->freezePoints($memberId);

// 解冻会员积分
$member->unfreezePoints($memberId);
Salin selepas log masuk

4 Pembangunan bahagian hadapan (Vue.js)

  1. Buat komponen Vue bernama "MemberPoints" untuk memaparkan ahli. mata dan pemprosesan Operasi pembekuan dan pencairan:
<template>
    <div>
        <div>会员积分:{{ points }}</div>
        <button @click="freezePoints">冻结积分</button>
        <button @click="unfreezePoints">解冻积分</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            points: 0 // 假设初始积分为0
        }
    },
    methods: {
        // 冻结积分
        freezePoints() {
            // 调用后端API接口来实现冻结积分的功能
            // 具体的API接口可根据实际情况进行编写
            axios.post('/api/freeze-points', { memberId: 1 })
                .then(response => {
                    // 更新页面上的积分和状态
                    this.points = response.data.points;
                })
                .catch(error => {
                    console.log(error);
                });
        },
        // 解冻积分
        unfreezePoints() {
            // 调用后端API接口来实现解冻积分的功能
            // 具体的API接口可根据实际情况进行编写
            axios.post('/api/unfreeze-points', { memberId: 1 })
                .then(response => {
                    // 更新页面上的积分和状态
                    this.points = response.data.points;
                })
                .catch(error => {
                    console.log(error);
                });
        }
    }
}
</script>
Salin selepas log masuk
  1. Gunakan komponen Vue ini dalam halaman yang perlu memaparkan mata keahlian dan mengendalikan operasi pembekuan dan pencairan:
<template>
    <div>
        <member-points></member-points>
    </div>
</template>

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

export default {
    components: {
        MemberPoints
    }
}
</script>
Salin selepas log masuk

Dengan contoh kod bahagian belakang PHP dan bahagian hadapan Vue di atas, kami boleh melaksanakan mata keahlian Membekukan dan menyahbekukan fungsi. Apabila pengguna mengklik butang "Mata Pembekuan", antara muka API bahagian belakang akan dipanggil untuk menukar status keahlian kepada beku, dan mata dan status ahli akan dikemas kini pada halaman hujung hadapan apabila pengguna mengklik "; Butang Unfreeze Points", antara muka API bahagian belakang akan dipanggil untuk menukar status keahlian kepada biasa dan mengemas kini mata dan status keahlian pada halaman hujung hadapan.

Perlu diingatkan bahawa contoh di atas hanyalah perlaksanaan yang mudah Pelaksanaan khusus dan logik perniagaan perlu diselaraskan dan diperbaiki mengikut keperluan projek sebenar.

Atas ialah kandungan terperinci Pembangunan PHP dan Vue: Bagaimana untuk membekukan dan menyahbekukan mata keahlian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan