JavaWeb - 仿小米商城（5）：商品详情展示

JavaWeb - 仿小米商城(5):商品详情展示

1 功能描述 接上篇 JavaWeb - 仿小米商城（4）：商品列表形式 本篇博客将分析和实现小米商城商品详情内容的查 询和展示。如以下H5页面所示：

2 功能分析

2.1 功能逻辑抽象

详情展示功能在逻辑上并不复杂：在商品列表界面每当点击商品 <img>标签或商品名称时，都会向后端 提交一个 GET 请求来获取本商品数据内容。后端在收到请求后查询数据库并以 json 形式返回展示内 容。

查询商品详情内的功能需要面向数据库中的另一张表 tb_goods，为了区分不同类型的数据查询业务以及 代码的维护性和扩展性。在开发时基于三层架构体系建立对应的 GoodsServlet 类、GoodsService 接口 和实现类、GoodsDao 接口和实现类

3 代码实现

3.1 前端

3.1.1 修改商品a链接地址

3.1.2 编写goodsDetail.html代码

前端在加载<header>内容时便向后端提交异步请求。在商品详情页根据传递过来的id，发出请求向 Servlet获取本商品json数据

html 的<script>标签中定义以下 jQuery 代码：

<script type="text/javascript">
$(document).ready(function () {
var gid = getParams("gid");
$.get("goods.do?action=showGoodById", "gid=" + gid, function (result) {
if (result.flag === true) {
//设置标题上的链接信息
$("#tip").attr("href","getGoodsListByTypeId?typeid="+
result.data.typeid);
$("#tip").text(result.data.name);
//设置大图地址和悬停提示
$("#picImg").attr("src","/"+ result.data.picture);
$("#picImg").attr("alt",result.data.name);
//拼接详情
var gdStr = '<div class="panel-heading">商品详情</div>' +
' <div class="panel-body">' +
' <h3>产品名称:<small>' + result.data.name + '</small>
</h3>' +
' <div style="margin-left: 10px;">' +
' <p>市场价格:&nbsp;&nbsp;&nbsp;' +
'<span class="text-danger" style="font-size: 15px;">' +
result.data.price + '</span>&nbsp;&nbsp;&nbsp;' +
'<span class="glyphicon glyphicon-yen"></span></p> ' +
' <p>上市时间:&nbsp;&nbsp;&nbsp;' + result.data.pubdate +
'</p>' +
' <p>热销指数:&nbsp;&nbsp;&nbsp;';
var stTemp = "";
for (var j = 0; j <= result.data.star; j++) {
stTemp += '<img src="image/star_red.gif" alt="star"/>';
}
gdStr += stTemp;
gdStr += ' <p>详细介绍:</p>' +
' <p>&nbsp;&nbsp;' + result.data.intro + '</p>' +
' <a href="addCart?goodsId=' + result.data.id + '&price='
+ result.data.price + '" class="btn btn-warning">' +
'加入购物车&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphiconshopping-cart"></span></a>&nbsp;&nbsp;&nbsp;' +
' <button class="btn btn-danger">直接购买</button>' +
' </div>' +
' </div>';
//将拼接好的字符放在在html内
$("#spDetail").html(gdStr);
}
});
});
</script>

3.2 后端

3.1.1 Servlet

在 GoodsServlet 类中定义查询所有商品分类内容的主体逻辑

@WebServlet("/goods.do")
public class Goodservlet extends BaseServlet{
//... ...
/**
* 根据传递商品id到商品详情页
* @param request
* @param response
* @return
*/
	public String getGoodsById(HttpServletRequest request, HttpServletResponse
response) {
		String id = request.getParameter("id");
		return Constants.REDIRECT+ "/goodsDetail.html?gid="+id;
}
/**
* 根据商品id返回所有商品json数据
* @param request
* @param response
* @return
*/
public String getGoodById(HttpServletRequest request, HttpServletResponse
response) {
		String gid = request.getParameter("gid");
		int id=1;//没有默认显示1号商品
		if(gid!=null){
		id= Integer.parseInt(gid);
	}
		IGoodService service = new GoodServiceImpl();
		resultData.setFlag(false);
		Goods goods = service.queryDataById(id);
		if(goods!=null){
		resultData.setFlag(true);
		resultData.setData(goods);
	}
	String json = JSON.toJSONString(resultData);
	System.out.println(json);
	//在响应中声明返回的是json格式字符
	response.setContentType("application/json;charset=utf-8");
	return json;
}
}

3.1.2 Service

在 GoodsImpl 类中定义 findAll() 方法，定义旅游线路分类内容的具体查询业务逻辑

public class GoodsServiceImpl implements IGoodsTypeService {
		//... ...
	@Override
	public Goods queryDataById(int id) {
		return goodsDao.findDataById(id);
	}
}

3.1.3 Dao

在 GoodsDaoImpl 类中定义 getAllDatas() 方法，操作数据库查询 tb_goods_type表中的所有内容

public class GoodsTypeDaoImpl implements IGoodsTypeDao {
//... ...
	@Override
	public Goods findDataById(int id) {
		String sql="select * from tb_goods where gstate=0 and id=?";
		List<Goods> goods = queryBySql(sql,id);
		if(goods!=null &goods.size()>=1){
		return goods.get(0);
			}
		return null;
	}
}

tate=0 and id=?";
List goods = queryBySql(sql,id);
if(goods!=null &goods.size()>=1){
return goods.get(0);
}
return null;
}
}