PHP と Vue を使用してデータ検索機能を実装する方法
現代の Web 開発では、ユーザーがデータに従って簡単に検索できるように、多くのアプリケーションにデータ検索機能が必要です。特定の条件に合わせて必要なデータを見つけます。この記事では、PHP と Vue を使用してデータ検索機能を実装する方法と、具体的なコード例を紹介します。
1. 準備
コードを書き始める前に、まず開発環境をセットアップする必要があります。次のツールとソフトウェアがインストールされていることを確認してください。
- PHP: データの要求と応答を処理するために使用される一般的なサーバー側プログラミング言語。
- Vue.js: 動的な更新とインタラクティブな効果を実現できるユーザー インターフェイスを構築するための JavaScript フレームワーク。
- データベース: MySQL、PostgreSQL などのリレーショナル データベースを選択できます。
2. データベースとテーブルの作成
検索する必要があるデータを保存するためにデータベースにテーブルを作成します。次のフィールドを持つ「products」というテーブルがあるとします。
- id: 製品の一意の識別子
- name: 製品の名前
- Price: 製品価格
- category: 製品カテゴリ
3. バックエンド プログラミング (PHP)
まず、データ クエリ リクエストを処理するための PHP コードを記述する必要があります。 「search.php」という名前のファイルを作成し、次のコードを追加します。
<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydatabase";
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 获取查询条件
$searchTerm = $_GET['searchTerm'];
// 构建SQL查询语句
$sql = "SELECT * FROM products WHERE name LIKE '%$searchTerm%'";
$result = $conn->query($sql);
// 返回结果
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
echo json_encode($data);
} else {
echo "0 结果";
}
$conn->close();
?>上記のコードは、まずデータベースに接続し、次にフロントエンドによって渡されたクエリ条件を取得し、SQL クエリ ステートメントを構築し、変換します。結果は JSON 形式でフロントエンドに返されます。ここでは、ユーザーがクエリの部分的なキーワードを入力できるようにするために、あいまい一致に「LIKE」演算子が使用されています。
4. フロントエンド プログラミング (Vue.js)
次に、ユーザー インターフェイスの操作を処理し、クエリ リクエストをバックエンドに送信するための Vue.js コードを作成する必要があります。 HTML ファイルに、次のコードを追加します。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="searchTerm">
<button @click="search">搜索</button>
<ul>
<li v-for="product in products">{{ product.name }}, 价格：{{ product.price }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
searchTerm: '',
products: []
},
methods: {
search: function() {
axios.get('search.php', {
params: {
searchTerm: this.searchTerm
}
})
.then(function(response) {
this.products = response.data;
}.bind(this))
.catch(function(error) {
console.log(error);
});
}
}
});
</script>
</body>
</html>上記のコードは、Vue.js フレームワークを使用して、入力ボックス、ボタン、クエリ結果を表示するリストを含むインターフェイスを作成します。ユーザーがボタンをクリックすると、Vue インスタンスの「search」メソッドが呼び出されます。このメソッドでは、Axios ライブラリを使用して、バックエンドの「search.php」ファイルに GET リクエストを送信し、クエリ条件を送信します。パラメータとして渡されます。
5. テスト機能
これで、バックエンドとフロントエンドのコーディング作業が完了しました。ブラウザでHTMLファイルを開き、検索したい製品名を入力して検索ボタンをクリックしてください。バックエンドは条件を満たすデータを返し、インターフェースに表示します。
6. 概要
この記事では、PHP と Vue を使用してデータ検索機能を実装する方法を紹介し、詳細なコード例を示します。このように、ユーザーは特定の条件に基づいて必要なデータを簡単に見つけることができ、この機能はさまざまなアプリケーションに適用できます。この記事がお役に立てば幸いです!
以上がPHPとVueを使ってデータ検索機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
PHPの継続的な使用：その持久力の理由Apr 19, 2025 am 12:23 AMまだ人気があるのは、使いやすさ、柔軟性、強力なエコシステムです。 1）使いやすさとシンプルな構文により、初心者にとって最初の選択肢になります。 2）Web開発、HTTP要求とデータベースとの優れた相互作用と密接に統合されています。 3）巨大なエコシステムは、豊富なツールとライブラリを提供します。 4）アクティブなコミュニティとオープンソースの性質は、それらを新しいニーズとテクノロジーの傾向に適応させます。
PHPおよびPython：類似点と相違点を調査しますApr 19, 2025 am 12:21 AMPHPとPythonはどちらも、Web開発、データ処理、自動化タスクで広く使用されている高レベルのプログラミング言語です。 1.PHPは、ダイナミックウェブサイトとコンテンツ管理システムの構築によく使用されますが、PythonはWebフレームワークとデータサイエンスの構築に使用されることがよくあります。 2.PHPはエコーを使用してコンテンツを出力し、Pythonは印刷を使用します。 3.両方ともオブジェクト指向プログラミングをサポートしますが、構文とキーワードは異なります。 4。PHPは弱いタイプの変換をサポートしますが、Pythonはより厳しくなります。 5. PHPパフォーマンスの最適化には、Opcacheおよび非同期プログラミングの使用が含まれますが、PythonはCprofileおよび非同期プログラミングを使用します。
PHPおよびPython：さまざまなパラダイムが説明されていますApr 18, 2025 am 12:26 AMPHPは主に手順プログラミングですが、オブジェクト指向プログラミング（OOP）もサポートしています。 Pythonは、OOP、機能、手続き上のプログラミングなど、さまざまなパラダイムをサポートしています。 PHPはWeb開発に適しており、Pythonはデータ分析や機械学習などのさまざまなアプリケーションに適しています。
PHPとPython：彼らの歴史を深く掘り下げますApr 18, 2025 am 12:25 AMPHPは1994年に発信され、Rasmuslerdorfによって開発されました。もともとはウェブサイトの訪問者を追跡するために使用され、サーバー側のスクリプト言語に徐々に進化し、Web開発で広く使用されていました。 Pythonは、1980年代後半にGuidovan Rossumによって開発され、1991年に最初にリリースされました。コードの読みやすさとシンプルさを強調し、科学的コンピューティング、データ分析、その他の分野に適しています。
PHPとPythonの選択：ガイドApr 18, 2025 am 12:24 AMPHPはWeb開発と迅速なプロトタイピングに適しており、Pythonはデータサイエンスと機械学習に適しています。 1.PHPは、単純な構文と迅速な開発に適した動的なWeb開発に使用されます。 2。Pythonには簡潔な構文があり、複数のフィールドに適しており、強力なライブラリエコシステムがあります。
PHPとフレームワーク：言語の近代化Apr 18, 2025 am 12:14 AMPHPは、多数のWebサイトとアプリケーションをサポートし、フレームワークを通じて開発ニーズに適応するため、近代化プロセスで依然として重要です。 1.PHP7はパフォーマンスを向上させ、新機能を紹介します。 2。Laravel、Symfony、Codeigniterなどの最新のフレームワークは、開発を簡素化し、コードの品質を向上させます。 3.パフォーマンスの最適化とベストプラクティスは、アプリケーションの効率をさらに改善します。
PHPの影響：Web開発などApr 18, 2025 am 12:10 AMphphassiblasifly-impactedwebdevevermentandsbeyondit.1）itpowersmajorplatformslikewordpratsandexcelsindatabase interactions.2）php'sadaptableability allowsitale forlargeapplicationsusingframeworkslikelavel.3）
スカラータイプ、リターンタイプ、ユニオンタイプ、ヌル可能なタイプなど、PHPタイプのヒントはどのように機能しますか？Apr 17, 2025 am 12:25 AMPHPタイプは、コードの品質と読みやすさを向上させるためのプロンプトがあります。 1）スカラータイプのヒント：php7.0であるため、基本データ型は、int、floatなどの関数パラメーターで指定できます。 3）ユニオンタイプのプロンプト：PHP8.0であるため、関数パラメーターまたは戻り値で複数のタイプを指定することができます。 4）Nullable Typeプロンプト：null値を含めることができ、null値を返す可能性のある機能を処理できます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 中国語版
中国語版、とても使いやすい
Dreamweaver Mac版
ビジュアル Web 開発ツール
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
