Maison > Article > base de données > Comment Vue implémente une requête floue sur les données de la base de données Mysql
Entrez les données dans la zone de saisie et effectuez une recherche floue dans le contenu correspondant de la base de données en fonction des résultats d'entrée pour obtenir une requête floue.
en utilisant la liaison bidirectionnelle v-model
pour interroger les données keyWord
. v-model
双向绑定查询数据keyWord
。
<el-input v-model="keyWord" placeholder="请输入关键字搜索" clearable></el-input> <el-button type="success" icon="el-icon-search" @click="search"></el-button>
由于输入框和显示结果的不再同一view
下,所以在路由跳转时将搜索结果传递给显示结果的页面,这里用的query
。
search函数:
SearchResult.vue
代码
在created
函数中获取输入框传来的keyWord
getData(offset,limit)
函数使用axios
向后端根据keyWord
查询数据,其中offset
和limit
是分页查询的参数。
//请求数据库数据的方法 getData(offset,limit){ this.axios.post('/php/search.php', qs.stringify({ offset: offset, limit: limit, keyWord: this.keyWord }), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((res) => { this.total = res.data.total this.resultList = res.data.data }).catch((err) => { this.$message.error(err) })
获取数据成功后就会将数据存入resultList
数组中,只需循环遍历该数组就可以向前端展示查询结果了。
后端使用的是php
写的,主要利用了sql
语句的like
来实现模糊查询。
后端search.php
文件,将数据库连接基本信息改为自己的。
<?php $servername = "主机地址"; $username = "账户"; $password = "密码"; $dbname = "数据库名称"; // 创建连接 $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } $keyWord = $_POST['keyWord']; //获取前端的参数 开始和结束number if ( !isset( $_POST['offset'] ) ) { echo 0; exit(); }; $offset = ( int )$_POST['offset']; if ( !isset( $_POST['limit'] ) ) { echo 0; exit(); }; $limit = ( int )$_POST['limit']; //分页查询数据库 $sql = "SELECT * FROM posts where title like '%$keyWord%' order by id desc LIMIT $limit OFFSET $offset"; $result = $conn->query($sql); $sqlGetCount = "SELECT COUNT(*) cnt FROM posts where title like '%$keyWord%'"; $rescnt = $conn->query($sqlGetCount); $rescnt = $rescnt->fetch_assoc(); $arr = array(); if ($result->num_rows > 0) { while ( $row = $result->fetch_assoc() ) { array_push( $arr, $row ); } //echo json_encode( $arr, JSON_UNESCAPED_UNICODE ); echo json_encode(array_merge(array('data'=>$arr),array('total'=>(int)$rescnt['cnt']))); } else { echo 0; } mysqli_close( $conn ); ?>
注意sql语句:
SELECT * FROM posts where title like '%$keyWord%' order by id desc LIMIT $limit OFFSET $offset;
like
后面应该使用 '%$keyWord%‘
传递参数,而不是 %' $keyWord'%
rrreee
Étant donné que la zone de saisie et le résultat d'affichage ne sont plus dans la même vue
, les résultats de la recherche sont transmis à la page où les résultats sont affichés lorsque l'itinéraire saute. /code> est utilisé ici.
SearchResult.vue
code🎜🎜🎜🎜🎜Obtenez le keyWord
dans la zone de saisie de la fonction créée
🎜🎜 getData(offset,limit)
utilise axios
pour interroger les données en fonction de keyWord
au niveau du backend, où offset
et limit
est le paramètre de la requête de pagination. 🎜rrreee🎜Après avoir obtenu avec succès les données, les données seront stockées dans le tableau resultList
. Il vous suffit de parcourir le tableau pour afficher les résultats de la requête sur le front-end. 🎜🎜Le backend est écrit en php
et utilise principalement le like
de l'instruction sql
pour implémenter des requêtes floues. 🎜Dans le fichier backend search.php
, remplacez les informations de connexion de base à la base de données par les vôtres. 🎜rrreee🎜Notez l'instruction SQL : 🎜rrreee🎜like
doit être suivi de '%$keyWord%'
pour transmettre les paramètres au lieu de % ' $keyWord'%
, c'est un piège. 🎜Ensuite, il s'agit d'un titre de requête flou basé sur les données d'entrée, qui est le titre du segment de données. Il peut être modifié pour interroger d'autres contenus. 🎜🎜3. Résultat🎜🎜🎜🎜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!