在分页表连接中实现搜索（即模糊查询）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/ZF2015908732/article/details/102690029

先看下效果图

先讲解下思路：首先是在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">
信息搜索：&nbsp;&nbsp;<input v-model="name" type="text" placeholder="姓名搜索" v-on:keyup="dataListFn(1)">
							  &nbsp;&nbsp;<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;	
				});	
			},
		});