Vue与SpringBoot（三）实现模糊检索

（一）前端

1、vue代码：

<el-row :gutter="20">
  <el-col :span="3"></el-col>
  <el-col :span="16" :offset="5">
 <el-input v-model="keywords" autocomplete="off" size="small" style="width: 350px;margin-right: 10px" placeholder="通过标题、作者、出版社或者简介搜索..."></el-input>
    <el-button size="small" type="primary" icon="el-icon-search" @click="searchBooksByKeyWord()">搜索</el-button></el-col>
</el-row>

2、js中的处理

data () {
    return {
      keywords:''
      },

3、method中的处理

searchBooksByKeyWord() {
      var _this = this
      this.$axios
        .post('/search', {
          keywords: this.keywords
        }).then(resp => {
          if (resp && resp.status === 200) {
            _this.books = resp.data
          }
        })
    },

（二）后端

1、Controller

 @PostMapping("/api/search")
    public List<Book> searchResult(@RequestBody Book s) throws Exception {
    	Book book = new Book();
    	System.out.println("查询到的关键词是："+s.getKeywords());
        if ("".equals(s.getKeywords())) {
            return bookService.getBookList(book);
        } else {
        	book.setAuthor(s.getKeywords());
        	book.setTitle(s.getKeywords());
        	
        	List<Book> bookList = bookService.getBookByTitleLikeOrAuthorLike(book);
        	System.out.println("bookList.size():"+bookList.size());
            return bookService.getBookByTitleLikeOrAuthorLike(book);
        }
    }

2、mybatis中的处理

<select id="getBookByTitleLikeOrAuthorLike" parameterType="Book" resultType="Book">
   SELECT
	    A.id as id,
	    A.cover as cover,
	    A.title as title,
	    A.author as author,
	    A.date as date,
	    A.press as press,
	    A.abs as abs,
	    A.cid as cid,
	    (select name from category where id = A.cid) as cname
  FROM
    book A
  WHERE 1=1
     <if test="title != null and '' != title">  
        <bind name="pattern_title" value="'%'+title+'%'"/>
            <![CDATA[  
              AND (A.title like #{pattern_title}  OR A.author like #{pattern_title} OR A.abs like #{pattern_title} OR A.press like #{pattern_title})
            ]]>  
     </if>
     order by A.id desc    
  </select>

主要需要注意的是mapper中的<if> <bind> 和CDATA