PHP と Vue の開発: メンバーシップ ポイントの動的更新を実装する方法

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

<?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);
   }
?>

vue create vue-membership

<template>
   <div>
      <h1>会员积分</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>

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

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

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

npm run serve