日本語
日本語
導入：
最新のWeb開発では、リアルタイムのデータ読み込み関数が多くのアプリケーションの中核要件の1つになりました。この記事では、PHPとVUE.JSフレームワークを使用してデータ読み込み関数を実装する方法を示します。特定のコードの例を使用して、このテクノロジーをすばやく習得するのに役立ちます。
開始する前に、PHPとvue.jsがインストールされていることを確認してください。インストールされていない場合は、公式Webサイトにアクセスしてダウンロードしてインストールできます。さらに、「ユーザー」と呼ばれるテーブルを含む簡単なデータベースを作成して、ユーザーデータを保存します。
最初に、「loaddata.php」という名前のphpファイルを作成します。このファイルは、データベースからデータを照会し、フロントエンドに戻すために使用されます。
<?php
// データベースに接続します
$db = new PDO('mysql:host=localhost;dbname=test', 'root', '');
// クエリデータ
$stmt = $db->query("SELECT * FROM users");
$users = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 戻るJSONフォーマットデータ
header('Content-Type: application/json');
echo json_encode($users);
?>
上記のコードは最初にMySQLデータベースに接続し、「ユーザー」という名前のテーブル内のすべてのデータを照会します。次に、クエリ結果をJSON形式のFrontEndに返します。
次に、vue.jsにインスタンスを作成し、「マウントされた」ライフサイクルフックを使用して、バックエンドAPIを呼び出してデータをロードします。
new Vue({
el: '#app',
data: {
users: [] // バックエンドから取得したデータを保存するために使用されます
},
mounted() {
this.loadData(); // ページが読み込まれたときにデータ読み込み関数を呼び出す
},
methods: {
loadData() {
// 使用Axiosライブラリ送信HTTP聞く
axios.get('loadData.php')
.then(response => {
this.users = response.data;
})
.catch(error => {
console.log(error);
});
}
}
});
このコードでは、VUEインスタンスを作成し、「マウントされた」ライフサイクルフックの「LoadData」関数を呼び出します。この関数は、axiosを使用してHTTPリクエストをバックエンドインターフェイスに送信し、JSON形式でユーザーデータを取得し、VUEインスタンスで「ユーザー」配列を更新します。
Vueの「V-For」指令を通じて、HTMLで「ユーザー」配列を通過し、各ユーザーの情報を表示できます。
<div id="app">
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} - {{ user.email }}
</li>
</ul>
</div>
上記のコードでは、「v-for」ディレクティブを介して「ユーザー」配列を通過し、ページ上の各ユーザーの名前とメールボックスを表示します。
上記の手順を完了した後、ブラウザを開き、HTMLファイルにアクセスすると、データベースからロードされたすべてのユーザー情報が表示されるはずです。すべてが正常に機能する場合、ページには「ユーザー」テーブルに内容が表示されます。
この記事の導入を通じて、PHPとvue.jsフレームワークを使用してデータ読み込み関数を実装する方法を学びました。バックエンドPHPファイルはデータベースからデータを取得し、JSON形式に戻ります。 Frontend Vueインスタンスは、Axiosライブラリを介してデータを取得し、ページに表示します。この記事が、PHPとVUEをよりよく理解し、使用してデータ読み込み機能を実装できることを願っています。
