1. DemandEnter 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 <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 search function: Get //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 The backend is written in <?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;
3. ResultsThis 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:
|
<<: Difference between varchar and char types in MySQL
>>: Teach you how to install docker on windows 10 home edition
Whether it is a corporate website, a personal blo...
When we write pages, we sometimes find that the C...
Table of contents Rendering API changes Render fu...
Table of contents Overview What is Big O notation...
Table of contents 1 element offset series 1.1 Off...
Table of contents 1 Create mount directories and ...
The code looks like this: // Line style of the pa...
Preface In backend development, in order to preve...
When you send a network request, the following sa...
Problem phenomenon I recently used sysbench to te...
<br />Previous article: Web Design Tutorial ...
Table of contents 1. Advantages of proxy vs. Obje...
Table of contents First method App.vue Home.vue H...
Table of contents 1. JavaScript can change all HT...
IE10 provides a quick clear button (X icon) and a ...