一.绑定分类
1.1 效果预览
1.2 代码实现
①底层代码
/** * 查询类别全部 */ public List<Type> getAll() { List<Type> ls = new ArrayList<Type>(); try { con=DBHelper.getCon(); String sql="select * from tb_type"; ps=con.prepareStatement(sql); rs=ps.executeQuery(); while(rs.next()) { Type t = new Type(rs.getInt(1),rs.getString(2)); ls.add(t); } } catch (Exception e) { e.printStackTrace(); }finally { DBHelper.myClose(con, ps, rs); } return ls; }
//调用业务逻辑层 ITypeBiz itb = new TypeBiz(); //设置编码 req.setCharacterEncoding("utf-8"); //调用查询全部商品的集合方法 List<Goods> goodsls = igb.getAll(tid,str); //存起来 仅转发有效 req.setAttribute("typels", typels); //转发到type.jsp进行绑值展示数据 req.getRequestDispatcher("type.jsp").forward(req, resp);
②前端代码
<div class="col-3"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active"> 所有商品</a> <c:forEach items="${typels}" var="t"> <a href="#" class="list-group-item list-group-item-action>${t.tname}</a> </c:forEach> </div> </div>
二.绑定所有商品
2.1 效果预览
2.2.代码实现
①底层代码
/** * 查询类别全部 */ public List<Type> getAll() { List<Type> ls = new ArrayList<Type>(); try { con=DBHelper.getCon(); String sql="select * from tb_type"; ps=con.prepareStatement(sql); rs=ps.executeQuery(); while(rs.next()) { Type t = new Type(rs.getInt(1),rs.getString(2)); ls.add(t); } } catch (Exception e) { e.printStackTrace(); }finally { DBHelper.myClose(con, ps, rs); } return ls; }
//调用业务逻辑层 IGoodsBiz igb = new GoodsBiz(); //调用查询全部商品的集合方法 List<Goods> goodsls = igb.getAll(tid,str); //把查询出来的商品集合存起来 req.setAttribute("goodsls", goodsls);
②前端代码
<!--绑定商品 --> <div class="row"> <c:forEach items="${goodsls}" var="g"> <div class="col-lg-3 col-md-4 col-sm-6"> <figure class="figure text-center"> <img src="${g.gpath}" class="figure-img img-fluid rounded" > <figcaption class="figure-caption"> <b>${g.gname}<b><br> <b>¥${g.gprice}</b> </c:forEach>
三.分类查询
3.1效果预览
3.2代码实现
①底层代码
public List<Goods> getAll(String tid) { String sql="select * from tb_goods"； //tid为就意味着查询全部 不为空就意味着点了其他类别 传了类别id if(tid!=null) { sql+=" and tid="+tid; } sql+="order by gid desc"; }
//调用业务逻辑层 IGoodsBiz igb = new GoodsBiz(); //接收表单提交过来的类别ID String tid = req.getParameter("tid");//第一次进来就是null //调用分类查询的方法 List<Goods> goodsls = igb.getAll(tid,str); //方便显示选中的样式 为了让对应的类别加active样式 req.setAttribute("tid", tid);
②前端代码
<!-- 点击“所有商品”的时候 tid为null 因此判断为empty才选中 同时刷新所有--> <a href="type.do" class="list-group-item list-group-item-action ${empty tid?'active':''}"> 所有商品</a> <!-- 让对应的类别选中 加入active样式 因此要将tid存起来--> <a href="type.do?tid=${t.tid}&index=2" class="list-group-item list-group-item-action ${t.tid==tid?'active':''}">${t.tname}</a>
四.模糊查询
4.1 效果预览
4.2代码实现
①底层代码
public List<Goods> getAll(String tid,String str) { if(str==null) { str="";//相当于查询全部 } String sql="select * from tb_goods where gname like '%"+str+"%'"; //不为空就意味着点了其他类别 传了类别id if(tid!=null&&!"".equals(tid)) { sql+=" and tid="+tid;//将where----->and } sql+=" order by gid desc";
//调用分类查询方法 List<Goods> goodsls = igb.getAll(tid,str); //方便连同分类一起查询 同时文本框显示关键字 req.setAttribute("str", str);
②前端代码
<form action="type.do" method="post"> <!--传index 为了让分类选中 --> <input type="hidden" name="index" value="2"/> <!--传tid 为了模糊查询类别联合用 --> <input type="hidden" name="tid" value="${tid}"/> <div class="form-group"> <div class="input-group mb-3"> <input name="str" value="${str}" type="text" class="form-control" placeholder="请输入家居关键字"> <div class="input-group-append"> <button class="btn btn btn-primary" type="submit" ></button> </div> </div> </form> </div>
五.分类模糊查询
5.1 效果预览
5.2 代码实现
//说明点了其他类别 tid是有值的 不为空也不为空字符串的时候 if(tid!=null&&!"".equals(tid)) { sql+=" and tid="+tid; } <!--传tid 为了模糊查询类别联合用 --> <input type="hidden" name="tid" value="${tid}"/> <!--点击类别的同时传递关键字到servlet --> <a href="type.do?tid=${t.tid}&index=2&gname=${gname}">${t.tname}</a>
六.细节处理
6.1 效果预览
6.2代码实现
<!--查询未果 --> <c:if test="${empty goodsls}"> <div class="h2" >暂未查找到"<span class="text-danger">${str}</span>"相关的宝贝~<a href="type.do?index=2">点我刷新喔~</a> </div> </c:if>
