前言
这篇博客主要讲述网上书城的搜索页——根据书名搜索,根据分类搜索,以及将商品加入购物车的功能。
搜索页
效果图(根据书名关键字搜索):
(我是搜索了一个1 ,由于我没有做赋值效果,图上看不到我搜索的关键字)
实现思路以及对应代码:
1、在搜索栏输入关键字;
2、传递关键字到后台;
//给搜索按钮增加跳转路径的点击事件
<button type="button" onclick="search()" class="btn btn-primary">搜索</button>
<script type="text/javascript">
function search(){
location.href="${pageContext.request.contextPath }/book.action?methodName=search&name="+$("#book_name").val();
}
</script>
3、在后台action中调用dao层进行查询需要的数据;
public String search(HttpServletRequest req,HttpServletResponse resp) throws Exception {
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
List<Book> list = this.bookDao.list(book, pageBean);
req.setAttribute("books", list);
req.setAttribute("pageBean", pageBean);
return "search";
}
4、返回到前台使用自定义标签进行展示;
<c:forEach items="${books }" var="b">
<div class="media">
<img src="${b.image }" class="align-self-center mr-3" alt="...">