How Vue implements fuzzy query of Mysql database data

1. Requirements

Enter data in the input box, and fuzzy search the corresponding content of the database based on the input results to achieve fuzzy query.

2. Implement the

input box using 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 no longer in the same view, the search results are passed to the page where the results are displayed when the route jumps. The query# is used here. ##.

search function:

##SearchResult.vue

Code

Get the

keyWord

getData(offset,limit)# from the input box in the created

function ##The function uses

axios to query data based on keyWord to the backend, where offset and limit are parameters for paging 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 successfully obtaining the data, the data will be stored in the resultList

array. You only need to loop through the array to display the query results to the front end.

The backend is written in php

, which mainly uses the

like of the sql statement to implement fuzzy query. Backendsearch.php file, change the basic database connection information 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[&#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 );
?>

Note the sql statement:

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

like should be used later

'%$keyWord%' to pass parameters, and It's not %' $keyWord'%, it's just a trap. Then this is a fuzzy query title based on the input data, which is the title of the data segment. It can be changed to query other content. 3. Result

The above is the detailed content of How Vue implements fuzzy query of Mysql database data. For more information, please follow other related articles on the PHP Chinese website!