耀极客论坛

 找回密码
 立即注册
查看: 679|回复: 0

Vue实现模糊查询-Mysql数据库数据

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 02:19:36 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了基于Vue实现Mysql数据库数据模糊查询,下面文章我们主要实现的是输入框中输入数据,根据输入的结果模糊搜索数据库对应内容,实现模糊查询,感兴趣的小伙伴可以进入文章我们一起学习

1.需求
  输入框中输入数据,根据输入的结果模糊搜索数据库对应内容,实现模糊查询。

2.实现
  输入框使用v-model双向绑定查询数据keyWord。
  1. ‹el-input v-model="keyWord" placeholder="请输入关键字搜索" clearable>‹/el-input>
  2.         ‹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是分页查询的参数。
  1. //请求数据库数据的方法
  2.     getData(offset,limit){
  3.       this.axios.post('/php/search.php', qs.stringify({
  4.         offset: offset,
  5.         limit: limit,
  6.         keyWord: this.keyWord
  7.       }), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((res) => {
  8.         this.total = res.data.total
  9.         this.resultList = res.data.data
  10.       }).catch((err) => {
  11.         this.$message.error(err)
  12.       })
复制代码
  获取数据成功后就会将数据存入resultList数组中,只需循环遍历该数组就可以向前端展示查询结果了。
  后端使用的是php写的,主要利用了sql语句的like来实现模糊查询。
后端search.php文件,将数据库连接基本信息改为自己的。
  1. ‹?php
  2. $servername = "主机地址";
  3. $username = "账户";
  4. $password = "密码";
  5. $dbname = "数据库名称";
  6. // 创建连接
  7. $conn = new mysqli($servername, $username, $password, $dbname);
  8. // Check connection
  9. if ($conn->connect_error) {
  10.     die("连接失败: " . $conn->connect_error);
  11. }
  12. $keyWord = $_POST['keyWord'];
  13. //获取前端的参数 开始和结束number
  14. if ( !isset( $_POST['offset'] ) ) {
  15. echo 0;
  16. exit();
  17. };
  18. $offset = ( int )$_POST['offset'];
  19. if ( !isset( $_POST['limit'] ) ) {
  20. echo 0;
  21. exit();
  22. };
  23. $limit = ( int )$_POST['limit'];
  24. //分页查询数据库
  25. $sql = "SELECT * FROM posts where title like '%$keyWord%' order by id desc LIMIT $limit OFFSET $offset";
  26. $result = $conn->query($sql);
  27. $sqlGetCount = "SELECT COUNT(*) cnt FROM posts where title like '%$keyWord%'";
  28. $rescnt = $conn->query($sqlGetCount);
  29. $rescnt = $rescnt->fetch_assoc();
  30. $arr = array();
  31. if ($result->num_rows > 0) {
  32. while ( $row = $result->fetch_assoc() ) {
  33.     array_push( $arr, $row );
  34. }
  35. //echo json_encode( $arr, JSON_UNESCAPED_UNICODE );
  36. echo json_encode(array_merge(array('data'=>$arr),array('total'=>(int)$rescnt['cnt'])));
  37. } else {
  38.     echo 0;
  39. }
  40. mysqli_close( $conn );
  41. ?>
复制代码
  注意sql语句:
  1. SELECT * FROM posts where title like '%$keyWord%' order by id desc LIMIT $limit OFFSET $offset;
复制代码
  like后面应该使用 ’%$keyWord%‘传递参数,而不是 %’ $keyWord’%,算踩了一个坑吧。
然后这是根据输入的数据模糊查询标题,也就是数据段title的,可以改为查询其他的内容。

3.结果

  到此这篇关于基于Vue实现Mysql数据库数据模糊查询的文章就介绍到这了,更多相关Vue实现Mysql数据库数据模糊查询内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 20:39 , Processed in 0.068282 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表