PHP dan Vue: Cara menukar dan menebus mata keahlian-tutorial php-php.cn

PHP dan Vue: Cara menukar dan menebus mata keahlian

PHP dan Vue: Bagaimana untuk melaksanakan penukaran dan penebusan mata ahli, contoh kod khusus diperlukan

Pengenalan:
Dalam banyak laman web dan aplikasi e-dagang, mata ahli ialah kaedah ganjaran biasa, yang boleh menggalakkan pengguna kepada Interaksi dan penggunaan, dan juga boleh digunakan sebagai mata wang maya untuk menukar barangan fizikal atau maya. Untuk merealisasikan fungsi penukaran dan penebusan mata ahli, kami boleh menggabungkan PHP dan Vue untuk melaksanakan sistem yang mudah dan berkuasa. Artikel ini akan memperkenalkan cara menukar dan menebus mata keahlian melalui PHP dan Vue, serta menyediakan contoh kod khusus.

1. Reka bentuk struktur jadual pangkalan data
Pertama, kita perlu mereka bentuk jadual pangkalan data untuk menyimpan maklumat mata ahli. Berikut ialah contoh struktur jadual ringkas:
Jadual mata:
Nama jadual: mata
Medan:

id: pengecam unik rekod mata
user_id: pengecam unik ahli
mata: bilangan mata
created_at: Create Time
updated_at: Masa kemas kini

2. Dapatkan mata ahli

Buat fail PHP bernama "get_points.php" untuk mendapatkan maklumat mata ahli.

<?php
// 导入数据库连接配置文件
require_once('db_config.php');

// 获取会员的唯一标识
$user_id = $_GET['user_id'];

// 查询会员的积分数量
$query = "SELECT points FROM points WHERE user_id = $user_id";
$result = mysqli_query($conn, $query);

// 判断查询结果是否为空
if (mysqli_num_rows($result) > 0) {
    $row = mysqli_fetch_assoc($result);
    $points = $row['points'];

    // 返回积分数量
    echo json_encode(['points' => $points]);
} else {
    // 返回错误信息
    echo json_encode(['error' => '会员不存在']);
}

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

Salin selepas log masuk

Buat komponen Vue untuk memaparkan bilangan mata ahli di bahagian hadapan.

<template>
  <div>
    <h2>会员积分：{{ points }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      points: 0
    };
  },
  mounted() {
    // 调用接口获取会员积分
    fetch('get_points.php?user_id=123')
      .then(response => response.json())
      .then(data => {
        // 更新积分数量
        this.points = data.points;
      })
      .catch(error => {
        console.error(error);
      });
  }
};
</script>

Salin selepas log masuk

3. Fungsi penukaran mata

Buat fail PHP bernama "convert_points.php" untuk melaksanakan fungsi penukaran mata.

<?php
// 导入数据库连接配置文件
require_once('db_config.php');

// 获取表单提交的数据
$user_id = $_POST['user_id'];
$amount = $_POST['amount'];

// 查询会员的积分数量
$query = "SELECT points FROM points WHERE user_id = $user_id";
$result = mysqli_query($conn, $query);

// 判断查询结果是否为空
if (mysqli_num_rows($result) > 0) {
    $row = mysqli_fetch_assoc($result);
    $points = $row['points'];

    // 判断积分是否足够
    if ($points >= $amount) {
        // 更新积分数量
        $new_points = $points - $amount;
        $query = "UPDATE points SET points = $new_points WHERE user_id = $user_id";
        mysqli_query($conn, $query);

        // 返回成功信息
        echo json_encode(['success' => '积分转换成功']);
    } else {
        // 返回错误信息
        echo json_encode(['error' => '积分不足']);
    }
} else {
    // 返回错误信息
    echo json_encode(['error' => '会员不存在']);
}

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

Salin selepas log masuk

Buat komponen Vue untuk melaksanakan antara muka hadapan untuk penukaran mata.

