PHPとVueの開発：会員ポイント引き換えのレコードクエリを実装する方法

PHP と Vue の開発: メンバー ポイント引き換えレコード クエリ

はじめに:
e コマース プラットフォームやメンバーシップ システムでは、ポイントは一般的な報酬メカニズムです。消費を通じてポイントを獲得し、そのポイントを商品やサービスと引き換えることができます。会員管理を容易にし、会員活動を促進するためには、会員のポイント交換履歴を照会する必要があります。この記事では、PHPとVueの開発を例に、会員ポイント交換履歴照会機能の実装方法と具体的なコード例を詳しく紹介します。

1. プロジェクトの準備
開発を開始する前に、次の事項を確認する必要があります:

1. PHP 環境がインストールおよび設定されていることを確認します。 # Vue 環境がインストールされ、完全に構成されていることを確認します;
2. データベースが作成され、メンバー ポイント引き換えレコードの保存に使用されるデータ テーブルが含まれていることを確認します。
3. 2. データベース設計

この例では、データベースとして MySQL を使用します。次のフィールドを含む「exchange_records」という名前のデータ テーブルを作成します:

id: レコード ID、主キー、自動インクリメント;

1. member_id: メンバー ID;
2. exchange_date: 交換日;
3. exchange_points: 交換ポイント;
4. exchange_goods: 交換商品。
5. 3. バックエンド開発

バックエンド開発では、PHP を使用してデータの追加、削除、変更、クエリを処理し、フロントエンド呼び出し用の API インターフェイスを提供します。

「exchangeRecords.php」というファイルを作成し、データベース接続構成をインポートしてください。

1. //データベース接続設定のインポート

   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 リクエスト関数を追加します。
   2. 「vue」から Vue をインポート
   「./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 を入力してクエリをトリガーするための入力ボックスとボタンが含まれています。

   3. <テンプレート>

   <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>

<スクリプト>
デフォルトのエクスポート {

data() {

return {
  memberId: '',
  exchangeRecords: []
}

},
メソッド: {

getExchangeRecords() {
  this.$http.get('/api/exchangeRecords.php', { params: { member_id: this.memberId } })
    .then(response => {
      this.exchangeRecords = response.data;
    })
    .catch(error => {
      console.log(error);
    });
}

}
}

上記のコード例では、Vue の v-model 命令を使用してメンバー ID の双方向バインディングを実装し、axios ライブラリを通じて GET リクエストを開始してメンバー ポイント引き換えレコードを取得し、結果をページにレンダリングします。 。

5. プロジェクトの操作

バックエンド: 上記の PHP ファイルをサーバー (例: localhost/api/exchangeRecords.php) に配置します。

フロントエンド: Vue プロジェクトで npm runserve を実行して、開発サーバーを起動します。
1. ブラウザで http://localhost:8080/#/exchange-records にアクセスして、メンバー ポイント引き換えレコードのクエリ ページに入ります。
3. 概要:
この記事では、PHP と Vue を使用して、会員ポイント交換履歴照会機能を備えたプロジェクトを開発する方法を紹介します。データベース クエリはバックエンド PHP コードを通じて実装され、API インターフェイスがフロントエンド呼び出しに提供され、Vue フロントエンド ページを通じてリクエストが開始され、クエリ結果が表示されます。この記事が会員ポイント交換履歴のクエリ機能を導入する皆様の参考になれば幸いです。

以上がPHPとVueの開発：会員ポイント引き換えのレコードクエリを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。