update: 实现图书搜索功能（支持模糊查询）

wj-vue/src/components/library/Books.vue

 <template>
   <div>
-    <div style="margin-bottom: 10px;display: flex;justify-content: center;align-items: center">
-      <el-input
-        placeholder="默认展示部分书籍，可以通过书名搜索更多书籍..."
-        prefix-icon="el-icon-search"
-        size="small"
-        style="width: 400px;margin-right: 10px"
-        v-model="keywords">
-      </el-input>
-      <el-button size="small" type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
-    </div>
+    <search-bar @onSearch="searchResult" ref="searchBar"></search-bar>
     <el-tooltip effect="dark" placement="right" v-for="(item,index) in books" :key="item.id"
                 v-loading="cardLoading[index]">
       <p slot="content" style="font-size: 14px;margin-bottom: 6px;">{{item.title}}</p>
@@ -33,15 +24,16 @@
         <div class="author">{{item.author}}</div>
       </el-card>
     </el-tooltip>
-    <add-or-update-button @onSubmit="loadBooks()" ref="add"></add-or-update-button>
+    <edit-form @onSubmit="loadBooks()" ref="edit"></edit-form>
   </div>
 </template>
 
 <script>
-  import AddOrUpdateButton from './AddOrUpdateButton'
+  import EditForm from './EditForm'
+  import SearchBar from './SearchBar'
   export default {
     name: 'BookCard',
-    components: {AddOrUpdateButton},
+    components: {EditForm, SearchBar},
     mounted: function () {
       this.loadBooks()
     },
@@ -58,6 +50,21 @@
           }
         })
       },
+      searchResult () {
+        var _this = this
+        this.$axios
+          .post('/search', {
+            keywords: this.$refs.searchBar.keywords
+          }).then(resp => {
+          if (resp && resp.status === 200) {
+            _this.books = resp.data
+            var length = resp.data.length
+            _this.cardLoading = Array.apply(null, Array(length)).map(function (item, i) {
+              return false
+            })
+          }
+        })
+      },
       deleteBook (id) {
         this.$confirm('此操作将永久删除该书籍, 是否继续?', '提示', {
           confirmButtonText: '确定',
@@ -80,8 +87,8 @@
         // alert(id)
       },
       editBook (item) {
-        this.$refs.add.dialogFormVisible = true
-        this.$refs.add.form = {
+        this.$refs.edit.dialogFormVisible = true
+        this.$refs.edit.form = {
           id: item.id,
           cover: item.cover,
           title: item.title,
@@ -92,11 +99,10 @@
         }
       }
     },
-    data: function () {
+    data () {
       return {
         books: [],
-        cardLoading: [],
-        keywords: ''
+        cardLoading: []
       }
     }
   }

wj-vue/src/components/library/AddOrUpdateButton.vue → wj-vue/src/components/library/EditForm.vue

 <template>
   <div>
     <i class="el-icon-circle-plus-outline"  @click="dialogFormVisible = true"></i>
-    <el-dialog title="添加图书" :visible.sync="dialogFormVisible">
+    <el-dialog title="添加/修改图书" :visible.sync="dialogFormVisible">
       <el-form :model="form" style="text-align: left">
         <el-form-item label="书名" :label-width="formLabelWidth">
           <el-input v-model="form.title" autocomplete="off" placeholder="不加《》"></el-input>
@@ -38,7 +38,7 @@
 
 <script>
   export default {
-    name: 'AddButton',
+    name: 'EditForm',
     data () {
       return {
         dialogFormVisible: false,

wj-vue/src/components/library/SearchBar.vue

+<template>
+  <div style="margin-bottom: 10px;display: flex;justify-content: center;align-items: center">
+    <el-input
+      @keyup.enter.native="searchClick"
+      placeholder="通过书名或作者搜索..."
+      prefix-icon="el-icon-search"
+      size="small"
+      style="width: 400px;margin-right: 10px"
+      v-model="keywords">
+    </el-input>
+    <el-button size="small" type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
+  </div>
+</template>
+
+<script>
+    export default {
+      name: 'SearchBar',
+      data () {
+        return {
+          keywords: '',
+          books: [],
+          cardLoading: []
+        }
+      },
+      methods: {
+        searchClick () {
+          this.$emit('onSearch')
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>

wj/src/main/java/com/gm/wj/controller/LibraryController.java

 package com.gm.wj.controller;
 
 import com.gm.wj.pojo.Book;
+import com.gm.wj.pojo.Search;
 import com.gm.wj.service.BookService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
 
-import javax.servlet.http.HttpServletRequest;
 import java.util.List;
 
-
 @RestController
 public class LibraryController {
     @Autowired
@@ -33,4 +32,14 @@ public class LibraryController {
         bookService.deleteById(book.getId());
 //        System.out.println(book.getId());
     }
+
+    @CrossOrigin
+    @PostMapping(value = "/api/search")
+    public List<Book> searchResult(@RequestBody Search s) throws Exception {
+        if ("".equals(s.getKeywords())) {
+            return bookService.list();
+        } else {
+            return bookService.Search(s.getKeywords());
+        }
+    }
 }

wj/src/main/java/com/gm/wj/dao/BookDAO.java

@@ -3,6 +3,8 @@ package com.gm.wj.dao;
 import com.gm.wj.pojo.Book;
 import org.springframework.data.jpa.repository.JpaRepository;
 
-public interface BookDAO extends JpaRepository<Book,Integer> {
+import java.util.List;
 
+public interface BookDAO extends JpaRepository<Book,Integer> {
+    List<Book> findAllByTitleLikeOrAuthorLike(String keyword1, String keyword2);
 }

wj/src/main/java/com/gm/wj/pojo/Search.java

+package com.gm.wj.pojo;
+
+public class Search {
+    String keywords;
+
+    public String getKeywords() {
+        return keywords;
+    }
+
+    public void setKeywords(String keywords) {
+        this.keywords = keywords;
+    }
+}

wj/src/main/java/com/gm/wj/service/BookService.java

@@ -25,4 +25,8 @@ public class BookService {
     public void deleteById(int id) {
         bookDAO.deleteById(id);
     }
+
+    public List<Book> Search(String keywords) {
+        return bookDAO.findAllByTitleLikeOrAuthorLike('%' + keywords + '%', '%' + keywords + '%');
+    }
 }