1、对应的GoodsDao中的核心代码为：
@Select("select g.*, mg.stock_count, mg.miaosha_price, mg.start_date, mg.end_date from miaosha_goods mg left join goods g on mg.goods_id = g.id where mg.goods_id = #{id}")
public GoodsVo getOneGoodsVoById(@Param("id")long goodsId);
2、GoodsController中的核心代码如下：
@RequestMapping("/to_detail/{goodsId}")//路由是这样写的 {goodsId}
public String detail(Model model, MiaoshaUser user, @PathVariable("goodsId")long goodsId) {
GoodsVo oneGoodsVo = goodsService.getOneGoodsVoById(goodsId);
long startAt = oneGoodsVo.getStartDate().getTime();
long endAt = oneGoodsVo.getEndDate().getTime();
long current = System.currentTimeMillis();
int remainSeconds = 0;
int miaoshaStatus = 0;//0未开始 1正在进行 2已结束
if(current < startAt){//秒杀还未开始
miaoshaStatus = 0;
remainSeconds = (int)((startAt - current)/1000);
}else if(current > endAt){//秒杀已经结束
miaoshaStatus = 2;
remainSeconds = -1;
}else{//秒杀正在进行
miaoshaStatus = 1;
remainSeconds = 0;
}
model.addAttribute("goods", oneGoodsVo);
model.addAttribute("user", user);
model.addAttribute("remainSeconds", remainSeconds);
model.addAttribute("miaoshaStatus", miaoshaStatus);
return "goods_detail";
}
3、goods_detail.html中代码如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><!-- 引入thymeleaf 的 命名空间（th） -->
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"></meta>
<title>商品列表</title>
<!-- jquery -->
<!-- 这里 / 代表 的是static文件夹，这是thymeleaf引入静态文件的方式。 -->
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<!-- bootstrap -->
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"></link>
<script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<!-- jquery-validation -->
<script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
<script type="text/javascript" th:src="@{/jquery-validation/localization/messages_zh.js}"></script>
<!-- layer -->
<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">秒杀商品详情</div>
<div class="panel-body">
<span th:if="${user eq null}">您还没有登录，请登录后再操作<br/></span>
<span>没有收货地址的提示。。。</span>
</div>
<table class="table" id="goodslist">
<tr>
<td>商品名称</td>
<td th:text="${goods.goodsName}" colspan="3"></td>
</tr>
<tr>
<td>商品图片</td>
<td colspan="3"><img th:src="@{${goods.goodsImg}}" width="200" height="200"/></td>
</tr>
<tr>
<td>秒杀开始时间</td>
<!-- thymeleaf为我们转换了数据的格式，日期格式使用单引号包围 -->
<td th:text="${#dates.format(goods.startDate,'yyyy-MM-dd HH-mm-ss')}"></td>
<td id="miaoshaTip">
<input type="hidden" id="remainSeconds" th:value="${remainSeconds}"/>
<span th:if="${miaoshaStatus eq 0}">秒杀倒计时：<span id="countDown" th:text="${remainSeconds}"></span>秒</span>
<span th:if="${miaoshaStatus eq 1}">秒杀正在进行</span>
<span th:if="${miaoshaStatus eq 2}">秒杀已经结束</span>
</td>
<td><!-- 如下所示，一个小小的区域也可以当做一个表单，以表单的方式进行提交，在提交的时候可以隐含提交一些信息-->
<form id="miaoshaForm" method="post" action="/miaosha/do_miaosha">
<button class="btn btn-primary btn-block" type="submit" id="buyButton">立即秒杀</button>
<input type="hidden" name="goodsId" th:value="${goods.id}"/><!-- 把商品id拿到服务端 -->
</form>
</td>
</tr>
<tr>
<td>商品原价</td>
<td colspan="3" th:text="${goods.goodsPrice}"></td>
</tr>
<tr>
<td>秒杀价</td>
<td colspan="3" th:text="${goods.miaoshaPrice}"></td>
</tr>
<tr>
<td>库存数量</td>
<td colspan="3" th:text="${goods.stockCount}"></td>
</tr>
</table>
</div>
</body>
<script>
$(function(){
countDown();
});
function countDown(){
var remainSeconds = $("#remainSeconds").val();//javascript中的变量不能和小于0的值相比
var timeout;
if(remainSeconds > 0){//不要使用 < 运算符，使用的话就会报错。。秒杀还未开始
$("#buyButton").attr("disabled", true);
timeout = setTimeout(function(){//小写的字母o
$("#countDown").text(remainSeconds - 1);
$("#remainSeconds").val(remainSeconds - 1);
countDown();
},1000);
}else if(remainSeconds == 0){//秒杀正在进行
if(timeout){
clearTimeout(timeout);//把定时器清除掉
}
$("#miaoshaTip").html("秒杀正在进行");
$("#buyButton").attr("disabled", false);
}else{//秒杀已经结束
$("#buyButton").attr("disabled", true);
$("#miaoshaTip").html("秒杀已经结束");
}
}
</script>
</html>