Vue怎么实现Mysql数据库数据的模糊查询
Vue怎么实现Mysql数据库数据的模糊查询
这篇文章主要介绍Vue怎么实现Mysql数据库数据的模糊查询,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
1.需求
输入框中输入数据,根据输入的结果模糊搜索数据库对应内容,实现模糊查询。
2.实现
输入框使用v-model
双向绑定查询数据keyWord
。
<el-inputv-model="keyWord"placeholder="请输入关键字搜索"clearable></el-input><el-buttontype="success"icon="el-icon-search"@click="search"></el-button>
由于输入框和显示结果的不再同一view
下,所以在路由跳转时将搜索结果传递给显示结果的页面,这里用的query
。
search函数:
SearchResult.vue
代码
在created
函数中获取输入框传来的keyWord
getData(offset,limit)
函数使用axios
向后端根据keyWord
查询数据,其中offset
和limit
是分页查询的参数。
//请求数据库数据的方法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.totalthis.resultList=res.data.data}).catch((err)=>{this.$message.error(err)})
获取数据成功后就会将数据存入resultList
数组中,只需循环遍历该数组就可以向前端展示查询结果了。
后端使用的是php
写的,主要利用了sql
语句的like
来实现模糊查询。
后端search.php
文件,将数据库连接基本信息改为自己的。
<?php$servername="主机地址";$username="账户";$password="密码";$dbname="数据库名称";//创建连接$conn=newmysqli($servername,$username,$password,$dbname);//Checkconnectionif($conn->connect_error){die("连接失败:".$conn->connect_error);}$keyWord=$_POST['keyWord'];//获取前端的参数开始和结束numberif(!isset($_POST['offset'])){echo0;exit();};$offset=(int)$_POST['offset'];if(!isset($_POST['limit'])){echo0;exit();};$limit=(int)$_POST['limit'];//分页查询数据库$sql="SELECT*FROMpostswheretitlelike'%$keyWord%'orderbyiddescLIMIT$limitOFFSET$offset";$result=$conn->query($sql);$sqlGetCount="SELECTCOUNT(*)cntFROMpostswheretitlelike'%$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);}//echojson_encode($arr,JSON_UNESCAPED_UNICODE);echojson_encode(array_merge(array('data'=>$arr),array('total'=>(int)$rescnt['cnt'])));}else{echo0;}mysqli_close($conn);?>
注意sql语句:
SELECT*FROMpostswheretitlelike'%$keyWord%'orderbyiddescLIMIT$limitOFFSET$offset;
like
后面应该使用 '%$keyWord%‘
传递参数,而不是 %' $keyWord'%
,算踩了一个坑吧。
然后这是根据输入的数据模糊查询标题,也就是数据段title的,可以改为查询其他的内容。
3.结果
以上是“Vue怎么实现Mysql数据库数据的模糊查询”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注恰卡编程网行业资讯频道!
推荐阅读
-
navicat(for mysql 过期如何解决 Navicat for MySQL如何使用)
NavicatforMySQL如何使用?1.下载NavicatforMySQL软件后。2.在文件里找到navicat.Na...
-
vue表格组件教程学习(vue proxytable只能在开发环境跨域吗)
vueproxytable只能在开发环境跨域吗?跨域问题来源于JavaScript的同源策略,即只有协议主机名端口号(如...
-
pycharm(mysql 安装教程 学python这条路怎么走)
学python这条路怎么走?如何学习Python?这是很多新手都会问的问题。这时候问问自己,学Python到底想干什么?为了兴趣?...
-
Vue组件的自定义事件和全局事件总线怎么使用
-
vue中消息订阅与发布如何使用
vue中消息订阅与发布如何使用这篇文章主要介绍“vue中消息订阅与...
-
MySQL索引怎么创建和删除
MySQL索引怎么创建和删除这篇文章主要介绍了MySQL索引怎么创...
-
MySQL查看锁的代码怎么写
MySQL查看锁的代码怎么写本文小编为大家详细介绍“MySQL查看...
-
Vue显示图片的方式有哪些
-
vue引入静态jquery报错如何解决
vue引入静态jquery报错如何解决这篇文章主要介绍“vue引入...
-
在 PHP 7 中不要做的 10 件事
1.不要使用MySQL_函数这一天终于来了,从此你不仅仅“不应该”使用mysql_函数。PHP7已经把它们从核心...