SpringBoot秒杀系统实战13-秒杀商品详情页+秒杀倒计时功能
实现
⽂章⽬录
在上⼀节中，我们已经实现秒杀商品的列表页的显⽰，其中可以点击每⼀个商品的【详情】查看具体的秒杀信息，那么我们这⼀节就来实现商品的详情页⾯的显⽰以及秒杀倒计时功能实现。【详情】链接中有{goodsId}作为参数，后端
@PathVariable(“goodsId”)long goodsId拿到这个goodsId，然后去数据库查询对应的商品信息，并显⽰秒杀情况。
我们点击商品详情，发送⼀个连接到后端，那么我们要先设计出⼀个接收’/goods/to_detail/’+${}该请求的接⼝。
秒杀倒计时：
后端根据商品的Id去数据库中获取秒杀开始时间和结束时间，以及系统当前时间，并定义秒杀剩余时间变量和秒杀状态，计算出相应的值，传给前端，前端拿到之后，做相对应的显⽰逻辑效果。
1、在GoodsController⾥⾯创建toDetail⽅法，接收详情页⾯的请求
/**
* 未作页⾯缓存
* @param model
* @param user
* @param goodsId
* @return
*/
@RequestMapping("/to_detail/{goodsId}")
public String toDetail(Model model,MiaoshaUser user,@PathVariable("goodsId")long goodsId) {//id⼀般⽤snowflake算法
model.addAttribute("user", user);
GoodsVo GoodsVoByGoodsId(goodsId);
model.addAttribute("goods", goods);
//既然是秒杀，还要传⼊秒杀开始时间，结束时间等信息
long StartDate().getTime();
long EndDate().getTime();
long now=System.currentTimeMillis();
//秒杀状态量
int status=0;
//开始时间倒计时
int remailSeconds=0;
//查看当前秒杀状态
if(now<start) {//秒杀还未开始，--->倒计时
status=0;
remailSeconds=(int) ((start-now)/1000); //毫秒转为秒
}else if(now>end){ //秒杀已经结束
status=2;
remailSeconds=-1; //毫秒转为秒
}else {//秒杀正在进⾏
status=1;
remailSeconds=0; //毫秒转为秒
}
model.addAttribute("status", status);
model.addAttribute("remailSeconds", remailSeconds);
return "goods_detail";//返回页⾯login
}
注意：获取了商品的秒杀开始时间和结束时间，如果秒杀没有开始，那么计算⼀个还剩多少时间，开始，并且定义⼀个状态status来表⽰⼀个秒杀的状态，0代表秒杀还未开，1代表秒杀正在进⾏，2代表秒杀已经结束，秒杀还未开始的情况还要计算出倒计时，(int) ((start-now)/1000)，然后将status和remailSeconds传到前端去。
2、 前端页⾯处理逻辑
前端需要获取status和remailSeconds（即秒杀状态和剩余时间变量），定义个⼀个属性为隐藏的input来接收remainSecode ，并且定义标签来判断status的状态，通过这个值来显⽰是否开始秒杀，秒杀正在进⾏中，以及秒杀结束。
这⾥需要做特别处理的地⽅是需要⾃⼰写⼀个⽅法来控制秒杀按钮的的可以点击与不可点击的情况，没开始的时候按钮，不可点击，开始后显⽰按钮，此时可以点击，但是结束也不可点击。并且从倒计时状态到正在进⾏秒杀状态的时候要动态切换⽂案
注意：这⾥使⽤setTimeout函数，setTimeout() ⽅法⽤于在指定的毫秒数后调⽤函数或计算表达式。
这⾥是1000毫秒，即每过⼀秒，将remianSecond 值减⼀，并设置到显⽰text中（即实现倒计时动态效
果），然后在调⽤coutDown，判
断此时是否结束此状态（remailSeconds==0），结束调⽤。
3、goods_detail.html完整代码：
<!DOCTYPE html>
<!-- 使⽤thymeleaf，配置相应的 -->
<html xmlns:th=""> <!-- th 命名空间使⽤ -->
<head>
<meta charset="UTF-8"/><!--<meta charset="UTF-8" /> thymeleaf模板引擎默认是Template modes:HTML5解析的，所以解析⽐较严格。 -->
<title>商品列表</title>
<!-- thymeleaf引⼊静态资源的⽅式，@加⼤括弧 "/" 代表static路径-->
<!-- jquery -->
<!-- <script type="text/javascript" th:src="@{/js/jequery.min.js}"></script> -->
<script type="text/javascript" th:src="@{/jquery-validation/lib/jquery-1.11.1.js}"></script>
<!-- bootstrap -->
<!-- <link rel="stylesheet" href="stackpath.bootstrapcdn/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSW -->
<link type="text/css" rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}"/>
<script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">秒杀商品详情</div>
<div class="panel-body">
<span th:if="${user eq null}">您还没有登录，请登录后再操作</span>
<span>没有收货地址的提⽰。。。</span>
</div>
<table class="table" id="goodslist">
<tr>
<td>商品名称</td>
<td colspan="3" th:text="${dsName}"></td>
</tr>
<tr>
<tr>
<td>商品图⽚</td>
<td colspan="3"><img th:src="@{${dsImg}}" width="80" height="60"></img></td>
</tr>
<tr>
<td>秒杀开始时间</td>
<td th:text="${#dates.format(goods.startDate,'yyyy-MM-dd HH:mm:ss')}"></td>
<td id="miaoshaTip">
<!-- 先取得这个时间 -->
<input type="hidden" id="remailSeconds" th:value="${remailSeconds}"></input>
<span th:if="${status eq 0}">秒杀还未开始，倒计时:<span id="countDown" th:text="${remailSeconds}"></span>秒</span> <span th:if="${status eq 1}">秒杀正在进⾏</span>
<span th:if="${status 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}"></input>
</form>
</td>
</tr>
<tr>
<td>商品原价</td>
<td colspan="3" th:text="${dsPrice}"></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 type="text/javascript">
$(function(){
countDown();
});
springboot推荐算法function countDown(){
//获取秒杀倒计时进⾏判断，0-->正在进⾏秒杀,-1-->秒杀结束,remailSeconds>0-->代表倒计时
var remailSeconds=$("#remailSeconds").val();
//alert("remailSeconds:"+remailSeconds);
var timeout;
if(remailSeconds>0){//秒杀还没有开始，进⾏倒计时功能
$("#buyButton").attr("disabled",true);
//倒计时
timeout=setTimeout(function(){
$("#countDown").text(remailSeconds-1);
$("#remailSeconds").val(remailSeconds-1);//remailSeconds这是input
countDown();
},1000);//⼀秒钟之后回调函数
}else if(remailSeconds==0){//正在进⾏秒杀
$("#buyButton").attr("disabled",false);
if(timeout){//如果timeout有值的情况
clearTimeout(timeout);
}
//将⽂案修改 df1fab4272a24cdf9432adb9fd69cb38
$("#miaoshaTip").html("秒杀进⾏中");
}else{
//⼩于0的情况，秒杀结束，将秒杀按钮设置为不可点击
$("#buyButton").attr("disabled",true);
$("#miaoshaTip").html("秒杀结束");
$("#miaoshaTip").html("秒杀结束");
}
}
</script>
</html>
怎么注⼊MiaoshaUser的实例参数
下⾯是未注⼊MiaoshaUser参数的版本：
/**
* 之前的版本 1.0 未作user的参数，即未作UserArgumentResolver时调⽤的detail请求
* @param model
* @param cookieToken
* @param response
* @return
*/
@RequestMapping("/to_detail1")
public String toDetail(Model model,@CookieValue(value=MiaoshaUserService.COOKIE1_NAME_TOKEN)String cookieToken
,HttpServletResponse response) {
//通过取到cookie，⾸先取@RequestParam没有再去取@CookieValue
if(StringUtils.isEmpty(cookieToken)) {
return "login";//返回到登录界⾯
}
String token=cookieToken;
System.out.println("goods-token:"+token);
System.out.println("goods-cookieToken:"+cookieToken);
MiaoshaUser ByToken(token,response);
model.addAttribute("user", user);
return "goods_list";//返回页⾯login
}
注⼊了MiaoshaUser参数的版本：
public String toDetail(Model model,MiaoshaUser user,@PathVariable("goodsId")long goodsId)
思路：实现argumentResolvers
1、新建⼀个包config，然后新建⼀个WebConfig类，写⼊@Configuration注解，代表这是⼀个配置类
WebConfig继承WebMvcConfigurerAdapter类，重写addArgumentResolvers⽅法，添加⼀个解析对象（UserArgumentResolver类的实例userArgumentResolver对象）
WebConfig类：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论