目录
一.绑定分类
1.1 效果预览
1.2 代码实现
①底层代码
②前端代码
二.绑定所有商品
2.1 效果预览
2.2.代码实现
①底层代码
②前端代码
三.分类查询
3.1效果预览
3.2代码实现
①底层代码
②前端代码
四.模糊查询
4.1 效果预览
4.2代码实现
①底层代码
②前端代码
五.分类模糊查询
5.1 效果预览
5.2 代码实现
六.细节处理
6.1 效果预览
6.2代码实现
一.绑定分类
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>
