ホームページ > 記事 > バックエンド開発 > PHPとVueの開発：会員ポイント引き換えのレコードクエリを実装する方法

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

王林オリジナル: 2023-09-25 10:53:02537ブラウズ

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

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

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

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

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

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

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

バックエンド開発では、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」という名前のファイルを作成します。
1. // データベース構成情報
  define('DB_HOST', 'localhost');
  define('DB_USER', 'root');
  define('DB_PASSWORD', 'password');
  define('DB_NAME', 'your_database_name');
  ?>
  
  4. フロントエンド開発
  
  ##Vue を使用してフロントエンドページを構築するこの例では、Vue-cli を使用して基本プロジェクトを作成します。
  2. 「vue」から 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 を入力してクエリをトリガーするための入力ボックスとボタンが含まれています。
  1. ```
  <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) に配置します。
  1. ブラウザで http://localhost:8080/#/exchange-records にアクセスして、メンバーポイント引き換えレコードのクエリページに入ります。
  3. 概要:

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

php mysql npm define if const 接口 JS function default prototype 数据库 http router axios

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：PHP を使用して従業員勤怠データの権限管理機能を開発するにはどうすればよいですか?次の記事：PHP を使用して従業員勤怠データの権限管理機能を開発するにはどうすればよいですか?

続きを見る