SpringBoot +ElementUI 实现检索功能

效果展示：默认查询

条件过滤查询：

  实现思路：

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

 <el-input v-model="book.bookName"  placeholder="书籍关键字"></el-input>

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

 <!--自定义searchHandler函数-->
 <el-button type="primary" @click="searchHandler">查询</el-button> 

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 前端代码：

 <style>
  h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
<template>
  <div id="bookSearch">
      <el-col :span="19">
          <el-form :inline="true">
            <el-form-item label="书名">
              <el-input v-model="book.bookName"  placeholder="书籍关键字"></el-input>
            </el-form-item>
          <el-form-item >
            <div style="text-align:right">
              <!--自定义searchHandler函数-->
              <el-button type="primary" @click="searchHandler">查询</el-button> 
            </div>
          </el-form-item>
        </el-form>
      </el-col>

      <el-table :data="tableData" stripe border style="width:100%" highlight-current-row>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="bookId" label="ID" align="center" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.bookId}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="bookName" label="书名" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.bookName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="bookAuthor" label="作者" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.bookAuthor}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="bookpublish" label="出版社" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.bookpublish}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
   data () {
     return {
        tableData: [],
        book: {
          bookName: ''
        }
      }
  },
  methods:{
    init () {
        var self = this
        this.$axios.get('/book/find')
          .then(function (res) {
            self.tableData = res.data.data
          })
          .catch(function (err) {
            console.log(err)
          })
      },
    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)
          }) 
    }
  },
  mounted: function () {
      this.init()
  }
}
</script>

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<TestBook> container = new ArrayList<TestBook>();
	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<TestBook> 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();
	}
}