Shulou(Shulou.com)06/01 Report--

This article mainly introduces Vue how to achieve fuzzy query of Mysql database data, the article is very detailed, has a certain reference value, interested friends must read it!

1. Demand

Input data in the input box, fuzzy search the corresponding contents of the database according to the input results, and realize the fuzzy query.

two。 Realize

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

Since the input box and the display results are no longer under the same view, the search results are passed to the page that displays the results when the route is redirected, which is the query used here.

Search function:

SearchResult.vue code

Get the keyWord from the input box in the created function

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

/ / the 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 the data is successfully obtained, the data is stored in the resultList array, and you only need to loop through the array to show the query results to the front end.

The back-end is written by php, which mainly uses the like of sql statement to realize fuzzy query.

Back-end search.php file, change the basic information of database connection to your own.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.