Vue realizes fuzzy query of Mysql database data

need

Enter data in the input box, and fuzzy search the corresponding content of the database according to the input result to realize fuzzy query.

accomplish

The input box uses v-model two-way binding to query data keyWord.

<el-input v-model="keyWord" placeholder="请输入关键字搜索" clearable></el-input>
        <el-button type="success" icon="el-icon-search" @click="search"></el-button>

Since the input box and the display result are not in the same view, the search result is passed to the page displaying the result when the routing jumps, and the query is used here.
Search function:
insert image description here
SearchResult.vue code
Obtain the keyWord from the input box in the created function.

The getData(offset, limit) function uses axios to query data from the backend based on keyWord, where offset and limit are the parameters for pagination query.

//请求数据库数据的方法
    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)
      })

After the data is successfully obtained, the data will be stored in the resultList array, and the query results can be displayed to the front end just by looping through the array.

The backend is written in php, which mainly uses the like of sql statement to realize fuzzy query.
In the backend search.php file, change the basic information of the database connection to your own.

<?php
$servername = "主机地址";
$username = "账户";
$password = "密码";
$dbname = "数据库名称";

// 创建连接
$conn = new mysqli($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'] ) ) {
    
    
	echo 0;
	exit();
};
$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 = "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 );
?>

Pay attention to the sql statement:

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

After like, you should use '%$keyWord%' to pass parameters instead of %' $keyWord'%, which is a pitfall.
Then this is a fuzzy query title based on the input data, that is, the title of the data segment, which can be changed to query other content.

result

insert image description here