PHP와 Vue 개발: 매일 체크인으로 회원 포인트를 얻는 방법-PHP 튜토리얼-php.cn

PHP와 Vue 개발: 매일 체크인으로 회원 포인트를 얻는 방법

WBOY

풀어 주다： 2023-09-24 10:20:01

원래의

1252명이 탐색했습니다.

PHP와 Vue 개발: 매일 체크인으로 회원 포인트를 얻는 방법

PHP 및 Vue로 개발: 일일 체크인을 통해 획득한 회원 포인트를 얻으려면

소개:
포인트 시스템은 많은 웹사이트나 애플리케이션에서 공통적으로 사용되는 기능 중 하나이며, 회원은 매일 체크인하여 포인트를 얻을 수 있습니다. 사용자 활동을 증가시키고 끈적임의 효과적인 수단을 제공합니다. 이 글에서는 PHP와 Vue를 개발 도구로 사용하여 회원들이 매일 체크인하고 포인트를 적립할 수 있는 기능 모듈을 구현하는 방법을 알려드리겠습니다. 우리는 귀하가 참조하고 배울 수 있도록 구체적인 코드 예제를 제공할 것입니다.

준비:
시작하기 전에 개발 환경에 다음 도구와 종속성이 있는지 확인해야 합니다.

WAMP, XAMPP 등과 같은 PHP 개발 환경.
Vue.js 개발 환경 및 구성을 통해 Vue CLI를 사용하여 Vue 프로젝트를 빠르게 빌드할 수 있습니다.
데이터베이스의 경우 MySQL을 예로 들어 보겠습니다.

1단계: 데이터베이스 및 데이터 테이블 생성
먼저 회원 정보와 포인트 기록을 저장할 데이터베이스를 생성해야 합니다. 다음 SQL 문을 사용하여 MySQL에서 "members"라는 데이터베이스를 생성하고 "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)
);

로그인 후 복사

이 데이터 테이블에는 다음 필드가 포함되어 있습니다.

id: 기본 키로 자동 증가합니다.
member_id: 회원 ID, 회원 테이블에서 회원을 연결하는 데 사용됩니다.
sign_in_date: 로그인 날짜, 각 로그인 날짜를 기록하는 데 사용됩니다. 또한 각 회원이 하루에 한 번만 로그인할 수 있도록 조합(member_id, sign_in_date)에 고유 키를 추가했습니다.

2단계: PHP 인터페이스 만들기
다음으로 프런트 엔드 Vue 페이지에서 보낸 요청을 처리하기 위한 PHP 인터페이스를 만들어야 합니다. 이 인터페이스는 회원 확인 및 체크인 정보 기록을 담당합니다.

"signin.php"라는 파일을 만들고 파일에 다음 코드를 추가합니다.

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

로그인 후 복사

이 코드는 먼저 "members"라는 데이터베이스에 연결하고 프런트 엔드 Vue 페이지 ID에서 보낸 멤버를 가져옵니다. 그런 다음 해당 날짜의 회원 체크인 기록이 데이터베이스에 이미 존재하는지 확인합니다. 존재하는 경우 오늘 체크인했음을 나타내는 JSON 응답이 반환됩니다. 존재하지 않는 경우 체크인 정보가 기록되고 해당 JSON 응답이 반환됩니다.

이 파일을 PHP 서버의 적절한 디렉토리에 배치하여 URL을 통해 액세스할 수 있는지 확인하세요.

3단계: Vue 페이지 만들기
마지막으로 회원 로그인 기능을 표시하고 백엔드 PHP 인터페이스와 상호 작용하는 Vue 페이지를 만듭니다.

Vue 프로젝트에서 App.vue 파일을 열고 기본 코드를 삭제하세요. 그런 다음 파일에 다음 코드를 추가합니다.

<template>
  <div>
    <h1>会员签到</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>

로그인 후 복사

이 Vue 페이지는 제목, 체크인 버튼 및 상태 메시지만 표시합니다. 사용자가 체크인 버튼을 클릭하면 백엔드 PHP 인터페이스에 GET 요청이 전송되고 인터페이스에서 반환된 JSON 응답을 기반으로 페이지의 상태 정보가 업데이트됩니다.

파일을 저장하고 브라우저에서 Vue 프로젝트를 실행하면 체크인 기능 페이지가 나타납니다.

결론:
PHP와 Vue의 개발을 결합하여 회원이 매일 로그인하여 포인트를 얻을 수 있는 기능 모듈을 구현했습니다. 이 예에서는 회원 정보 및 체크인 기록을 저장하기 위한 데이터베이스 및 데이터 테이블을 생성하고, PHP를 사용하여 체크인 요청을 처리하는 인터페이스를 작성하고, Vue 페이지를 통해 체크인 기능을 표시하고 백과 상호 작용했습니다. -끝 인터페이스. 이 예제가 포인트 시스템에서 체크인 기능을 개발하기 위해 PHP와 Vue를 더 잘 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 PHP와 Vue 개발: 매일 체크인으로 회원 포인트를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!