JavaWeb - 小米商城 ：商品详情展示
1. 功能描述
接上篇 JavaWeb - 小米商城 ：首页商品分类展示本篇博客将分析和实现小米商城商品详情内容的查 询和展示。如以下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代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品详情页</title>
<link rel="stylesheet" type="text/css" href="css/login2.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/includeHeader.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var id = getParams("id");
// alert(id)
$.get("/goods.do?action=getGoodsDetailList", "id=" + id, function (result) {
if (result.flag === true) {//登录
for (var i in result.data) {
var t= ' <ol class="breadcrumb">' +
' <li><a href=" ">小米商城</a>/</li>' +
' <li><a href="#">手机</a>/</li>' +
' <li class="active"><a href="getGoodsListByTypeId?typeid=' + result.data[i].typeid + '">' + result.data[i].name + '</a></li>' +
' </ol>' +
' </div>';
$("#divT").append(t);
var temp = ' <div class="col-xs-6 col-md-6">' +
' <a href="#" class="thumbnail">' +
' <img src="/' + result.data[i].picture + '" width="560" height="560" alt="' + result.data[i].id + '" />' +
' </a>' +
' </div>' +
' <div class="col-xs-6 col-md-6">' +
'<div class="panel panel-default" style="height: 560px">' +
' <div class="panel-heading">商品详情</div>' +
' <div class="panel-body">' +
' <h3>产品名称:<small>' + result.data[i].name + '</small></h3>' +
' <div style="margin-left: 10px;">' +
' <p>市场价格: <span class="text-danger" style="font-size: 15px;">' + result.data[i].price + '</span> <span class="glyphicon glyphicon-yen"></span></p> ' +
' <p>上市时间: ' + result.data[i].pubdate + '</p>' +
' <p>热销指数: ';
var stTemp = "";
for (var j = 0; j <= result.data[i].star; j++) {
stTemp += '<img src="image/star_red.gif" alt="star"/>';
}
temp += stTemp;
temp +=
'</p>' +
' <p>详细介绍:</p>' +
' <p> ' + result.data[i].intro + '</p>' +
' <a href="${pageContext.request.contextPath}/addCart?goodsId=${goods.id}&price=${goods.price}" class="btn btn-warning">加入购物车 <span class="glyphicon glyphicon-shopping-cart"></span></a> ' +
' <button class="btn btn-danger">直接购买</button>' +
' </div>' +
' </div>' +
'\</div>' +
' </div>' +
'</div>'
$("#divD").append(temp);
}
}
});
});
</script>
</head>
<body>
<!--头部区域,通过js引入-->
<div id="headtop">
</div>
<div id="divT" style="margin: 0 auto;width: 90%;">
</div>
<div id="divD" class="container">
<div id="row" class="row">
</div>
</div>
</div>
<!-- 底部 -->
<!--网站版权部分开始-->
<div id="seventh">
<p id="sevep">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</p>
<p id="sevep">©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</p>
<p id="sevep">违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
</div>
</body>
</html>
3.2 后端
3.2.1 Servlet
在 GoodsServlet 类中定义查询所有商品分类内容的主体逻辑
@WebServlet("/goods.do")
public class GoodsServlet extends BaseServlet {
private ResultData resultData = new ResultData();
//.............
/**
* 根据商品id返回goodsDetail.html
*/
public String getGoodsListById(HttpServletRequest req, HttpServletResponse resp) {
String id = req.getParameter("id");
System.out.println("id:"+id);
return Constants.REDIRECT + "/goodsDetail.html?id=" + id;
}
/**
* 根据商品id返回商品详情json
*/
public String getGoodsDetailList(HttpServletRequest req, HttpServletResponse resp) {
String id = req.getParameter("id");
IGoodsService service = new GoodsServiceImpl();
resultData.setFlag(false);
List<Goods> goods = service.getGoodsById(id);
if (goods != null && goods.size() >= 1) {
resultData.setFlag(true);
resultData.setData(goods);
}
String json = JSON.toJSONString(resultData);
System.out.println("id"+json);
//在响应中声明返回的是json格式字符
resp.setContentType("application/json;charset=utf-8");
return json;
}
3.2.2 Service
在 GoodsImpl 类中定义 getGoodsById 方法，定义商品详情内容的具体查询业务逻辑
/**
* 商品业务层
*/
public class GoodsServiceImpl implements IGoodsService {
private IGoodsDao goodsDao=new GoodsDaoImpl();
//......
@Override
public List<Goods> getGoodsById(String id) {
List<Goods> goods=null;
if (id !=null){
goods=goodsDao.getGoodsById(id);//如果有则根据id查询
}
return goods;
}
}
3.2.3 Dao
在 GoodsDaoImpl 类中定义 getGoodsById() 方法，操作数据库查询 tb_goods_type表中的所有内容
public class GoodsDaoImpl implements IGoodsDao {
private QueryRunner queryRunner = null;
//.................
@Override
public List<Goods> getAllDatas() {
String sql = "select * from tb_goods where gstate=0";
return queryBySql(sql);
}
@Override
public List<Goods> queryBySql(String sql, Object... parms) {
List<Goods> goods = null;
QueryRunner qrun = new QueryRunner(DBUtils.getDataSource());
try {
goods = qrun.query(sql, parms, new BeanListHandler<>(Goods.class));
} catch (SQLException e) {
e.printStackTrace();
}
return goods;
}
/**
* 根据id查询商品详情
*/
@Override
public List<Goods> getGoodsById(String id) {
String sql = "select * from tb_goods where gstate=0 and id=?";
return queryBySql(sql, id);
}
}
后端程序执行顺利的话，返回的响应结果可以使用 Chrome浏览器的自动 json 解析功能观察到以下效 果.
6225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
