Vue implements fuzzy query-Mysql database data

Vue implements fuzzy query-Mysql database data

1. Demand

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

2. Implementation

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

<el-input v-model="keyWord" placeholder="Please enter the keyword to search" 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 that displays the results when the route jumps. query used here is

search function:

SearchResult.vue code

insert image description here

Get keyWord from the input box in the created function

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

//Method to request database data 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 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 , and mainly uses like of sql statements to implement fuzzy queries.
In the backend search.php file, change the basic database connection information to your own.

<?php
$servername = "Host Address";
$username = "account";
$password = "password";
$dbname = "Database name";

// Create a connection $conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$keyWord = $_POST['keyWord'];
//Get the start and end number of the front-end parameters
if ( !isset( $_POST['offset'] ) ) {
 echo 0;
 exit();
};
$offset = ( int )$_POST['offset'];

if ( !isset( $_POST['limit'] ) ) {
 echo 0;
 exit();
};
$limit = ( int )$_POST['limit'];
//Pagination query database $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 );
?>

Note the sql statement:

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

like should be followed by '%$keyWord%' to pass parameters instead of %' $keyWord'% . I guess I've fallen into a trap.
Then this is a fuzzy query title based on the input data, that is, the data segment title, which can be changed to query other content.

3. Results

This is the end of this article about implementing fuzzy query of MySQL database data based on Vue. For more relevant content about implementing fuzzy query of MySQL database data based on Vue, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • A simple example of how to implement fuzzy query in Vue
  • Vue implements the fuzzy query method of Input input box
  • Vue implements the sample code of fuzzy query of input box (application scenario of throttling function)
  • Vue2 filter fuzzy query method
  • Sample code for fuzzy query of Vue input box

<<:  Difference between varchar and char types in MySQL

>>:  Teach you how to install docker on windows 10 home edition

Recommend

10 Tips to Improve Website Usability

Whether it is a corporate website, a personal blo...

CSS style does not work (the most complete solution summary in history)

When we write pages, we sometimes find that the C...

Detailed explanation of incompatible changes in rendering functions in Vue3

Table of contents Rendering API changes Render fu...

How to Learn Algorithmic Complexity with JavaScript

Table of contents Overview What is Big O notation...

Detailed explanation of three commonly used web effects in JavaScript

Table of contents 1 element offset series 1.1 Off...

Docker case analysis: Building a Redis service

Table of contents 1 Create mount directories and ...

CSS delivery address parallelogram line style example code

The code looks like this: // Line style of the pa...

How to quickly paginate MySQL data volumes of tens of millions

Preface In backend development, in order to preve...

Summary of Vue's cross-domain problem handling and solutions

When you send a network request, the following sa...

Cause Analysis and Solution of I/O Error When Deleting MySQL Table

Problem phenomenon I recently used sysbench to te...

Web Design Tutorial (7): Improving Web Design Efficiency

<br />Previous article: Web Design Tutorial ...

Proxy realizes the principle of two-way binding of Vue3 data

Table of contents 1. Advantages of proxy vs. Obje...

Detailed explanation of non-parent-child component communication in Vue3

Table of contents First method App.vue Home.vue H...

JavaScript Document Object Model DOM

Table of contents 1. JavaScript can change all HT...

How to disable IE10's password clear text display and quick clear function

IE10 provides a quick clear button (X icon) and a ...