Pembangunan PHP dan Vue: Bagaimana untuk melaksanakan kemas kini dinamik mata keahlian

PHP dan pembangunan Vue: kemas kini dinamik mata keahlian

Pengenalan:
Dalam banyak tapak web atau aplikasi, mata keahlian ialah ciri umum. Pengguna boleh memperoleh mata dengan mengambil bahagian dalam aktiviti, membeli barangan atau menyelesaikan tugasan dan boleh menggunakan mata untuk menebus ganjaran atau diskaun. Dalam artikel ini, kami akan memperkenalkan cara menggunakan pembangunan PHP dan Vue untuk melaksanakan fungsi kemas kini dinamik mata ahli dan menyediakan contoh kod khusus.

Analisis keperluan:
Sebelum mula menulis kod, keperluan berikut perlu dijelaskan:

1. Nilai mata ahli perlu dikemas kini dalam masa nyata, termasuk mata yang diperolehi oleh pengguna dan menggunakan mata
2. Apabila pengguna melakukan aktiviti tertentu, membeli-belah, dan lain-lain, sistem perlu meningkatkan atau mengurangkan nilai mata melalui latar belakang #. 🎜🎜#
Pengguna boleh melihat pada halaman Nilai mata semasa dikemas kini dalam masa nyata.

Pemilihan teknikal:

Berdasarkan analisis permintaan, artikel ini menggunakan PHP sebagai bahasa pembangunan bahagian belakang dan Vue sebagai rangka kerja pembangunan bahagian hadapan. PHP ialah bahasa skrip sebelah pelayan yang popular yang mampu berinteraksi dengan pangkalan data dan menjana kandungan web dinamik. Vue ialah rangka kerja bahagian hadapan yang ringan dan fleksibel yang memfokuskan pada membina antara muka pengguna.

Pelaksanaan pembangunan belakang:

Buat jadual pangkalan data:
1. Pertama, buat jadual data bernama "ahli" untuk menyimpan mata ahli dan lain-lain maklumat berkaitan.
   

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

Menulis API bahagian belakang:
2. Buat fail PHP bernama "api.php" untuk mengendalikan permintaan API bahagian belakang. Dalam fail ini, kita perlu melaksanakan fungsi mendapatkan mata ahli, menambah mata, dan menolak mata.
   

<?php
   // 连接数据库
   $conn = new mysqli("localhost", "username", "password", "database_name");
   
   // 获取会员积分
   if ($_GET["action"] === "getPoints") {
      $memberId = $_GET["memberId"];

      $sql = "SELECT points FROM members WHERE id = $memberId";
      $result = $conn->query($sql);
      $points = $result->fetch_assoc()["points"];

      echo $points;
   }
   
   // 增加积分
   if ($_GET["action"] === "addPoints") {
      $memberId = $_GET["memberId"];
      $pointsToAdd = $_GET["pointsToAdd"];

      $sql = "UPDATE members SET points = points + $pointsToAdd WHERE id = $memberId";
      $conn->query($sql);
   }
   
   // 扣减积分
   if ($_GET["action"] === "deductPoints") {
      $memberId = $_GET["memberId"];
      $pointsToDeduct = $_GET["pointsToDeduct"];

      $sql = "UPDATE members SET points = points - $pointsToDeduct WHERE id = $memberId";
      $conn->query($sql);
   }
?>

Pelaksanaan pembangunan bahagian hadapan:

Cipta projek Vue:
1. Jalankan arahan berikut dalam baris arahan untuk mencipta projek bernama " vue-membership" Vue project:
   

vue create vue-membership

Tulis kod bahagian hadapan:
2. Buka projek "vue-membership" dan buat fail bernama "vue-membership" dalam direktori "src" Folder untuk "komponen". Buat komponen Vue bernama "Membership.vue" di bawah folder ini untuk memaparkan mata ahli dan menyediakan fungsi untuk menambah dan menolak mata.
   

<template>
   <div>
      <h1 id="会员积分">会员积分</h1>
      <p>当前积分: {{ points }}</p>
      <button @click="addPoints">增加积分</button>
      <button @click="deductPoints">扣减积分</button>
   </div>
</template>

<script>
export default {
   data() {
      return {
         points: 0
      }
   },
   methods: {
      addPoints() {
         // 向后端发送增加积分的请求
         fetch("api.php?action=addPoints&memberId=1&pointsToAdd=10")
            .then(response => response.json())
            .then(points => {
               // 更新前端显示的积分数值
               this.points = points;
            });
      },
      deductPoints() {
         // 向后端发送扣减积分的请求
         fetch("api.php?action=deductPoints&memberId=1&pointsToDeduct=5")
            .then(response => response.json())
            .then(points => {
               // 更新前端显示的积分数值
               this.points = points;
            });
      }
   },
   mounted() {
      // 获取初始积分
      fetch("api.php?action=getPoints&memberId=1")
         .then(response => response.json())
         .then(points => {
            // 更新前端显示的积分数值
            this.points = points;
         });
   }
}
</script>

Sepadukan bahagian belakang dan hadapan:
3. Buka fail "App.vue" dan perkenalkan komponen "Keahlian" ke dalam fail.
   

<template>
   <div id="app">
      <Membership />
   </div>
</template>

<script>
import Membership from "./components/Membership.vue";

export default {
   components: {
      Membership
   }
}
</script>

Jalankan projek:
4. Jalankan arahan berikut dalam baris arahan untuk memulakan projek Vue:
   

npm run serve

#🎜 🎜#Ringkasan :

Melalui langkah di atas, kami berjaya melaksanakan fungsi kemas kini dinamik mata ahli yang dibangunkan menggunakan PHP dan Vue. Apabila pengguna menambah atau menolak mata, API bahagian belakang akan mengemas kini pangkalan data dan mengembalikan nilai mata terkini ke bahagian hadapan memaparkan nilai mata pada halaman dalam masa nyata melalui komponen Vue. Kaedah kemas kini dinamik ini boleh meningkatkan interaktiviti dan pengalaman pengguna, serta mencerminkan status mata pengguna dengan tepat.

Perlu diingatkan bahawa contoh kod yang disediakan dalam artikel ini hanyalah untuk demonstrasi, dan perlu diubah suai dan ditambah baik mengikut keperluan khusus dalam pembangunan sebenar. Pada masa yang sama, dalam projek sebenar, adalah disyorkan untuk melaksanakan pengesahan keselamatan dan menyekat kebenaran akses pada API bahagian belakang untuk memastikan keselamatan dan kestabilan sistem.

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