Pembangunan PHP dan Vue: Cara melaksanakan pertanyaan rekod penebusan mata ahli

Dibangunkan dengan PHP dan Vue: Pertanyaan Rekod Penebusan Mata Ahli

Pengenalan:
Dalam platform e-dagang atau sistem keahlian, mata ialah mekanisme ganjaran biasa Ahli memperoleh mata melalui penggunaan, dan kemudian menggunakan mata untuk menebus barangan atau perkhidmatan. Untuk memudahkan pengurusan ahli dan menggalakkan aktiviti ahli, adalah perlu untuk menanyakan rekod penebusan mata ahli. Artikel ini akan menggunakan pembangunan PHP dan Vue sebagai contoh untuk memperkenalkan secara terperinci cara melaksanakan fungsi pertanyaan rekod penebusan mata ahli dan menyediakan contoh kod khusus.

1. Penyediaan projek
Sebelum memulakan pembangunan, anda perlu mengesahkan perkara berikut:

1. Pastikan persekitaran PHP telah dipasang dan dikonfigurasikan sepenuhnya
2. Pastikan persekitaran Vue telah dipasang dan dikonfigurasikan sepenuhnya; Pastikan pangkalan data telah dibuat dan mengandungi Jadual data yang menyimpan rekod penebusan mata ahli.
3. 2. Reka bentuk pangkalan data

Dalam contoh ini, kami akan menggunakan MySQL sebagai pangkalan data. Buat jadual data bernama "exchange_records", yang mengandungi medan berikut:

id: rekod ID, kunci utama, auto-increment

1. member_id: member ID
2. exchange_date: exchange date;
3. pertukaran_barang: Tukar barang.
4. 3. Pembangunan bahagian belakang
5. Dalam pembangunan bahagian belakang, kami menggunakan PHP untuk mengendalikan penambahan, pemadaman, pengubahsuaian dan pertanyaan data serta menyediakan antara muka API untuk panggilan hadapan.

Buat fail yang dipanggil "exchangeRecords.php" dan pastikan anda mengimport konfigurasi sambungan pangkalan data. . if ($_SERVER["REQUEST_METHOD"] == "GET") {

// 创建数据库连接
$conn = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);

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

// 构建查询语句
$sql = "SELECT * FROM exchange_records WHERE member_id = '$member_id'";

// 执行查询
$result = $conn->query($sql);

// 检查查询结果是否为空
if ($result->num_rows > 0) {
    // 将查询结果转换为数组
    $rows = array();
    while ($row = $result->fetch_assoc()) {
        $rows[] = $row;
    }
    return $rows;
} else {
    return "没有找到会员积分兑换记录";
}

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

}

?>

Buat fail bernama "config.php", yang mengandungi maklumat konfigurasi pangkalan data.

// Maklumat konfigurasi pangkalan data

define('DB_HOST', 'localhost');
define('DB_USER', 'root');

define('DB_PASSWORD', 'password');

define('DB_NAME', 'your_database_name');

?>

4. Pembangunan bahagian hadapan

Gunakan Vue untuk membina halaman hadapan dalam contoh ini, kami akan menggunakan Vue-cli untuk mencipta asas projek.

Ubah suai fail src/main.js dan tambah konfigurasi penghalaan dan fungsi permintaan API.

import Vue daripada 'vue'

import Apl daripada './App.vue'
import VueRouter daripada 'vue-router'
import axios daripada 'axios'

Vue.use(VueRouter)

const router VueRouter({

laluan: [

// 获取会员ID
$member_id = $_GET["member_id"];

// 调用查询函数，返回结果
$result = getExchangeRecords($member_id);

// 返回查询结果
echo json_encode($result);

]

})
1. Vue.prototype.$http = axios
2. Vue baharu({

penghala,

render: h => h(App)
}).$mount ('#app')

Buat komponen halaman bernama "ExchangeRecords.vue". Halaman tersebut mengandungi kotak input dan butang untuk memasukkan ID ahli dan mencetuskan pertanyaan. .

{
  path: '/',
  name: 'Home',
  component: Home
},
// 其他路由配置...

}

}

Dalam contoh kod di atas, kami menggunakan arahan v-model Vue untuk melaksanakan pengikatan dua hala ID ahli, dan memulakan permintaan GET melalui perpustakaan axios untuk mendapatkan mata ahli rekod penebusan, dan Berikan keputusan ke halaman.

5. Operasi projek

Backend: Letakkan fail PHP di atas pada pelayan (contohnya, localhost/api/exchangeRecords.php).

Halaman hadapan: Jalankan servis npm run dalam projek Vue untuk memulakan pelayan pembangunan.

Lawati http://localhost:8080/#/exchange-records dalam penyemak imbas anda untuk memasuki halaman pertanyaan rekod penebusan mata ahli.

3. Ringkasan:

Artikel ini memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan projek dengan fungsi pertanyaan rekod penebusan mata ahli. Pertanyaan pangkalan data dilaksanakan melalui kod PHP hujung belakang, dan antara muka API disediakan untuk panggilan bahagian hadapan, dan kemudian permintaan dimulakan melalui halaman hujung hadapan Vue dan hasil pertanyaan diberikan. Saya harap artikel ini akan membantu semua orang dalam merealisasikan fungsi pertanyaan rekod penebusan mata ahli.

Atas ialah kandungan terperinci Pembangunan PHP dan Vue: Cara melaksanakan pertanyaan rekod penebusan mata ahli. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!