Maison >développement back-end >tutoriel php >Comment utiliser PHP et Vue pour implémenter la fonction de recherche de données
Comment utiliser PHP et Vue pour implémenter la fonction de recherche de données
- PHPzoriginal
- 2023-09-25 09:00:431134parcourir
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();
?>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>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!