Vue が Mysql データベース データのファジー クエリを実装する方法

1. 要件

入力ボックスにデータを入力し、入力結果に基づいてデータベースの対応するコンテンツをあいまい検索して、あいまいクエリを実現します。

2.
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# が使用されます。
#検索関数:

##SearchResult.vueCode

#created

関数の入力ボックスから keyWord

getData(offset,limit)# を取得します # #この関数は、axios を使用して、

keyWord

に基づいてデータをバックエンドにクエリします。ここで、offset と limit はページング クエリのパラメーターです。 <pre class="brush:vb;">//请求数据库数据的方法 getData(offset,limit){ this.axios.post(&amp;#39;/php/search.php&amp;#39;, qs.stringify({ offset: offset, limit: limit, keyWord: this.keyWord }), { headers: { &amp;#39;Content-Type&amp;#39;: &amp;#39;application/x-www-form-urlencoded&amp;#39; } }).then((res) =&gt; { this.total = res.data.total this.resultList = res.data.data }).catch((err) =&gt; { this.$message.error(err) })</pre>データの取得に成功すると、データは resultList 配列に保存されます。配列をループしてクエリ結果をフロントエンドに表示するだけです。 バックエンドは

php

で記述されており、主に sql ステートメントの

like

を使用してファジー クエリを実装します。 Backendsearch.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 ステートメントに注意してください:
<pre class="brush:sql;">SELECT * FROM posts where title like &amp;#39;%$keyWord%&amp;#39; order by id desc LIMIT $limit OFFSET $offset;</pre>

like

は後で使用する必要があります '%$keyWord%' を渡すにはパラメータ、そしてそれは

%' $keyWord'%

ではありません。これは単なる罠です。 これは、入力データ (データ セグメントのタイトル) に基づくあいまいクエリ タイトルです。他のコンテンツをクエリするために変更できます。 3. 結果

以上がVue が Mysql データベース データのファジー クエリを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。