PHP- und Vue-Entwicklung: So erhalten Sie Mitgliedspunkte, indem Sie jeden Tag einchecken

Entwickelt mit PHP und Vue: Um Mitgliederpunkte zu erhalten, die durch tägliches Einchecken erhalten werden

Einführung:
Das Punktesystem ist eine der allgemeinen Funktionen in vielen Websites oder Anwendungen und das tägliche Einchecken von Mitgliedern, um Punkte zu erhalten Erhöht die Benutzeraktivität und ist ein wirksames Mittel zur Klebrigkeit. In diesem Artikel verwenden wir PHP und Vue als Entwicklungstools, um Ihnen beizubringen, wie Sie ein Funktionsmodul implementieren, damit Mitglieder jeden Tag einchecken und Punkte sammeln können. Wir stellen Ihnen spezifische Codebeispiele zur Verfügung, die Sie als Referenz nutzen und daraus lernen können.

Vorbereitung:
Bevor Sie beginnen, müssen Sie sicherstellen, dass in Ihrer Entwicklungsumgebung die folgenden Tools und Abhängigkeiten vorhanden sind:

1. PHP-Entwicklungsumgebung wie WAMP, XAMPP usw.
2. Mit der Entwicklungsumgebung und Konfiguration von Vue.js können Sie mit Vue CLI schnell ein Vue-Projekt erstellen.
3. Datenbank, wir verwenden MySQL als Beispiel.

Schritt 1: Datenbank und Datentabelle erstellen
Zuerst müssen wir eine Datenbank erstellen, um Mitgliedsinformationen und Punktedatensätze zu speichern. Mit der folgenden SQL-Anweisung können Sie in MySQL eine Datenbank mit dem Namen „members“ und eine Datentabelle mit dem Namen „sign_in_records“ erstellen.

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

Diese Datentabelle enthält die folgenden Felder:

• id: Als Primärschlüssel, automatische Inkrementierung.
• member_id: Mitglieds-ID, die zum Zuordnen von Mitgliedern in der Mitgliedertabelle verwendet wird.
• sign_in_date: Anmeldedatum, das zum Aufzeichnen des Datums jeder Anmeldung verwendet wird. Wir haben der Kombination außerdem einen eindeutigen Schlüssel hinzugefügt (Mitglieds-ID, Anmeldedatum), um sicherzustellen, dass sich jedes Mitglied nur einmal pro Tag anmelden kann.

Schritt 2: Erstellen Sie eine PHP-Schnittstelle
Als nächstes müssen wir eine PHP-Schnittstelle erstellen, um Anfragen zu verarbeiten, die von der Front-End-Vue-Seite gesendet werden. Diese Schnittstelle ist für die Überprüfung der Mitglieder und die Aufzeichnung der Check-in-Informationen verantwortlich.

1. Erstellen Sie eine Datei mit dem Namen „signin.php“ und fügen Sie der Datei den folgenden Code hinzu:

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

Dieser Code stellt zunächst eine Verbindung zur Datenbank mit dem Namen „members“ her und ruft die von der Front-End-Vue-Seiten-ID gesendeten Mitglieder ab. Anschließend wird überprüft, ob der Check-in-Datensatz des Mitglieds für diesen Tag bereits in der Datenbank vorhanden ist. Wenn es vorhanden ist, wird eine JSON-Antwort zurückgegeben, die angibt, dass Sie heute eingecheckt haben. Wenn es nicht vorhanden ist, werden die Check-in-Informationen aufgezeichnet und die entsprechende JSON-Antwort zurückgegeben.

2. Platzieren Sie diese Datei im entsprechenden Verzeichnis auf Ihrem PHP-Server und stellen Sie sicher, dass sie über die URL erreichbar ist.

Schritt 3: Erstellen Sie eine Vue-Seite
Abschließend erstellen wir eine Vue-Seite, um die Anmeldefunktion für Mitglieder anzuzeigen und mit der Back-End-PHP-Schnittstelle zu interagieren.

1. Öffnen Sie in Ihrem Vue-Projekt die Datei App.vue und löschen Sie den darin enthaltenen Standardcode. Fügen Sie dann den folgenden Code zur Datei hinzu:

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

Diese Vue-Seite zeigt lediglich einen Titel, eine Check-in-Schaltfläche und eine Statusmeldung an. Wenn der Benutzer auf die Check-in-Schaltfläche klickt, sendet er eine GET-Anfrage an die Backend-PHP-Schnittstelle und aktualisiert die Statusinformationen auf der Seite basierend auf der von der Schnittstelle zurückgegebenen JSON-Antwort.

2. Speichern Sie die Datei und führen Sie das Vue-Projekt im Browser aus. Daraufhin wird die Seite mit der Check-in-Funktion angezeigt.

Fazit:
Durch die Kombination der Entwicklung von PHP und Vue haben wir ein Funktionsmodul implementiert, mit dem sich Mitglieder täglich anmelden können, um Punkte zu sammeln. In diesem Beispiel haben wir eine Datenbank und eine Datentabelle zum Speichern von Mitgliedsinformationen und Check-in-Datensätzen erstellt, mit PHP eine Schnittstelle zur Verarbeitung von Check-in-Anfragen geschrieben, die Check-in-Funktion über die Vue-Seite angezeigt und mit der Rückseite interagiert -End-Schnittstelle. Ich hoffe, dieses Beispiel kann Ihnen helfen, PHP und Vue besser zu verstehen und zu verwenden, um die Check-in-Funktion im Punktesystem zu entwickeln.

Das obige ist der detaillierte Inhalt vonPHP- und Vue-Entwicklung: So erhalten Sie Mitgliedspunkte, indem Sie jeden Tag einchecken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!