Vue实现模糊查询-Mysql数据库数据
1.需求
输入框中输入数据,根据输入的结果模糊搜索数据库对应内容,实现模糊查询。
2.实现
输入框使用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的,可以改为查询其他的内容。
3.结果
到此这篇关于基于Vue实现Mysql数据库数据模糊查询的文章就介绍到这了,更多相关Vue实现Mysql数据库数据模糊查询内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue3中SetUp函数的参数props、context详解
我们知道setup函数是组合API的核心入口函数,下面这篇文章主要给大家介绍了关于Vue3中SetUp函数的参数props、context的相关资料,需要的朋友可以参考下2021-07-07在Vue中使用deep深度选择器修改element UI组件的样式
这篇文章主要介绍了在Vue中使用deep深度选择器修改element UI组件的样式,本文分为两种方法给大家介绍,在这小编比较推荐使用第二种使用 deep 深度选择器,感兴趣的朋友跟随小编一起看看吧2022-12-12
最新评论