PHP 및 Vue로 개발: 회원 포인트 상환 기록 조회
소개:
전자상거래 플랫폼이나 멤버십 시스템에서 포인트는 회원이 소비를 통해 포인트를 얻은 다음 포인트를 사용하여 상품을 교환하는 일반적인 보상 메커니즘입니다. 또는 서비스. 원활한 회원관리 및 회원활동 촉진을 위해 회원의 포인트 사용실적을 조회할 필요가 있습니다. 본 글에서는 PHP 및 Vue 개발을 예로 들어 회원 포인트 상환 기록 조회 기능 구현 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.
1. 프로젝트 준비
개발을 시작하기 전에 다음 항목을 확인해야 합니다.
"exchangeRecords.php"라는 파일을 생성하고 데이터베이스 연결 구성을 가져와야 합니다.
// 회원 포인트 상환 기록 조회
function getExchangeRecords($member_id) {
// 创建数据库连接
$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();
// 요청 처리
// 获取会员ID $member_id = $_GET["member_id"]; // 调用查询函数，返回结果 $result = getExchangeRecords($member_id); // 返回查询结果 echo json_encode($result);
?>
데이터베이스 구성 정보가 포함된 "config.php"라는 파일을 생성합니다.
define('DB_PASSWORD', 'password');
Define('DB_NAME', 'your_database_name');
?>
4. 프런트엔드 개발
Vue.use(VueRouter)
const router = new VueRouter({
{
path: '/',
name: 'Home',
component: Home
},
// 其他路由配置...})
new Vue({
render: h => h(App)
}).$mount ('#app')
"ExchangeRecords.vue"라는 페이지 구성 요소를 만듭니다. 페이지에는 입력 상자와 회원 ID를 입력하고 쿼리를 실행하는 버튼이 포함되어 있습니다.
<input type="text" v-model="memberId" placeholder="请输入会员ID" />
<button @click="getExchangeRecords">查询</button>
<table>
<thead>
<tr>
<th>记录ID</th>
<th>会员ID</th>
<th>兑换日期</th>
<th>兑换积分</th>
<th>兑换商品</th>
</tr>
</thead>
<tbody>
<tr v-for="record in exchangeRecords" :key="record.id">
<td>{{ record.id }}</td>
<td>{{ record.member_id }}</td>
<td>{{ record.exchange_date }}</td>
<td>{{ record.exchange_points }}</td>
<td>{{ record.exchange_goods }}</td>
</tr>
</tbody>
</table>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
