Comment utiliser PHP et Vue pour implémenter la fonction de recherche de données-tutoriel php-php.cn

Comment utiliser PHP et Vue pour implémenter la fonction de recherche de données

PHPz

Libérer： 2023-09-25 09:10:02

original

1070 Les gens l'ont consulté

Comment utiliser PHP et Vue pour implémenter la fonction de recherche de données

Dans le développement Web moderne, de nombreuses applications doivent disposer de fonctions de recherche de données, afin que les utilisateurs puissent facilement trouver les données requises en fonction de conditions spécifiques. Cet article expliquera comment utiliser PHP et Vue pour implémenter des fonctions de recherche de données et fournira des exemples de code spécifiques.

1. Préparation
Avant de commencer à écrire du code, nous devons d'abord mettre en place un environnement de développement. Assurez-vous d'avoir installé les outils et logiciels suivants :

PHP : un langage de programmation côté serveur populaire utilisé pour gérer les demandes et les réponses pour les données.
Vue.js : un framework JavaScript pour créer des interfaces utilisateur capables d'obtenir des mises à jour dynamiques et des effets interactifs.
Base de données : vous pouvez choisir n'importe quelle base de données relationnelle, telle que MySQL, PostgreSQL, etc.

2. Créer une base de données et une table
Créez une table dans la base de données pour stocker les données que vous devez trouver. Supposons que nous ayons une table nommée « produits » avec les champs suivants :

id : l'identifiant unique du produit
name : nom du produit
price : prix du produit
category : catégorie de produit

3. Terminal suivant Programmation (PHP)
Tout d'abord, nous devons écrire du code PHP pour gérer les demandes de requêtes de données. Créez un fichier nommé "search.php" et ajoutez le code suivant :

<?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();
?>

Copier après la connexion

Le code ci-dessus se connecte d'abord à la base de données, puis obtient les conditions de requête transmises par le front-end, construit une instruction de requête SQL et convertit les résultats en JSON. format et le renvoie au front-end. L'opérateur "LIKE" est utilisé ici pour la correspondance floue afin de permettre aux utilisateurs de saisir des mots-clés partiels pour la requête.

4. Programmation front-end (Vue.js)
Ensuite, nous devons écrire du code Vue.js pour gérer l'interaction avec l'interface utilisateur et envoyer des requêtes de requête au backend. Dans le fichier HTML, ajoutez le code suivant :

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

Copier après la connexion

Le code ci-dessus utilise le framework Vue.js pour créer une interface contenant une zone de saisie, un bouton et une liste affichant les résultats de la requête. Lorsque l'utilisateur clique sur le bouton, la méthode "search" dans l'instance Vue sera appelée. Dans cette méthode, la bibliothèque Axios est utilisée pour envoyer une requête GET au fichier "search.php" sur le backend, ainsi que les conditions de requête. sont passés en paramètres.

5. Fonction de test
Maintenant, nous avons terminé le travail de codage back-end et front-end. Ouvrez le fichier HTML dans le navigateur, saisissez le nom du produit que vous souhaitez rechercher et cliquez sur le bouton de recherche. Le backend renverra les données qui remplissent les conditions et les affichera sur l'interface.

6. Résumé
Cet article présente comment utiliser PHP et Vue pour implémenter la fonction de recherche de données et fournit des exemples de code détaillés. De cette manière, les utilisateurs peuvent facilement trouver les données dont ils ont besoin en fonction de conditions spécifiques, et cette fonction peut être appliquée dans diverses applications. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment utiliser PHP et Vue pour implémenter la fonction de recherche de données