SpringBoot实现分类搜索（模糊）查询 Pageable分页
2024-06-14 14:43:58
效果图如下：
数据库结构：
Student学生表
stu表
sid学生id
sname 学生姓名
sex性别
cid班级id
address地址
sorts 排序
classes班级表
cid cname
- 1801
- 1802
经过查找又发现了可以在sql语句里写一个case判断
解决了sql的外键判断为0不显示数据的尴尬，这样就可以写Integer
CASE WHEN :cc_id=0 THEN 1 ELSE cc_id=:cc_id END
在下面我放的是全部的代码，包含一些增删改查
底下有第二种方式，是之前写的，不是很友好
附上代码
StuDao
package com.msfh.news.dao;import java.util.List;
import java.util.Map;import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.PagingAndSortingRepository;import com.msfh.news.eneity.Stu;public interface StuDao extends PagingAndSortingRepository<Stu, Integer>, JpaSpecificationExecutor<Stu> {//分页@Query(value = "select * from stu join classes on stu.cc_id = classes.ccid where " +" sname like CONCAT('%',:sname,'%')"+ " and CASE WHEN :cc_id=0 THEN 1 ELSE cc_id=:cc_id END " + " order by stu.sid asc",nativeQuery = true)Page<List<Map>> findPage(Pageable pageable,String sname,Integer cc_id);
}
StuService层
package com.msfh.news.service;import java.util.List;
import java.util.Map;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Service;import com.msfh.news.dao.StuDao;
import com.msfh.news.eneity.Stu;import lombok.val;@Service
public class StuService {@Autowiredprivate StuDao stuDao;/*** 分页* @return*/public Page<List<Map>> findPage(Pageable pageable,String sname,Integer cc_id){return stuDao.findPage(pageable,sname,cc_id);}public void save(Stu stu) {stuDao.save(stu);}public void delete(Stu stu) {stuDao.delete(stu);}
}
StuController
package com.msfh.news.controller;import java.util.List;
import java.util.Map;import javax.servlet.http.HttpServletRequest;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.msfh.news.eneity.Banner;
import com.msfh.news.eneity.Stu;
import com.msfh.news.service.BannerService;
import com.msfh.news.service.StuService;import net.sf.json.JSONArray;
import net.sf.json.JSONObject;@Controller
@RequestMapping("stu")
public class StuController {@Autowiredprivate StuService stuService;@RequestMapping("stu")public String stu() {return "/news/stu";}@RequestMapping("stuAdd")public String stuAdd() {return "/news/stuAdd";}/*** ajax分页* @return*/@RequestMapping("findPage")@ResponseBodypublic Page<List<Map>> findPage(HttpServletRequest request){String sname = request.getParameter("sname");Integer cc_id = Integer.parseInt(request.getParameter("ccid"));Integer NowPage = Integer.parseInt(request.getParameter("NowPage"));Pageable Page = PageRequest.of(NowPage-1, 3);Page<List<Map>> data = stuService.findPage(Page,sname,cc_id);return data;}@RequestMapping("save")@ResponseBodypublic JSONObject save(HttpServletRequest request) {String stuData = request.getParameter("stuData");JSONObject jsonObject = JSONObject.fromObject(stuData);Stu stu = (Stu) jsonObject.toBean(jsonObject,Stu.class);stuService.save(stu);JSONObject data = new JSONObject();data.put("status", "1");data.put("success","添加成功");return data;}@RequestMapping("delete")@ResponseBodypublic String delete(HttpServletRequest request) {Integer sid = Integer.parseInt(request.getParameter("sid"));Stu stu = new Stu();stu.setSid(sid);stuService.delete(stu);return "删除成功";}@RequestMapping("deleteAll")//@ResponseBodypublic String deleteAll(HttpServletRequest request) {String sids = request.getParameter("sids");JSONArray jsonArray = JSONArray.fromObject(sids);for (int i = 0; i < jsonArray.size(); i++) {Stu stu = new Stu();stu.setSid((Integer) jsonArray.get(i));stuService.delete(stu);}return "news/stu";}
}
stu.html
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="renderer" content="webkit"><title></title><link rel="stylesheet" href="/css/pintuer.css"><link rel="stylesheet" href="/css/admin.css"><script src="/js/jquery.js"></script><script src="/js/pintuer.js"></script><script src="/js/vue.min.js"></script><style type="text/css">tr td {text-align: center;width: 200px;}.page-bar{margin:0 auto;margin-top: 50px;overflow: hidden;}ul,li{margin: 0px;padding: 0px;}li{list-style: none}.page-bar li:first-child>a {margin-left: 0px}.page-bar a{border: 1px solid #ddd;text-decoration: none;position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #5D6062;cursor: pointer;margin-right: 20px;}.page-bar a:hover{background-color: #eee;}.page-bar a.banclick{cursor:not-allowed;}.page-bar .active a{color: #fff;cursor: default;background-color: #E96463;border-color: #E96463;}.page-bar i{font-style:normal;color: #d44950;margin: 0px 4px;font-size: 12px;}</style>
</head>
<body>
<div id="app">
<div class="panel admin-panel"><div class="panel-head"><strong class="icon-reorder"> 内容列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div><div class="padding border-bottom"><ul class="search" style="padding-left:10px;"><li> <a class="button border-main icon-plus-square-o" href="/stu/stuAdd"> 添加内容</a> </li><li>搜索：</li><li><select name="fid" class="input" style="width:200px; line-height:17px;" data-validate="required:请选择班级" v-model="ccid" v-on:change="dataListFn(1)"><option value="0">请选择班级</option><option v-for="cla in classes" :value="cla.ccid">{{cla.ccname}}</option></select></li><li><input type="text" placeholder="请输入搜索关键字" v-model="sname" class="input" style="width:250px; line-height:17px;display:inline-block" /><button class="button bg-main icon-check-square-o" type="submit" name="submit" v-on:click="dataListFn(1)"> 提交</button></li></ul></div><table class="table table-hover text-center"><tr><th width="100" style="text-align:left; padding-left:20px;">ID</th><th>学生姓名</th><th>性别</th><th>班级名称</th><th>地址</th><th width="310">操作</th></tr><tr v-for="stu,key in stu"><td style="text-align:left; padding-left:20px;"><input type="checkbox" name="sid" :value="stu.sid" v-model="sids" />排序: <input type="text" style="width: 33px;" v-model="stu.sid" @blur="sort(stu.sid,stu.s_sorts)" /></td><td>{{stu.sname}}</td><td>{{stu.sex}}</td><td>{{stu.ccname}}</td><td>{{stu.address}}</td><td><div class="button-group"> <a class="button border-main"><span class="icon-edit"></span> 修改</a> <a class="button border-red" @click="del(stu.sid,key)"><span class="icon-trash-o"></span> 删除</a> </div></td></tr><tr><td style="text-align:left; padding:19px 0;padding-left:20px;"><input type="checkbox" v-model='checked' v-on:click='checkedAll'> 全选</td><td colspan="7" style="text-align:left;padding-left:20px;"><a class="button border-red icon-trash-o" style="padding:5px 15px;" v-on:click="deleteAll()"> 删除</a> </tr></table><!--分页--><div class="page-bar"><ul><li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li><li v-if="cur==1"><a class="banclick">上一页</a></li><li v-for="index in indexs" v-bind:class="{ 'active': cur == index}"><a v-on:click="btnClick(index)">{{ index }}</a></li><li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li><li v-if="cur == all"><a class="banclick">下一页</a></li><li><a>共<i>{{all}}</i>页</a></li></ul></div></div>
</div>
<script>var vm = new Vue({el:"#app",data:{stu:[],sname:"",checked:"",sids:[],ccid:0,classes:[],all: 10, //总页数cur: 1,//当前页码totalPage: 0,//当前条数},mounted(){this.dataListFn(1);this.showClasses();},//mountedmethods:{//班级查询showClasses:function(){$.post("/classes/findAll",{},function(data){var len = data.length;for(var i=0;i<len;i++){vm.classes.push(data[i]);}//alert(JSON.stringify(vm.classes));});},//全部删除deleteAll:function(){alert(JSON.stringify(vm.sids));$.post("/stu/deleteAll",{sids:JSON.stringify(vm.sids)},function(data){alert(data);});},//删除del:function(sid,key){$.post("/stu/delete",{sid:sid},function(data){vm.stu.splice(key,1);alert(data);});},sort:function(nid,u_id){$.post("/news/sorts",{nid:nid,u_id:u_id},function (data) {alert(data);window.location.href="/in/news";});},checkedAll: function() {var _this = this;//遍历数组列表this.stu.forEach(function(stu, index) {if(_this.sids.indexOf(stu.sid)==-1){//判断某元素是否存在于数组中//默认选中的数组_this.sids.push(stu.sid);}else{//存在则移除var nkey = _this.sids.indexOf(stu.sid);_this.sids.splice(nkey,1);}});},//显示所有数据dataListFn:function (index) {var page = index;alert(this.ccid);$.post("/stu/findPage",{sname:this.sname,NowPage:page,ccid:this.ccid},function (data) {// alert(JSON.stringify(data));vm.stu = [];var len = data.content.length;var dataList=data.content;//获取数据列表for (var i=0;i<len;i++){vm.stu.push(dataList[i]);}// alert(JSON.stringify(vm.stu));vm.all = data.totalPages;//总页数vm.cur = data.number+1;//当前页码vm.totalPage = data.numberOfElements;//当前条数});},//show//分页btnClick: function(data){//页码点击事件if(data != this.cur){this.cur = data}//根据点击页数请求数据this.dataListFn(this.cur.toString());},//btnClickpageClick: function(){//根据点击页数请求数据this.dataListFn(this.cur.toString());},//pageClick},//methodswatch: {'sids': {handler: function(val, oldVal) {if (val.length === this.stu.length) {this.checked = true;} else {this.checked = false;}},deep: true}},computed: {//分页indexs: function(){var left = 1;var right = this.all;var ar = [];if(this.all>= 5){if(this.cur > 3 && this.cur < this.all-2){left = this.cur - 2right = this.cur + 2}else{if(this.cur<=3){left = 1right = 5}else{right = this.allleft = this.all -4}}}while (left <= right){ar.push(left)left ++}return ar}},});
</script></body>
</html>我们这个是vue配合springboot 实现分页效果和分类搜索的操作
这里我们dao层需要重写继承的方法，同时也需要重写sql语句的query需要完全执行sql语句
我们在dao层写的是String cid可是我们的cid是外键应该是Integer的，但是因为我们执行了Integer的条件它就是一个sql语句了
所以我在html给赋的初值为null，然后我再controller接受的为String型
StuDao
package com.msfh.news.dao;import java.util.List;
import java.util.Map;import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.PagingAndSortingRepository;import com.msfh.news.eneity.Stu;public interface StuDao extends PagingAndSortingRepository<Stu, Integer>, JpaSpecificationExecutor<Stu> {//分页@Query(value = "select * from stu join classes on stu.cc_id = classes.ccid where" +" sname like CONCAT('%',:sname,'%')"+ " and cc_id like CONCAT('%',:cc_id,'%') order by stu.sid asc",nativeQuery = true)Page<List<Map>> findPage(Pageable pageable,String sname,String cc_id);
}
StuService层
package com.msfh.news.service;import java.util.List;
import java.util.Map;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Service;import com.msfh.news.dao.StuDao;
import com.msfh.news.eneity.Stu;import lombok.val;@Service
public class StuService {@Autowiredprivate StuDao stuDao;/*** 分页* @return*/public Page<List<Map>> findPage(Pageable pageable,String sname,String cc_id){return stuDao.findPage(pageable,sname,cc_id);}}
StuController
package com.msfh.news.controller;import java.util.List;
import java.util.Map;import javax.servlet.http.HttpServletRequest;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.msfh.news.eneity.Banner;
import com.msfh.news.eneity.Stu;
import com.msfh.news.service.BannerService;
import com.msfh.news.service.StuService;import net.sf.json.JSONArray;
import net.sf.json.JSONObject;@Controller
@RequestMapping("stu")
public class StuController {@Autowiredprivate StuService stuService;@RequestMapping("stu")public String stu() {return "/news/stu";}@RequestMapping("stuAdd")public String stuAdd() {return "/news/stuAdd";}/*** ajax分页* @return*/@RequestMapping("findPage")@ResponseBodypublic Page<List<Map>> findPage(HttpServletRequest request){String sname = request.getParameter("sname");String cc_id = request.getParameter("ccid");Integer NowPage = Integer.parseInt(request.getParameter("NowPage"));Pageable Page = PageRequest.of(NowPage-1, 3);Page<List<Map>> data = stuService.findPage(Page,sname,cc_id);return data;}@RequestMapping("save")@ResponseBodypublic JSONObject save(HttpServletRequest request) {String stuData = request.getParameter("stuData");JSONObject jsonObject = JSONObject.fromObject(stuData);Stu stu = (Stu) jsonObject.toBean(jsonObject,Stu.class);stuService.save(stu);JSONObject data = new JSONObject();data.put("status", "1");data.put("success","添加成功");return data;}
}
stu.html
这里我们写的分类查询我们是需要查出外键相匹配的值的表的数据
就如同效果图一样
我们需要通过ajax查出来然后进行一个循环，我再下面的班级查询有写的ajax部分，在HTML上面也有循环的部分，所有我就不附上classes的代码和图部分了
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="renderer" content="webkit"><title></title><link rel="stylesheet" href="/css/pintuer.css"><link rel="stylesheet" href="/css/admin.css"><script src="/js/jquery.js"></script><script src="/js/pintuer.js"></script><script src="/js/vue.min.js"></script><style type="text/css">tr td {text-align: center;width: 200px;}.page-bar{margin:0 auto;margin-top: 50px;overflow: hidden;}ul,li{margin: 0px;padding: 0px;}li{list-style: none}.page-bar li:first-child>a {margin-left: 0px}.page-bar a{border: 1px solid #ddd;text-decoration: none;position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #5D6062;cursor: pointer;margin-right: 20px;}.page-bar a:hover{background-color: #eee;}.page-bar a.banclick{cursor:not-allowed;}.page-bar .active a{color: #fff;cursor: default;background-color: #E96463;border-color: #E96463;}.page-bar i{font-style:normal;color: #d44950;margin: 0px 4px;font-size: 12px;}</style>
</head>
<body>
<div id="app">
<div class="panel admin-panel"><div class="panel-head"><strong class="icon-reorder"> 内容列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div><div class="padding border-bottom"><ul class="search" style="padding-left:10px;"><li> <a class="button border-main icon-plus-square-o" href="/stu/stuAdd"> 添加内容</a> </li><li>搜索：</li><li><select name="fid" class="input" style="width:200px; line-height:17px;" data-validate="required:请选择班级" v-model="ccid" v-on:change="dataListFn(1)"><option value="">请选择班级</option><option v-for="cla in classes" :value="cla.ccid">{{cla.ccname}}</option></select></li><li><input type="text" placeholder="请输入搜索关键字" v-model="sname" class="input" style="width:250px; line-height:17px;display:inline-block" /><button class="button bg-main icon-check-square-o" type="submit" name="submit" v-on:click="dataListFn(1)"> 提交</button></li></ul></div><table class="table table-hover text-center"><tr><th width="100" style="text-align:left; padding-left:20px;">ID</th><th>学生姓名</th><th>性别</th><th>班级名称</th><th>地址</th><th width="310">操作</th></tr><tr v-for="stu,key in stu"><td style="text-align:left; padding-left:20px;"><input type="checkbox" name="sid" :value="stu.sid" v-model="sids" />排序: <input type="text" style="width: 33px;" v-model="stu.sid" @blur="sort(stu.sid,stu.s_sorts)" /></td><td>{{stu.sname}}</td><td>{{stu.sex}}</td><td>{{stu.ccname}}</td><td>{{stu.address}}</td><td><div class="button-group"> <a class="button border-main"><span class="icon-edit"></span> 修改</a> <a class="button border-red" @click="del(stu.sid,key)"><span class="icon-trash-o"></span> 删除</a> </div></td></tr><tr><td style="text-align:left; padding:19px 0;padding-left:20px;"><input type="checkbox" v-model='checked' v-on:click='checkedAll'> 全选</td><td colspan="7" style="text-align:left;padding-left:20px;"><a class="button border-red icon-trash-o" style="padding:5px 15px;" v-on:click="deleteAll()"> 删除</a> </tr></table><!--分页--><div class="page-bar"><ul><li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li><li v-if="cur==1"><a class="banclick">上一页</a></li><li v-for="index in indexs" v-bind:class="{ 'active': cur == index}"><a v-on:click="btnClick(index)">{{ index }}</a></li><li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li><li v-if="cur == all"><a class="banclick">下一页</a></li><li><a>共<i>{{all}}</i>页</a></li></ul></div></div>
</div>
<script>var vm = new Vue({el:"#app",data:{stu:[],sname:"",checked:"",sids:[],ccid:null,classes:[],all: 10, //总页数cur: 1,//当前页码totalPage: 0,//当前条数},mounted(){this.dataListFn(1);this.showClasses();},//mountedmethods:{//班级查询showClasses:function(){$.post("/classes/findAll",{},function(data){var len = data.length;for(var i=0;i<len;i++){vm.classes.push(data[i]);}//alert(JSON.stringify(vm.classes));});},//显示所有数据dataListFn:function (index) {var page = index;alert(this.ccid);$.post("/stu/findPage",{sname:this.sname,NowPage:page,ccid:this.ccid},function (data) {// alert(JSON.stringify(data));vm.stu = [];var len = data.content.length;var dataList=data.content;//获取数据列表for (var i=0;i<len;i++){vm.stu.push(dataList[i]);}// alert(JSON.stringify(vm.stu));vm.all = data.totalPages;//总页数vm.cur = data.number+1;//当前页码vm.totalPage = data.numberOfElements;//当前条数});},//show//分页btnClick: function(data){//页码点击事件if(data != this.cur){this.cur = data}//根据点击页数请求数据this.dataListFn(this.cur.toString());},//btnClickpageClick: function(){//根据点击页数请求数据this.dataListFn(this.cur.toString());},//pageClick},//methodscomputed: {//分页indexs: function(){var left = 1;var right = this.all;var ar = [];if(this.all>= 5){if(this.cur > 3 && this.cur < this.all-2){left = this.cur - 2right = this.cur + 2}else{if(this.cur<=3){left = 1right = 5}else{right = this.allleft = this.all -4}}}while (left <= right){ar.push(left)left ++}return ar}},});
</script></body>
</html>SpringBoot实现分类搜索（模糊）查询 Pageable分页相关推荐
- ThinkPHP5_模糊查询和分页
官方手册分页:https://www.kancloud.cn/manual/thinkphp5/154294 controller控制器: /*** 显示资源列表** @return \think\R ...
- SpringBoot整合thymeleaf之模糊查询操作模块
SpringBoot整合thymeleaf之模糊查询操作模块 引言 1.一般情况下,Mybatis的模糊查询操作 模糊查询操作 2.在实战中的模糊查询操作 web页面提交数据 <form act ...
- 40.MyBaits懒加载、一二级缓存、模糊查询、分页查询、动态SQL
MyBaits_Day04 第一节.作业 <!-- 对getAllCateAndGoods做实现--><select id="getAllCateAndGoods" ...
- jpa基于ExampleMatcher，Example实现动态筛选，模糊查询，分页，排序，时间范围筛选
简介: 素材来源于网络,加入个人理解进行组装,减少后台代码量(偷懒),在代码配置化得路上远行 满足条件: 基础条件赛选(模糊查询) 范围筛选(此文针对于时间,其他类似) 基础分页排序等 优点:代码一次 ...
- uniapp 列表搜索模糊查询
<!-- 第一次进入,选择变电站 --> <template><view> <!-- 正文 --><view class="conten ...
- Javaweb15==mysql+mybatis+servlet+axios+fasetjson+vue+elementUI前后端分离，实现列表后端分页、模糊查询后分页、新增、单一/批量删除、修改
难点:模糊查询后再次分页,并可以选择页数. 最终环境配置: maven3.8:依赖包管理 IDEA2021+JDK8+mysql connector java5+Mysql5+mybatis3.5:从 ...
- Jsp新闻项目（规范访问分页之模糊查询主题分页查询[客户页面]）
目录 一.规范访问 二.模糊查询分页 1.代码分析 上一章我们有讲到将伪表查询代替之前的模糊查询来进行分页,今天我们要在伪表查询的基础上加上模糊查询,也就是说在模糊查询时也可以分页了 三.主题分页查询 ...
- 动态sql模糊查询和分页
文章目录 动态sql 模糊查询 查询返回结果集的处理 分页 动态sql BookMapper xml bookservice 测试: MapperSql.test 运行: 模糊查询 BookMappe ...
- SpringBoot + Mybatis实现关键字模糊查询
先写一个REST端点--Controller Class: controller/TestController.class package controller;@GetMapping("/ ...
最新文章
- 【Kubernetes】两篇文章 搞懂 K8s 的 fannel 网络原理
- codeforces水题100道 第五题 Codeforces Round #304 (Div. 2) A. Soldier and Bananas (math)
- matlab中tic,toc的用法
- linux节点ssh免密码登录linux节点
- html img图片等比例缩放_我掏空了各大搜索引擎，整理了HTML图片标签笔记，满满干货...
- 多租户系统技术优越性及架构选型---springCloud工作笔记167
- 廖大python实战教程第七天
- 运维工程师的生存法则
- 汇添富基金总经理张晖：做选股专家，更以“选股专家”的视角管理公司
- 在Ubuntu上安装D-link DWA-131驱动
- WebStorm之如何清除缓存
- 查找Excel最后一个非空单元格的值，你会吗？（适用于数据加行时，一直引用最后一个非空单元格的值）
- 机器学习 (六): Sigmoid 公式推导和理解
- android开发——RecycleView
- 不论微信钉钉还是什么软件，我写了个通用的消息监控处理机器人
- matlab 画海面图,教你画波光粼粼的海面
- 不能装载文档控件。请在检查浏览器的选项中检查浏览器的安全设置_网络安全科普 | 如何正确设置浏览器！...
- SyntaxError ：invalid syntax错误解决办法
- win10查看笔记本电脑电池健康度
- java 视频转码 视频压缩