目錄

• 1.需求
• 2.實現
• 3.結果

1.需求

輸入框中輸入資料，根據輸入的結果模糊搜尋對應內容，實現模糊查詢。

2.實現

輸入框使用v-model雙向繫結查詢資料keyWord。

<el-input v-model="keyWord" placeholder="請輸入關鍵字搜尋" clearable></el-input>
        <elmJLMyDeAZd-button type="success" icon="el-icon-search" @click="search"></el-button>

由於輸入框和顯示結果的不再同一view

search函式：

SearchResult.程式碼

在created函式中獲取輸入框傳來的keyWord

getData(offset,limit)函式使用axios向後端根據keyWord查詢資料，其中offset和limit是分頁查詢的引數。

//請求資料庫資料的方法
    getData(offset,limit){
      this.axios.post('//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 i($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'] ) ) {
 ecmJLMyDeAZd
 
ho 0;
 exit();
};
$limit = ( int )$_POST[http://www.cppcns.com'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 on_encode( $arr,JSON_UNESCAPED_UNICODE );
 echo json_encode(array_merge(array('data'=>$arr),array('total'=>(int)$rescnt['cnt'])));
 
} else {
    echo 0;
}
mysqli_close( $conn );
?>
mJLMyDeAZd

注意sql語句：

SELECT * FROM posts where title like '%$keyWord%' order by id desc LIMIT $limit OFFSET $offset;

like後面應該使用 '%$keyWord%‘傳遞引數，而不是 %' $keyWord'%，算踩了一個坑吧。
然後這是根據輸入的資料模糊查詢標題，也就是資料段title的，可以改為查詢其他的內容。

3.結果

到此這篇關於基於Vue實現Mysql資料庫資料模糊查詢的文章就介紹到這了,更多相關Vue實現Mysql資料庫資料模糊查詢內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！