京东秒杀之秒杀详情

1 编写前端页面(商品详情)

html 复制代码
<!DOCTYPE html>
<head>
    <title>商品详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" /><!-- bootstrap -->
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script> <!-- jquery-validator -->
    <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script><!-- layer -->
    <script type="text/javascript" src="/js/md5.min.js"></script><!-- md5.js -->
    <script type="text/javascript" src="/js/common.js"></script><!-- common.js -->
    <script type="text/javascript" src="/js/socket.js"></script><!-- common.js -->
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>
    <div class="panel-body">
    <div id="userTip" style="display: none">
        <span> 您还没有登录,请<a href="/login.html">登陆</a>后再操作<br/></span>
    </div>
    <span>没有收货地址的提示。。。</span>
</div>
<table class="table">
    <tr>
        <td>商品名称</td>
        <td colspan="3" id="goodName"></td>
    </tr>
    <tr>
        <td>商品图片</td>
        <td colspan="3"><img id="goodImg"  width="200" height="200" /></td>
    </tr>
    <tr>
        <td>秒杀开始时间</td>
        <td id="startDate"></td>
        <td id="seckillTip">
        </td>
        <td>
            <img id="verifyCodeImg" width="80" height="32"  onclick="initVerifyCodeImg()" style="display: none">
            <input id="verifyCode" style="display: none">
            <button class="btn btn-primary btn-block" type="button" id="buyButton" onclick="">立即秒杀</button>
        </td>
    </tr>
    <tr>
        <td>商品原价</td>
        <td colspan="3" id="goodPrice"></td>
    </tr>
    <tr>
        <td>秒杀价</td>
        <td colspan="3" id="seckillPrice"></td>
    </tr>
    <tr>
        <td>库存数量</td>
        <td colspan="3" id="stockCount"></td>
    </tr>
</table>
</div>
<script type="text/javascript">


    var seckillId;

    $(function () {
          seckillId = getQueryString("seckillId");
        initGood();
    });


    function initGood(){
        $(function () {
            $.ajax({
                url: "http://localhost:9000/seckill/seckillGood/find?seckillId="+seckillId,
                type: "get",
                xhrFields: {withCredentials: true}, //启用cookie
                success:function (data) {
                    if(data.code==200){
                        //填充表格中的数据
                        renderGood(data.data);
                    }else{
                        layer.msg(data.msg)
                    }
                }
            });
        });

    }

    function renderGood(good) {
         $("#goodName").html(good.goodName);
         $("#goodImg").prop("src",good.goodImg);
         $("#startDate").html(good.startDate);
         $("#goodPrice").html(good.goodPrice);
         $("#stockCount").html(good.stockCount);
        $("#seckillPrice").html(good.seckillPrice);
        //调用时间
        renderDate(good.startDate,good.endDate);
    }

    //定义秒杀的三个阶段
    var timer;  //计时器
    //距离抢购开始还有多久
    var remainStartSeconds;
    //距离结束还有多久
    var remainEndSeconds;

    function renderDate(sDate,eDate) {
        var startTime = new Date(sDate);  // 2023-11-25 16:00
        var endTime = new Date(eDate);   // 2023-11-25 18:00
        var now = new Date();        // 2023-11-25 14:37
        remainStartSeconds=parseInt((startTime.getTime()-now.getTime())/1000);//秒
        remainEndSeconds=parseInt((endTime.getTime()-now.getTime())/1000);//秒
        timer=window.setInterval(showSeckillTip,1000);
    }

    
    function showSeckillTip() {
        remainStartSeconds--;
        remainEndSeconds--;

       if(remainStartSeconds>0){
           $("#seckillTip").html("距离本场秒杀开始还有"+remainStartSeconds+"秒");
           //禁用按钮
           $("#buyButton").prop("disabled",true);
       }else{
           if(remainEndSeconds>0){
                 //秒杀中
               $("#seckillTip").html("秒杀进行中....");
               //禁用按钮
               $("#buyButton").prop("disabled",false);
           }else{
               $("#seckillTip").html("秒杀结束了");
               //禁用按钮
               $("#buyButton").prop("disabled",true);
               window.clearInterval(timer);//取消计时器
           }


       }
    }

</script>
</body>
</html>

2 编写Mapper接口

java 复制代码
@Mapper
public interface SeckillGoodMapper {

    @Select("SELECT * FROM t_seckill_goods")
    public List<SeckillGood> query();

    @Select("SELECT * FROM t_seckill_goods where id=#{seckillId}")
    public SeckillGoodVo find(Long seckillId);
}

3 编写service业务逻辑接口及其实现类


service业务逻辑接口

java 复制代码
public interface SeckillGoodService {

    /**
     * 查询商品数据
     * @return
     */
    public List<SeckillGoodVo> query();

    /**
     * 查询商品详情
     * @param seckillId
     * @return
     */
    public SeckillGoodVo find(Long seckillId);
}

实现类

java 复制代码
    @Override
    public SeckillGoodVo find(Long seckillId) {
        if (seckillId == null){
            return null;
        }
        //根据场次id查询商品
        SeckillGood sg=  seckillGoodMapper.find(seckillId);

        if(sg==null){
            return null;
        }

        List<SeckillGood> seckillGoodList = new ArrayList<>();
        seckillGoodList.add(sg);
        //调用聚合的方法
        List<SeckillGoodVo> seckillGoodVos = getSeckillGoodVos(seckillGoodList);
        //获取单个对象
        return seckillGoodVos.get(0);
    }

4 创建controller层

java 复制代码
    @RequestMapping("/find")
    public Result find(Long seckillId){
        SeckillGoodVo seckillGoodVo = seckillGoodService.find(seckillId);

        return Result.success(seckillGoodVo);
    }
相关推荐
Kookoos11 小时前
ABP VNext + .NET Minimal API:极简微服务快速开发
后端·微服务·架构·.net·abp vnext
小安运维日记1 天前
CKS认证 | Day4 最小化微服务漏洞
安全·docker·微服务·云原生·容器·kubernetes
Code季风2 天前
将 gRPC 服务注册到 Consul:从配置到服务发现的完整实践(上)
数据库·微服务·go·json·服务发现·consul
Code季风2 天前
微服务分布式配置中心:Gin Web 服务层与 gRPC 服务层集成 Nacos 实战
分布式·微服务·rpc·架构·go·gin·consul
步、步、为营2 天前
.net微服务框架dapr保存和获取状态
微服务·架构·.net
guojl2 天前
微服务OpenFeign源码分析
spring cloud·微服务
guojl2 天前
微服务OpenFeign使用手册
spring cloud·微服务
Code季风3 天前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin
Code季风3 天前
Gin Web 服务集成 Consul:从服务注册到服务发现实践指南(下)
java·前端·微服务·架构·go·gin·consul