PHP and Vue development: How to obtain member points by checking in every day

Development of PHP and Vue: To achieve daily check-in and obtain member points

Introduction:
The points system is one of the common functions in many websites or applications. Members’ daily check-in and earning points is an effective means to increase user activity and stickiness. In this article, we will use PHP and Vue as development tools to teach you how to implement a functional module for members to check in every day and earn points. We will provide specific code examples for you to reference and learn from.

Preparation:
Before you start, you need to ensure that you have the following tools and dependencies in your development environment:

1. PHP development environment, such as WAMP, XAMPP, etc.
2. Vue.js development environment and configuration, you can use Vue CLI to quickly build a Vue project.
3. Database, we will use MySQL as an example.

Step 1: Create database and data table
First, we need to create a database to store member information and points records. You can use the following SQL statement to create a database named "members" in MySQL and create a data table named "sign_in_records".

CREATE DATABASE members;

USE members;

CREATE TABLE sign_in_records (
  id INT AUTO_INCREMENT PRIMARY KEY,
  member_id INT,
  sign_in_date DATE,
  UNIQUE KEY unique_member_date (member_id, sign_in_date)
);

This data table contains the following fields:

• id: as the primary key, auto-increment.
• member_id: Member ID, used to associate members in the membership table.
• sign_in_date: Sign-in date, used to record the date of each sign-in. We also added a unique key to the combination (member_id, sign_in_date) to ensure that each member can only sign in once per day.

Step 2: Create a PHP interface
Next step, we need to create a PHP interface to handle requests sent by the front-end Vue page. This interface will be responsible for verifying members and recording check-in information.

1. Create a file named "signin.php" and add the following code to the file:

<?php
// 连接数据库
$conn = new mysqli("localhost", "root", "root", "members");

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 获取请求中的会员ID
$memberId = $_GET["memberId"];

// 获取当前日期
$currentDate = date("Y-m-d");

// 查询该会员今天是否已签到
$sql = "SELECT * FROM sign_in_records WHERE member_id = $memberId AND sign_in_date = '$currentDate'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // 该会员今天已签到
    echo json_encode(["status" => "fail", "message" => "今天已签到"]);
} else {
    // 记录会员签到
    $insertSql = "INSERT INTO sign_in_records (member_id, sign_in_date) VALUES ($memberId, '$currentDate')";
    if ($conn->query($insertSql) === TRUE) {
        echo json_encode(["status" => "success", "message" => "签到成功"]);
    } else {
        echo json_encode(["status" => "fail", "message" => "签到失败"]);
    }
}

// 关闭数据库连接
$conn->close();
?>

This code first connects to a file named "members "database and obtain the member ID sent by the front-end Vue page. It then checks to see if the member's check-in record for that day already exists in the database. If it exists, a JSON response will be returned, indicating that you have checked in today; if it does not exist, the check-in information will be recorded and the corresponding JSON response will be returned.

2. Place this file in the appropriate directory on your PHP server, making sure it is accessible via the URL.

Step 3: Create a Vue page
Finally, we will create a Vue page to display the member sign-in function and interact with the back-end PHP interface.

1. In your Vue project, open the App.vue file and delete the default code in it. Then, add the following code to the file:

<template>
  <div>
    <h1 id="会员签到">会员签到</h1>
    <button @click="signIn">签到</button>
    <p>{{ status }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      memberId: 123, // 设置您的会员ID
      status: "",
    };
  },
  methods: {
    signIn() {
      // 发送签到请求到后端接口
      fetch(`http://localhost/signin.php?memberId=${this.memberId}`)
        .then((response) => response.json())
        .then((data) => {
          this.status = data.message;
        })
        .catch((error) => {
          this.status = "签到失败";
          console.error(error);
        });
    },
  },
};
</script>

This Vue page simply displays a title, a check-in button, and a status message. When the user clicks the check-in button, it will send a GET request to the backend PHP interface and update the status information on the page based on the JSON response returned by the interface.

2. Save the file and run the Vue project in the browser to see the check-in function page.

Conclusion:
By combining the development of PHP and Vue, we have implemented a functional module for members to sign in every day and earn points. In this example, we created a database and data table to store member information and check-in records, used PHP to write an interface to handle check-in requests, displayed the check-in function through the Vue page, and interacted with the back-end interface. I hope this example can help you better understand and use PHP and Vue to develop the check-in function in the points system.

The above is the detailed content of PHP and Vue development: How to obtain member points by checking in every day. For more information, please follow other related articles on the PHP Chinese website!