<template>
  <div>
    <h2>积分转换</h2>
    <form @submit.prevent="convertPoints">
      <label for="amount">转换数量：</label>
      <input type="number" v-model="amount" required>
      <button type="submit">转换</button>
    </form>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 0,
      message: ''
    };
  },
  methods: {
    convertPoints() {
      // 获取会员的唯一标识
      const user_id = '123';

      // 发送转换请求
      fetch('convert_points.php', {
        method: 'POST',
        body: new URLSearchParams({
          user_id: user_id,
          amount: this.amount
        })
      })
        .then(response => response.json())
        .then(data => {
          // 显示转换结果
          this.message = data.success || data.error;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

Salin selepas log masuk

4. Fungsi penebusan mata

Buat fail PHP bernama "redeem_points.php" untuk melaksanakan fungsi penebusan mata.

<?php
// 导入数据库连接配置文件
require_once('db_config.php');

// 获取表单提交的数据
$user_id = $_POST['user_id'];
$item_id = $_POST['item_id'];

// 查询会员的积分数量
$query = "SELECT points FROM points WHERE user_id = $user_id";
$result = mysqli_query($conn, $query);

// 判断查询结果是否为空
if (mysqli_num_rows($result) > 0) {
    $row = mysqli_fetch_assoc($result);
    $points = $row['points'];

    // 查询商品需要的积分数量
    $query = "SELECT points_required FROM items WHERE id = $item_id";
    $result = mysqli_query($conn, $query);

    // 判断查询结果是否为空
    if (mysqli_num_rows($result) > 0) {
        $row = mysqli_fetch_assoc($result);
        $points_required = $row['points_required'];

        // 判断积分是否足够
        if ($points >= $points_required) {
            // 更新积分数量
            $new_points = $points - $points_required;
            $query = "UPDATE points SET points = $new_points WHERE user_id = $user_id";
            mysqli_query($conn, $query);

            // 返回成功信息
            echo json_encode(['success' => '兑换成功']);
        } else {
            // 返回错误信息
            echo json_encode(['error' => '积分不足']);
        }
    } else {
        // 返回错误信息
        echo json_encode(['error' => '商品不存在']);
    }
} else {
    // 返回错误信息
    echo json_encode(['error' => '会员不存在']);
}

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

Salin selepas log masuk

Cipta komponen Vue untuk melaksanakan antara muka bahagian hadapan untuk penebusan mata.

<template>
  <div>
    <h2>积分兑换</h2>
    <form @submit.prevent="redeemPoints">
      <label for="item_id">商品：</label>
      <select v-model="item_id" required>
        <option value="">请选择商品</option>
        <option value="1">商品A</option>
        <option value="2">商品B</option>
      </select>
      <button type="submit">兑换</button>
    </form>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item_id: '',
      message: ''
    };
  },
  methods: {
    redeemPoints() {
      // 获取会员的唯一标识
      const user_id = '123';

      // 发送兑换请求
      fetch('redeem_points.php', {
        method: 'POST',
        body: new URLSearchParams({
          user_id: user_id,
          item_id: this.item_id
        })
      })
        .then(response => response.json())
        .then(data => {
          // 显示兑换结果
          this.message = data.success || data.error;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

Salin selepas log masuk

Ringkasan:
Melalui contoh kod di atas, kita dapat melihat cara melaksanakan fungsi penukaran dan penebusan mata ahli melalui PHP dan Vue. PHP bertanggungjawab untuk memproses operasi pangkalan data dan menyediakan antara muka untuk panggilan Vue Vue bertanggungjawab untuk paparan dan operasi bahagian hadapan, dan interaksi data dengan bahagian belakang. Sistem ini bukan sahaja mudah digunakan, tetapi juga boleh dikembangkan dan disesuaikan dengan mudah, menjadikannya sesuai untuk pelbagai laman web dan aplikasi e-dagang.

Walau bagaimanapun, ini hanyalah contoh mudah, dan projek sebenar mungkin melibatkan lebih banyak fungsi dan kerumitan. Oleh itu, dalam pembangunan sebenar, kita perlu mereka bentuk dan melaksanakan dengan sewajarnya mengikut keperluan tertentu. Saya berharap melalui pengenalan artikel ini, pembaca dapat memahami cara menggunakan PHP dan Vue untuk merealisasikan penukaran dan penebusan mata ahli, dan memberikan sedikit inspirasi dan bantuan untuk pembangunan projek sebenar.

Atas ialah kandungan terperinci PHP dan Vue: Cara menukar dan menebus mata keahlian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!