快捷導(dǎo)航

Vue實現(xiàn)模糊查詢-Mysql數(shù)據(jù)庫數(shù)據(jù)

更新時間：2022年01月25日 10:48:59 作者：小綿楊Yancy

這篇文章主要介紹了基于Vue實現(xiàn)Mysql數(shù)據(jù)庫數(shù)據(jù)模糊查詢,下面文章我們主要實現(xiàn)的是輸入框中輸入數(shù)據(jù)，根據(jù)輸入的結(jié)果模糊搜索數(shù)據(jù)庫對應(yīng)內(nèi)容，實現(xiàn)模糊查詢，感興趣的小伙伴可以進入文章我們一起學(xué)習(xí)

1.需求

輸入框中輸入數(shù)據(jù)，根據(jù)輸入的結(jié)果模糊搜索數(shù)據(jù)庫對應(yīng)內(nèi)容，實現(xiàn)模糊查詢。

2.實現(xiàn)

輸入框使用v-model雙向綁定查詢數(shù)據(jù)keyWord。

<el-input v-model="keyWord" placeholder="請輸入關(guān)鍵字搜索" clearable></el-input>
        <el-button type="success" icon="el-icon-search" @click="search"></el-button>

由于輸入框和顯示結(jié)果的不再同一view下，所以在路由跳轉(zhuǎn)時將搜索結(jié)果傳遞給顯示結(jié)果的頁面，這里用的query。

search函數(shù)：

SearchResult.vue代碼

在這里插入圖片描述

在created函數(shù)中獲取輸入框傳來的keyWord

getData(offset,limit)函數(shù)使用axios向后端根據(jù)keyWord查詢數(shù)據(jù)，其中offset和limit是分頁查詢的參數(shù)。

//請求數(shù)據(jù)庫數(shù)據(jù)的方法
    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)
      })

獲取數(shù)據(jù)成功后就會將數(shù)據(jù)存入resultList數(shù)組中，只需循環(huán)遍歷該數(shù)組就可以向前端展示查詢結(jié)果了。

后端使用的是php寫的，主要利用了sql語句的like來實現(xiàn)模糊查詢。
后端search.php文件，將數(shù)據(jù)庫連接基本信息改為自己的。

<?php
$servername = "主機地址";
$username = "賬戶";
$password = "密碼";
$dbname = "數(shù)據(jù)庫名稱";

// 創(chuàng)建連接
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("連接失敗: " . $conn->connect_error);
} 

$keyWord = $_POST['keyWord'];
//獲取前端的參數(shù) 開始和結(jié)束number
if ( !isset( $_POST['offset'] ) ) {
 echo 0;
 exit();
};
$offset = ( int )$_POST['offset'];

if ( !isset( $_POST['limit'] ) ) {
 echo 0;
 exit();
};
$limit = ( int )$_POST['limit'];
//分頁查詢數(shù)據(jù)庫
$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后面應(yīng)該使用 ’%$keyWord%‘傳遞參數(shù)，而不是 %’ $keyWord’%，算踩了一個坑吧。
然后這是根據(jù)輸入的數(shù)據(jù)模糊查詢標(biāo)題，也就是數(shù)據(jù)段title的，可以改為查詢其他的內(nèi)容。

3.結(jié)果

到此這篇關(guān)于基于Vue實現(xiàn)Mysql數(shù)據(jù)庫數(shù)據(jù)模糊查詢的文章就介紹到這了,更多相關(guān)Vue實現(xiàn)Mysql數(shù)據(jù)庫數(shù)據(jù)模糊查詢內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: