SpringBoot +ElementUI 实现检索功能

效果展示：默认查询

条件过滤查询：

  实现思路：

1、检索文本框绑定自定义实体参数对象:

2、检索按钮绑定自定义的事件方法，自定义方法编写在methods 的属性中searchHandler

 
 查询 

3、axios 发起数据异步请求，相关页面重新渲染完成检索功能。

  searchHandler(){       
        var self = this
        this.$axios.get('/book/find?bookName=' + this.book.bookName)
          .then(function (res) {
            self.tableData = res.data.data
          })
          .catch(function (err) {
            console.log(err)
          }) 
    }

相关代码：

VUE +ElementUI 前端代码：

SpringBoot 后端代码：

package com.zzg.controller;

import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;

import org.apache.commons.lang3.RandomUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.druid.util.StringUtils;
import com.alibaba.fastjson.JSONObject;
import com.zzg.common.model.Result;
import com.zzg.domain.TestBook;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;

@Controller
@RequestMapping("/api/book")
@CrossOrigin
@Api(value = "模拟测试Controlle", tags = "模拟测试操作服务")
public class TestBookController {
	static List container = new ArrayList();
	static {
		container.add(new TestBook("1","java编程思想","**译","机械出版社","1","100","Java 编程核心思想"));
		container.add(new TestBook("2","Python编程思想","**译","机械出版社","2","100","Python 编程核心思想"));
		container.add(new TestBook("3","PHP编程思想","**译","机械出版社","3","100","PHP 编程核心思想"));
		container.add(new TestBook("4","java设计模式","**译","机械出版社","1","100","Java设计模式编程核心思想"));
		container.add(new TestBook("5","算法导论","**译","机械出版社","1","100","算法导论"));
		
	}
	
	@ApiOperation(httpMethod = "POST", value = "模拟测试对象保存")
	@RequestMapping(value = "/insert", method = { RequestMethod.POST}, produces = "application/json;charset=UTF-8")
	@ResponseBody
	public Result insert(
			@RequestBody @ApiParam(name = "模拟测试对象", value = "json格式对象", required = true)JSONObject entity) {
		TestBook user = entity.toJavaObject(TestBook.class);
		if(StringUtils.isEmpty(user.getBookId())) {
			RandomUtils.nextInt(6, 1000);
			Integer sid = RandomUtils.nextInt();
			user.setBookId(String.valueOf(sid));
		}
		
		container.add(user);
		return Result.ok();
	}
	
	@ApiOperation(httpMethod = "POST", value = "模拟测试对象删除")
	@RequestMapping(value = "/delete/{id}", method = { RequestMethod.DELETE })
	@ResponseBody
	public Result delete(
			@PathVariable String id) {

//		container.stream()
//		.filter(u-> u.getId().equalsIgnoreCase(id))
//		.findFirst()
//		.ifPresent(u->System.out.println(u.getName()));
		container.removeIf(u -> u.getBookId().equalsIgnoreCase(id));
		
		return Result.ok();
		
	}
	
	@ApiOperation(httpMethod = "POST", value = "模拟测试对象更新")
	@RequestMapping(value = "/update", method = { RequestMethod.POST }, produces = "application/json;charset=UTF-8")
	@ResponseBody
	public Result update(
			@RequestBody @ApiParam(name = "用户对象", value = "json格式对象", required = true)  TestBook entity) {
		container.removeIf(u -> u.getBookId().equalsIgnoreCase(entity.getBookId()));
		container.add(entity);
		return Result.ok();
	}
	
	@RequestMapping(value="/find", method={RequestMethod.GET}, produces = "application/json;charset=UTF-8")
	@ResponseBody
	@ApiOperation(httpMethod = "GET", value = "模拟测试对象查询")
	public String find(@RequestParam(required = false) String bookName) {
		JSONObject obj = new JSONObject();
		
		obj.put("code", 0);
		if(!StringUtils.isEmpty(bookName)) {
			List filter = container.stream().filter(item ->{
				return item.getBookName().contains(bookName);
			}).collect(Collectors.toList());
			obj.put("data", filter);
		} else {
			obj.put("data", container);
		}
		
		return obj.toJSONString();
	}
}