Comment Vue implémente une requête floue sur les données de la base de données Mysql

1. Exigences

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.

2. Implémentez la zone de saisie

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[&#39;keyWord&#39;];
//获取前端的参数 开始和结束number
if ( !isset( $_POST[&#39;offset&#39;] ) ) {
 echo 0;
 exit();
};
$offset = ( int )$_POST[&#39;offset&#39;];

if ( !isset( $_POST[&#39;limit&#39;] ) ) {
 echo 0;
 exit();
};
$limit = ( int )$_POST[&#39;limit&#39;];
//分页查询数据库
$sql = "SELECT * FROM posts where title like &#39;%$keyWord%&#39; order by id desc LIMIT $limit OFFSET $offset";
$result = $conn->query($sql);

$sqlGetCount = "SELECT COUNT(*) cnt FROM posts where title like &#39;%$keyWord%&#39;";
$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(&#39;data&#39;=>$arr),array(&#39;total&#39;=>(int)$rescnt[&#39;cnt&#39;])));
 
} 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.

Fonction de recherche :

🎜SearchResult.vuecode🎜🎜🎜🎜🎜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!