PHP 및 Vue 개발: 회원 포인트 상환 기록 쿼리 구현 방법

PHP 및 Vue로 개발: 회원 포인트 상환 기록 조회

소개:
전자상거래 플랫폼이나 멤버십 시스템에서 포인트는 회원이 소비를 통해 포인트를 얻은 다음 포인트를 사용하여 상품을 교환하는 일반적인 보상 메커니즘입니다. 또는 서비스. 원활한 회원관리 및 회원활동 촉진을 위해 회원의 포인트 사용실적을 조회할 필요가 있습니다. 본 글에서는 PHP 및 Vue 개발을 예로 들어 회원 포인트 상환 기록 조회 기능 구현 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. 프로젝트 준비
개발을 시작하기 전에 다음 항목을 확인해야 합니다.

1. PHP 환경이 설치되고 완전히 구성되었는지 확인합니다.
2. Vue 환경이 설치되고 완전히 구성되었는지 확인합니다. 데이터베이스가 생성되었고 회원 포인트 상환 기록을 저장하는 데 사용되는 데이터 테이블이 포함되어 있는지 확인하십시오.
3. 2. 데이터베이스 디자인

이 예에서는 MySQL을 데이터베이스로 사용하겠습니다. 다음 필드를 포함하는 "exchange_records"라는 데이터 테이블을 만듭니다.

id: 레코드 ID, 기본 키, 자동 증가;

1. member_id: 회원 ID
2. exchange_date: 교환 날짜;
3. exchange_goods: 상품을 교환합니다.
4. 3. 백엔드 개발
5. 백엔드 개발에서는 PHP를 사용하여 데이터의 추가, 삭제, 수정 및 쿼리를 처리하고 프런트엔드 호출을 위한 API 인터페이스를 제공합니다.

"exchangeRecords.php"라는 파일을 생성하고 데이터베이스 연결 구성을 가져와야 합니다.

// 데이터베이스 연결 구성 가져오기 require_once "config.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();

}

// 요청 처리

if ($_SERVER["REQUEST_METHOD"] == "GET") {

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

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

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

}

?>

데이터베이스 구성 정보가 포함된 "config.php"라는 파일을 생성합니다.

// 데이터베이스 구성 정보 define('DB_HOST', 'localhost');

define('DB_USER', 'root');

define('DB_PASSWORD', 'password');
Define('DB_NAME', 'your_database_name');
?>

4. 프런트엔드 개발

Vue를 사용하여 프런트엔드 페이지를 구축합니다. 이 예에서는 Vue-cli를 사용하여 기본 페이지를 생성합니다. 프로젝트.

src/main.js 파일을 수정하고 라우팅 구성 및 API 요청 기능을 추가하세요.

1. 'vue'에서 Vue 가져오기
2. './App.vue'에서 앱 가져오기
'vue-router'에서 VueRouter 가져오기

'axios'에서 axios 가져오기

Vue.use(VueRouter)

const router = new VueRouter({

경로: [

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

]

})

Vue.prototype.$http = axios

new Vue({

router,

render: h => h(App)

}).$mount ('#app')

"ExchangeRecords.vue"라는 페이지 구성 요소를 만듭니다. 페이지에는 입력 상자와 회원 ID를 입력하고 쿼리를 실행하는 버튼이 포함되어 있습니다.

<script><p>기본값 내보내기 {<br> 데이터() {<pre class='brush:php;toolbar:false;'>return { memberId: '', exchangeRecords: [] }</pre><p>},<br> 메소드: { <br><pre class='brush:php;toolbar:false;'>getExchangeRecords() { this.$http.get('/api/exchangeRecords.php', { params: { member_id: this.memberId } }) .then(response =&gt; { this.exchangeRecords = response.data; }) .catch(error =&gt; { console.log(error); }); }</pre>}<p>}<br></script>

위의 코드 예에서는 Vue의 v-model 명령을 사용하여 회원 ID의 양방향 바인딩을 달성하고 axios 라이브러리를 통해 GET 요청을 시작하여 회원 포인트를 얻습니다. 상환 기록 및 결과를 페이지로 렌더링합니다.

5. 프로젝트 작업

백엔드: 위의 PHP 파일을 서버에 배치합니다(예: localhost/api/exchangeRecords.php).
프런트 엔드: Vue 프로젝트에서 npm run submit을 실행하여 개발 서버를 시작하세요.
1. 브라우저에서 http://localhost:8080/#/exchange-records를 방문하여 회원포인트 적립기록 조회 페이지로 들어가세요.
2. 요약:
3. 이 기사에서는 PHP와 Vue를 사용하여 회원 포인트 상환 기록 조회 기능이 있는 프로젝트를 개발하는 방법을 소개합니다. 데이터베이스 쿼리는 백엔드 PHP 코드를 통해 구현되고, 프런트엔드 호출을 위한 API 인터페이스가 제공되며, Vue 프런트엔드 페이지를 통해 요청이 시작되고 쿼리 결과가 렌더링됩니다. 본 글이 회원포인트 적립내역 조회 기능을 구현하는 모든 분들께 도움이 되기를 바랍니다.

위 내용은 PHP 및 Vue 개발: 회원 포인트 상환 기록 쿼리 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!