Vue はファジークエリを実装します - MySQL データベースデータ

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="検索"></el-button>


入力ボックスと表示結果が同じviewではなくなったため、ルートがジャンプしたときに検索結果が結果を表示するページに渡されます。ここで使用するquery

検索機能:

SearchResult.vueコード

ここに画像の説明を挿入

created関数の入力ボックスからkeyWordを取得します

getData(offset,limit)関数は、 axiosを使用して、 keyWordに基づいてバックエンドからデータを照会します。ここで、 offsetlimitページング クエリのパラメーターです。

//データベースデータを要求するメソッド getData(offset,limit){
      this.axios.post('/php/search.php', qs.stringify({
        オフセット: オフセット、
        制限: 制限、
        キーワード: this.keyWord
      }), { ヘッダー: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((res) => {
        this.total = res.data.total
        this.resultList = res.data.data
      }).catch((エラー) => {
        this.$message.error(err)
      })

データを正常に取得すると、そのデータはresultList配列に保存されます。クエリ結果をフロントエンドに表示するには、配列をループするだけです。

バックエンドはphpで記述されており、主にsqlステートメントlikeを使用してファジークエリを実装します。
バックエンドのsearch.phpファイルで、基本的なデータベース接続情報を独自のものに変更します。

<?php
$servername = "ホストアドレス";
$username = "アカウント";
$password = "パスワード";
$dbname = "データベース名";

// 接続を作成します $conn = new mysqli($servername, $username, $password, $dbname);
// 接続を確認する
($conn->connect_error) の場合 {
    die("接続に失敗しました: " . $conn->connect_error);
} 

$keyWord = $_POST['keyWord'];
//フロントエンドパラメータの開始番号と終了番号を取得します
if ( !isset( $_POST['offset'] ) ) {
 エコー0;
 出口();
};
$offset = ( int )$_POST['offset'];

if ( !isset( $_POST['limit'] ) ) {
 エコー0;
 出口();
};
$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 = "タイトルが '%$keyWord%' のような投稿から COUNT(*) cnt を選択";
$rescnt = $conn->クエリ($sqlGetCount);
$rescnt = $rescnt->fetch_assoc();
$arr = 配列();
($result->num_rows > 0)の場合{
 $row = $result->fetch_assoc() の間 {
    配列をプッシュします($arr, $row);
}
 //json_encode($arr, JSON_UNESCAPED_UNICODE) をエコーし​​ます。
 echo json_encode(array_merge(array('data'=>$arr),array('total'=>(int)$rescnt['cnt'])));
 
} それ以外 {
    エコー0;
}
mysqli_close($conn);
?>

次の SQL ステートメントに注意してください:

SELECT * FROM タイトルが '%$keyWord%' のような投稿、ID による並べ替え、LIMIT $limit OFFSET $offset;

パラメータを渡すには、 '%$keyWord%' %' $keyWord'% ' を続ける必要がありlike 。私は罠に落ちてしまったようです。
これは入力データに基づくあいまいクエリ タイトル、つまりデータ セグメント タイトルであり、他のコンテンツをクエリするために変更できます。

3. 結果

これで、Vue に基づいて MySQL データベース データのあいまいクエリを実装する方法に関するこの記事は終了です。Vue に基づいて MySQL データベース データのあいまいクエリを実装することに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueでファジークエリを実装する方法の簡単な例
  • VueはInput入力ボックスのファジークエリメソッドを実装します
  • Vueは入力ボックスのファジークエリのサンプルコードを実装します(スロットリング機能の適用シナリオ)
  • Vue2 フィルター ファジー クエリ メソッド
  • Vue 入力ボックスのファジークエリのサンプルコード

<<:  MySQL における varchar 型と char 型の違い

>>:  Windows 10 Home EditionにDockerをインストールする方法を教えます

推薦する

ウェブページにコンテンツが多すぎる場合に、下から上へ素早く戻る方法

Web フロントエンド開発では、ページに多くの記事を表示することが避けられません。記事の最後にあるク...

HTML onfocus gain focus および onblur lose focus イベントの詳細な説明

HTML onfocus イベント属性定義と使用法onfocus 属性は、要素がフォーカスを受け取っ...

Docker Swarmを使用してWordPressを構築する方法

原因かつて私は Vultr に WordPress を設定しましたが、よく知られている理由により、こ...

Linux仮想マシンを作成し、仮想マシンネットワークを設定する方法に関するVMwareの詳細なチュートリアル

VMware で Linux 仮想マシンを作成し、VMware と仮想マシンのネットワークを設定する...

CD コマンドを使わずに Linux でディレクトリ/フォルダに入る方法

ご存知のとおり、cd コマンドがないと、Linux でディレクトリを切り替えることはできません。それ...

MySQL パフォーマンスの最適化: インデックスを効率的かつ正しく使用する方法

実践こそが真実をテストする唯一の方法です。この記事では、インデックスの全体的な使用法についてのみ説明...

MySQL DATE_FORMAT関数の使用

タオバオが、ダブル11に最も多くの注文をした2人のユーザー、ユーザー1:「ショッピングの皇帝、陳哈哈...

要素のフォームコンポーネントに関する注意事項

要素フォームとコード表示詳細はエレメントフォーム公式サイトをご覧ください構造と機能の分析紹介とソース...

HTML ページでコンテンツの選択、コピー、右クリックを防止する方法の詳細な説明

時には、Web ページに掲載されているコンテンツが悪意のある人物に盗用されるのを望まないため、Web...

MySQL InnoDB テーブルスペース暗号化の例の詳細な説明

序文MySQL 5.7.11 以降、MySQL は、別の表領域に格納された InnoDB テーブルの...

Vue3を使用してjsで呼び出せるコンポーネントを実装する

目次序文1. 従来のVueコンポーネント1. メインコンポーネントコード: 2. 使用方法3. 成果...

Linux システム構成 (サービス制御) の詳細な紹介

目次序文1. システムサービス制御1. システムctl 2. ターゲット3. 共通システムサービス4...

nginx プロキシ サーバーで双方向証明書検証を構成する方法

証明書チェーンを生成するスクリプトを使用して、ルート証明書、中間証明書、および 3 つのクライアント...

Vueルーティングコンポーネントでパラメータを渡す8つの方法の詳細な説明

シングルページアプリケーションを開発する場合、特定のルートを入力し、パラメータに基づいてサーバーから...

WeChatミニプログラムでトークンの有効期限を処理する方法

目次まず結論から質問解決Promiseを使用してコールバック関数をカプセル化する要約するまず結論から...