(一)前端
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