脚本宝典收集整理的这篇文章主要介绍了Vue实现模糊查询-Mysql数据库数据,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
输入框中输入数据,根据输入的结果模糊搜索数据库对应内容,实现模糊查询。
输入框使用v-model
双向绑定查询数据keyWord
。
<el-input v-model="keyWord" placeholder="请输入关键字搜索" clearable></el-input> <el-button tyPE="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.total this.resultList = res.data.data }).catch((err) => { this.$message.error(err) })
获取数据成功后就会将数据存入resultList
数组中,只需循环遍历该数组就可以向前端展示查询结果了。
后端使用的是php
写的,主要利用了SQL
语句的like
来实现模糊查询。
后端search.php
文件,将数据库连接基本信息改为自己的。
<?php $servername = "主机地址"; $username = "账户"; $password = "密码"; $dbname = "数据库名称"; // 创建连接 $conn = new MySQLi($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } $keyWord = $_POST['keyWord']; //获取前端的参数 开始和结束number if ( !isset( $_POST['offset'] ) ) { echo 0; exit(); }; $offset = ( int )$_POST['offset']; if ( !isset( $_POST['limit'] ) ) { echo 0; exit(); }; $limit = ( int )$_POST['limit']; //分页查询数据库 $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 ); ?>
注意sql语句:
SELECT * FROM posts where title like '%$keyWord%' order by id desc LIMIT $limit OFFSET $offset;
like
后面应该使用 ’%$keyWord%‘
传递参数,而不是 %’ $keyWord’%
,算踩了一个坑吧。
然后这是根据输入的数据模糊查询标题,也就是数据段title的,可以改为查询其他的内容。
到此这篇关于基于Vue实现Mysql数据库数据模糊查询的文章就介绍到这了,更多相关Vue实现Mysql数据库数据模糊查询内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的Vue实现模糊查询-Mysql数据库数据全部内容,希望文章能够帮你解决Vue实现模糊查询-Mysql数据库数据所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。