PHP dan Vue: Pelaksanaan pertanyaan sejarah penggunaan mata ahli dan contoh kod
Pengenalan:
Dengan populariti e-dagang , Sistem mata keahlian semakin digunakan secara meluas. Menyoal sejarah penggunaan mata keahlian telah menjadi salah satu keperluan fungsi yang sangat penting. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi pertanyaan sejarah penggunaan mata keahlian dan memberikan contoh kod khusus.
1. Reka bentuk pangkalan data
Untuk menyimpan sejarah penggunaan mata ahli, kita boleh mereka bentuk jadual data bernama member_points_history
的数据表。该表可以包含以下字段:
二、后端实现
api.php
,用于处理前端请求。<?php header('Content-Type: application/json; charset=utf-8'); $servername = "localhost"; $username = "root"; $password = "password"; $dbname = "your_database"; $conn = new mysqli($servername, $username, $password, $dbname); $conn->set_charset("utf8"); // 检查数据库连接是否成功 if ($conn->connect_error) { die("数据库连接失败: " . $conn->connect_error); } ?>
<?php // 获取指定会员的积分使用历史记录 if ($_SERVER['REQUEST_METHOD'] == 'GET' && isset($_GET['member_id'])) { $member_id = $_GET['member_id']; $sql = "SELECT * FROM member_points_history WHERE member_id = $member_id ORDER BY create_time DESC"; $result = $conn->query($sql); if ($result->num_rows > 0) { $rows = array(); while ($row = $result->fetch_assoc()) { $rows[] = $row; } echo json_encode($rows); } else { echo json_encode(array()); } } ?>
三、前端实现
MemberPointsHistory.vue
,用于展示会员积分使用历史记录。<template> <div> <h1>会员积分使用历史查询</h1> <table> <thead> <tr> <th>记录ID</th> <th>会员ID</th> <th>积分数量</th> <th>操作类型</th> <th>创建时间</th> </tr> </thead> <tbody> <tr v-for="history in pointsHistory" :key="history.id"> <td>{{ history.id }}</td> <td>{{ history.member_id }}</td> <td>{{ history.points }}</td> <td>{{ history.action }}</td> <td>{{ history.create_time }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { pointsHistory: [], }; }, mounted() { // 发送请求获取会员积分使用历史记录 const member_id = 1; // 替换为实际会员ID fetch(`api.php?member_id=${member_id}`) .then((response) => response.json()) .then((data) => { this.pointsHistory = data; }); }, }; </script> <style> /* 样式可根据实际需要进行修改 */ table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ccc; padding: 8px; text-align: left; } th { background-color: #ccc; } </style>
四、页面调用
MemberPointsHistory
组件。<template> <div> <!-- 其他页面内容 --> <member-points-history></member-points-history> <!-- 其他页面内容 --> </div> </template> <script> import MemberPointsHistory from './MemberPointsHistory.vue'; export default { components: { MemberPointsHistory, } }; </script>
MemberPointsHistory.vue
api.php
untuk memproses permintaan bahagian hadapan. #🎜🎜#MemberPointsHistory.vue
untuk memaparkan sejarah penggunaan mata ahli. #🎜🎜##🎜🎜#rrreee#🎜🎜# 4. Panggilan halaman #🎜🎜#MemberPointsHistory
ke dalam halaman yang perlu memaparkan sejarah penggunaan mata ahli. #🎜🎜##🎜🎜#rrreeeMemberPointsHistory.vue
dan gantikannya dengan ID ahli sebenar. #🎜🎜##🎜🎜##🎜🎜# Pada ketika ini, kami telah menyelesaikan pelaksanaan fungsi pertanyaan sejarah penggunaan mata ahli. Halaman hadapan akan memaparkan sejarah penggunaan mata ahli dan mendapatkan data berdasarkan API yang disediakan oleh bahagian belakang. Melalui kerjasama PHP dan Vue, kami dapat melaksanakan fungsi ini dengan cepat. #🎜🎜#Atas ialah kandungan terperinci PHP dan Vue: Cara melaksanakan pertanyaan sejarah penggunaan titik keahlian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!