vue前端实现模糊查询,vue实现模糊搜索
本文主要介绍了基于Vue的Mysql数据库数据模糊查询的实现。在下面的文章中，我们主要实现在输入框中输入数据，根据输入结果搜索数据库的相应内容，实现模糊查询。感兴趣的朋友可以进入文章，一起学习。
:
目录
1.要求2。实现3。结果
1.需求
在输入框中输入数据，根据输入结果模糊搜索数据库的相应内容，实现模糊查询。
2.实现
使用输入框v-model双向绑定查询数据关键字。
El-input v-model= keyword placeholder=请输入关键字搜索 clear/el-input
El-button type= success icon= El-icon-search @ click= search /El-button
因为输入框和显示结果不再在同一个视图中，所以当路由跳转时，搜索结果被传递到显示结果的页面。此处使用查询。
search函数：
搜索结果. vue代码
从创建的函数的输入框中获取关键字。
getData(offset，limit)函数使用axios根据关键字从后端查询数据，其中offset和limit是分页查询的参数。
//请求数据库数据的方法
getData(偏移，限制){
this . axios . post(/PHP/search . PHP ，qs.stringify({
偏移：偏移，
极限：极限，
关键字：this.keyWord
})、{ headers:{ Content-Type : application/x-www-form-urlencoded } })。然后((res)={
this . total=RES . datatotal
this.resultList=res.data.data
}).catch((err)={
这个。$message.error(错误)
})
成功获取数据后，数据将被存储在resultList数组中，只需循环访问该数组即可将查询结果显示到前端。
后端用php编写，主要利用sql语句之类的实现模糊查询。
后端search.php文件，把数据库连接的基本信息改成自己的。
？服务器端编程语言（Professional Hypertext Preprocessor的缩写）
$servername=主机地址；
$ username= account
$ password= password
$dbname=数据库名称；
//创建连接
$conn=new mysqli($servername，$username，$password，$ dbname)；
//检查连接
if(conn-connect _ error){
Die(连接失败：。$ conn-connect _ error)；
}
$ keyWord=$ _ POST[ keyWord ]；
//获取前端参数的起始和结束编号
如果(！isset($ _ POST[ offset ]){
回声0；
exit()；
};
$ offset=(int)$ _ POST[ offset ]；
如果(！isset($ _ POST[ limit ]){
回声0；
exit()；
};
$ limit=(int)$ _ POST[ limit ]；
//分页查询数据库
$ SQL= SELECT * FROM title like % $ keyWord % order by id desc LIMIT $ LIMIT OFFSET $ OFFSET ；
$ result=$ conn-query($ SQL)；
$ sqlGetCount= SELECT COUNT(*)CNT来自标题为“%$keyWord%”的帖子；
$ RES CNT=$ conn-query($ SQL getcount)；
$ RES CNT=$ RES CNT-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)$ RES CNT[ CNT ]))；
}否则{
回声0；
}
mysqli _ close($ conn)；
？
注意sql语句：
SELECT * FROM标题为“%$keyWord%”的帖子按id排序desc LIMIT $ LIMIT OFFSET $ OFFSET；
您应该使用“% $ keyword%”在like之后传递参数，而不是使用%“$ keyWord %”。就像踩坑一样。
然后根据输入的数据模糊查询标题，即数据段标题，可以更改查询其他内容。
3.结果
关于基于Vue的Mysql数据库数据模糊查询的这篇文章到此结束。关于基于Vue的Mysql数据库数据模糊查询的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。