PHPとVueを使ってデータ検索機能を実装する方法-PHPチュートリアル-php.cn

PHPとVueを使ってデータ検索機能を実装する方法

PHPz

リリース： 2023-09-25 09:10:02

オリジナル

1069 人が閲覧しました

PHPとVueを使ってデータ検索機能を実装する方法

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 サイトの他の関連記事を参照してください。