Pembangunan PHP dan Vue: Bagaimana untuk mendapatkan mata ahli dengan mendaftar masuk setiap hari

Dibangunkan dengan PHP dan Vue: Untuk mencapai mata ahli yang diperoleh melalui daftar masuk harian

Pengenalan:
Sistem mata adalah salah satu fungsi biasa dalam banyak laman web atau aplikasi, dan daftar masuk harian ahli untuk mendapatkan mata meningkatkan aktiviti pengguna dan cara melekit yang Berkesan. Dalam artikel ini, kami akan menggunakan PHP dan Vue sebagai alat pembangunan untuk mengajar anda cara melaksanakan modul berfungsi untuk ahli mendaftar masuk setiap hari dan memperoleh mata. Kami akan menyediakan contoh kod khusus untuk anda rujukan dan pelajari.

Persediaan:
Sebelum anda bermula, anda perlu memastikan anda mempunyai alatan dan kebergantungan berikut dalam persekitaran pembangunan anda:

1. Persekitaran pembangunan PHP, seperti WAMP, XAMPP, dsb.
2. Persekitaran dan konfigurasi pembangunan Vue.js, anda boleh menggunakan Vue CLI untuk membina projek Vue dengan cepat.
3. Pangkalan data, kami akan menggunakan MySQL sebagai contoh.

Langkah 1: Buat pangkalan data dan jadual data
Pertama, kita perlu mencipta pangkalan data untuk menyimpan maklumat ahli dan rekod mata. Anda boleh menggunakan pernyataan SQL berikut untuk mencipta pangkalan data bernama "ahli" dalam MySQL dan mencipta jadual data bernama "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)
);

Jadual data ini mengandungi medan berikut:

• id: Sebagai kunci utama, kenaikan automatik.
• member_id: ID ahli, digunakan untuk mengaitkan ahli dalam jadual keahlian.
• sign_in_date: Tarikh log masuk, digunakan untuk merekodkan tarikh setiap log masuk. Kami juga menambahkan kunci unik pada kombinasi (id_ahli, tarikh_masuk_) untuk memastikan setiap ahli hanya boleh log masuk sekali sehari.

Langkah 2: Buat antara muka PHP
Seterusnya, kita perlu mencipta antara muka PHP untuk mengendalikan permintaan yang dihantar oleh halaman Vue bahagian hadapan. Antara muka ini akan bertanggungjawab untuk mengesahkan ahli dan merekod maklumat daftar masuk.

1. Buat fail bernama "signin.php" dan tambah kod berikut pada fail:

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

Kod ini mula-mula bersambung ke pangkalan data bernama "ahli" dan menghantar ahli melalui ID halaman Vue bahagian hadapan. Ia kemudian menyemak untuk melihat sama ada rekod daftar masuk ahli untuk hari itu sudah wujud dalam pangkalan data. Jika ia wujud, respons JSON akan dikembalikan, menunjukkan bahawa anda telah mendaftar masuk hari ini, jika ia tidak wujud, maklumat daftar masuk akan direkodkan dan respons JSON yang sepadan akan dikembalikan.

2. Letakkan fail ini dalam direktori yang sesuai pada pelayan PHP anda, pastikan ia boleh diakses melalui URL.

Langkah 3: Buat halaman Vue
Akhir sekali, kami akan mencipta halaman Vue untuk memaparkan fungsi log masuk ahli dan berinteraksi dengan antara muka PHP bahagian belakang.

1. Dalam projek Vue anda, buka fail App.vue dan padamkan kod lalai di dalamnya. Kemudian, tambahkan kod berikut pada fail:

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

Halaman Vue ini hanya memaparkan tajuk, butang daftar masuk dan mesej status. Apabila pengguna mengklik butang daftar masuk, ia akan menghantar permintaan GET ke antara muka PHP bahagian belakang dan mengemas kini maklumat status pada halaman berdasarkan respons JSON yang dikembalikan oleh antara muka.

2. Simpan fail dan jalankan projek Vue dalam penyemak imbas, dan anda akan melihat halaman fungsi daftar masuk.

Kesimpulan:
Dengan menggabungkan pembangunan PHP dan Vue, kami melaksanakan modul berfungsi untuk ahli mendaftar masuk setiap hari untuk memperoleh mata. Dalam contoh ini, kami mencipta pangkalan data dan jadual data untuk menyimpan maklumat ahli dan rekod daftar masuk, menggunakan PHP untuk menulis antara muka untuk mengendalikan permintaan daftar masuk, memaparkan fungsi daftar masuk melalui halaman Vue dan berinteraksi dengan bahagian belakang. -antara muka akhir. Saya harap contoh ini dapat membantu anda lebih memahami dan menggunakan PHP dan Vue untuk membangunkan fungsi daftar masuk dalam sistem mata.

Atas ialah kandungan terperinci Pembangunan PHP dan Vue: Bagaimana untuk mendapatkan mata ahli dengan mendaftar masuk setiap hari. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!