版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
先看下效果图
先讲解下思路:首先是在DAO层写根据姓名和班级进行模糊查询的方法,(sql:select * from cla c join stu s on s.cid = c.cid where s.name like ? and cname like ?)sql 语句语法可能不太对,但是大题意思是对的。根据两个条件进行查询,所以要用and。写完后端,前端的就是要注意vue的传参了,要把数据全部传过去才可以。
DAO层代码
这个还是用的上次写分页时使用的代码,只是多加了两个参数,在sql语句中添加了模糊查询部分
**name前要写 : **
//分页模糊查询
@Query(value="select * from work w join cla c on w.cla = c.cid where name LIKE CONCAT('%',:name,'%') and cname like concat('%',:cname,'%')",nativeQuery = true)
Page<List<Map>> findAllLike(Pageable page,String name,String cname);
Service层
//分页模糊查询
public Page<List<Map>> findLike(Pageable page,String name,String cname){
return workDAO.findAllLike(page, name,cname);
}
Controller层
记得写@responseBody注解,返回的就是查询到的数据。
在这里呢还是要强调以下分页导的包
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
@RequestMapping("VuePage")
@ResponseBody
public Page<List<Map>> VuePage(HttpServletRequest req){
//分页;接收当前页是第几页
Integer NowPage = Integer.parseInt(req.getParameter("page"));
//接收姓名和班级数据
String name = req.getParameter("name");
String cname = req.getParameter("cname");
//分页操作
Sort sort = null;
sort = new Sort(Sort.Direction.DESC,"id");
Pageable Page = PageRequest.of(NowPage-1, 4, sort);//NowPage就是下面要说的操作,练习可以不加-1
Page<List<Map>> data = workService.findLike(Page, name,cname);
return data;
}
前方高能!!!
因为我是学java的嘛,所以说后端对我来说难度小点,难点主要是前端的代码
前端页面代码
分业的详细前端代码就不写了,这次主要讲搜索。
html代码
<div id="app">
信息搜索: <input v-model="name" type="text" placeholder="姓名搜索" v-on:keyup="dataListFn(1)">
<input v-model="cname" type="text" placeholder="班级搜索" v-on:keyup="dataListFn(1)">
</div>
dataListFn(1)是我分页的方法,参数是默认显示的页码(默认是0,为了美观,改了默认,这里有操作)
js代码
这里可能会有括号对着不合适的问题,大家复制的话注意下
var vm = new Vue({
el: '#app',
mounted(){
this.dataListFn(1);
},
methods:{
dataListFn:function(index){
var page = index;
//alert(page);
//alert(this.name);
$.post("/work/VuePage",{page:page,name:this.name,cname:this.cname},function(data){
//alert(12);
vm.sites=[];
//var datalist=data.contene;
//alert(JSON.stringify(data.content));//接收数据成功
var len = data.content.length;
for(var i=0;i<len;i++){
vm.sites.push(data.content[i]);
}
vm.all = data.totalPages;
vm.cur = data.number+1;
vm.totalPage = data.numberOfElements;
});
},
});