PHP and Vue development: How to implement dynamic update of membership points

PHP and Vue development: dynamic update of member points

Introduction:
In many websites or applications, member points are a common function. Users can earn points by participating in activities, purchasing goods or completing tasks, and can use points to redeem rewards or discounts. In this article, we will introduce how to use PHP and Vue development to implement the dynamic update function of member points, and provide specific code examples.

Requirement analysis:
Before starting to write code, the following requirements need to be clarified:

1. The value of member points needs to be updated in real time, including the user's points earned and use of points;
2. When users perform specific activities, shopping, etc., the system needs to increase or decrease the points value through the background;
3. Users can see the current points value on the page and update it in real time.

Technical selection:
Based on demand analysis, this article uses PHP as the back-end development language and Vue as the front-end development framework. PHP is a popular server-side scripting language capable of interacting with databases and generating dynamic web content. Vue is a lightweight and flexible front-end framework that focuses on building user interfaces.

Back-end development implementation:

1. Create database table:
   First, create a data table named "members" to store members' points and other related information .

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

2. Writing the backend API:
   Create a PHP file named "api.php" to handle backend API requests. In this file, we need to implement the functions of obtaining member points, increasing points, and deducting points.

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

Front-end development implementation:

1. Create Vue project:
   Run the following command in the command line to create a Vue project named "vue-membership" :

vue create vue-membership

2. Write the front-end code:
   Open the "vue-membership" project and create a folder named "components" in the "src" directory. Create a Vue component named "Membership.vue" under this folder to display member points and provide functions for adding and subtracting points.

<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>

3. Integrate back-end and front-end:
   Open the "App.vue" file and introduce the "Membership" component into the file.

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

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

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

4. Run the project:
   Run the following command in the command line to start the Vue project:

npm run serve

Summary:
Through the above steps, We successfully implemented the dynamic update function of member points developed using PHP and Vue. When the user adds or deducts points, the back-end API will update the database and return the latest points value to the front-end. The front-end displays the points value on the page in real time through the Vue component. This dynamic update method can improve user interactivity and experience, and accurately reflect the user's points status.

It should be noted that the code examples provided in this article are only for demonstration. In actual development, they need to be appropriately modified and improved according to specific needs. At the same time, in actual projects, it is recommended to perform security verification and restrict access permissions on the back-end API to ensure the security and stability of the system.

The above is the detailed content of PHP and Vue development: How to implement dynamic update of membership points. For more information, please follow other related articles on the PHP Chinese website!