京东秒杀之秒杀详情

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

<!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}, //启用cookiesuccess: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:00var endTime = new Date(eDate);   // 2023-11-25 18:00var now = new Date();        // 2023-11-25 14:37remainStartSeconds=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接口

@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业务逻辑接口

public interface SeckillGoodService {/*** 查询商品数据* @return*/public List<SeckillGoodVo> query();/*** 查询商品详情* @param seckillId* @return*/public SeckillGoodVo find(Long seckillId);
}

实现类

    @Overridepublic 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层

    @RequestMapping("/find")public Result find(Long seckillId){SeckillGoodVo seckillGoodVo = seckillGoodService.find(seckillId);return Result.success(seckillGoodVo);}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/175078.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

drool 7 multiThread 测试

基本信息 通过option &#xff0c;使用如下代码进行设置 //线程数量10MaxThreadsOption optionMaxThreadsOption.get(10);kieBaseConf.setOption(option);kieBaseConf.setOption(MultithreadEvaluationOption.YES);并发是以CompositeDefaultAgenda/Rule为颗粒度来的&#xff0…

世微AP5125 DC-DC降压恒流 LED车灯电源驱动IC SOT23-6

产品描述 AP5125 是一款外围电路简单的 Buck 型平均电流检测模式的 LED 恒流驱动器&#xff0c;适用于 8-100V 电压范围的非隔离式大功率恒流 LED 驱动领域。芯片采用固定频率 140kHz 的 PWM 工作模式&#xff0c; 利用平均电流检测模式&#xff0c;因此具有优异的负载调整 率…

【微服务】java 规则引擎使用详解

目录 一、什么是规则引擎 1.1 规则引擎概述 1.2 规则引擎执行过程 二、为什么要使用规则引擎 2.1 使用规则引擎的好处 2.1.1 易于维护和更新 2.1.2 增强应用程序的准确性和效率 2.1.3 加快应用程序的开发和部署 2.1.4 支持可视化和可管理性 2.2 规则引擎使用场景 三、…

如何在C/C++中测量一个函数或者功能的运行时间(串行和并行,以及三种方法的实际情况对比)

本文算是一个比较完整的关于在 C/C 中测量一个函数或者功能的总结&#xff0c;最后会演示三种方法的对比。 最常用的clock() 最常用的测量方法是使用clock()来记录两个 CPU 时间点clock_t&#xff0c;然后做差。这个方法的好处在于非常简单易写&#xff0c;如下&#xff08;第…

在龙蜥 anolis os 23 上 源码安装 PostgreSQL 16.1

在龙蜥 OS 23上&#xff0c;本来想使用二进制安装&#xff0c;结果发现没有针对龙蜥的列表&#xff1a; 于是想到了源码安装&#xff0c;下面我们列出了PG源码安装的步骤&#xff1a; 1.安装准备 1.1.创建操作系统组及用户 groupadd postgres useradd -g postgres -m postgr…

10、静态数码管显示

数码管介绍 LED数码管:是一种简单、廉价的显示器&#xff0c;是由多个发光二极管封装在一起组成“8”字型的器件 数码管引脚的定义 共阴极、共阳极 例如&#xff1a;显示数字1&#xff08;b,c段&#xff09; 3、8&#xff1a;接VCC或者GND/低电平 10011111 0110000 共阴极、…

Vue框架学习笔记——条件渲染:v-show和v-if

文章目录 前文提要条件渲染v-showv-ifv-else-if和v-else特殊写法&#xff0c;很多个一致的v-if如何消除 总结 前文提要 本人仅做个人学习记录&#xff0c;如有错误&#xff0c;请多包涵 主要学习链接&#xff1a;尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 条件渲染 条…

百度人工智能培训第一天笔记

参加了百度人工智能初步培训&#xff0c;主要是了解一下现在人工智能的基本情况&#xff0c;以便后续看可以参与一些啥&#xff1f; 下面就有关培训做一些记录&#xff0c;以便后续可以继续学习。 一、理论基础部分 二、实际操作部分 主要学习的百度人工智能平台如下&#xf…

蓝桥杯-平方和(599)

【题目】平方和 【通过测试】代码 import java.util.Scanner; import java.util.ArrayList; import java.util.List; // 1:无需package // 2: 类名必须Main, 不可修改public class Main {public static void main(String[] args) {Scanner scan new Scanner(System.in);//在此…

利用STM32和蓝牙模块构建智能物联网设备的开发指南

智能物联网设备在现代生活中扮演着重要的角色&#xff0c;而STM32微控制器和蓝牙模块则为实现智能物联网设备提供了基础支持。本文将介绍如何使用STM32微控制器和蓝牙模块构建智能物联网设备的开发指南&#xff0c;包括硬件设计、蓝牙模块配置、传感器数据采集和云平台连接等关…

Uni-app智慧工地可视化信息云平台源码

智慧工地的核心是数字化&#xff0c;它通过传感器、监控设备、智能终端等技术手段&#xff0c;实现对工地各个环节的实时数据采集和传输&#xff0c;如环境温度、湿度、噪音等数据信息&#xff0c;将数据汇集到云端进行处理和分析&#xff0c;生成各种报表、图表和预警信息&…

数据可视化:在Jupyter中使用Matplotlib绘制常用图表

Matplotlib是一个强大的数据可视化库&#xff0c;用于创建各种图表。 在Jupyter中使用Matplotlib可以轻松实现折线图、柱状图、散点图和饼图等常用图表。 本篇文章将为你详细讲解用matlpotlib绘制常用图表的方法。 1、折线图 折线图是展示数据趋势和变化的常见图表类型。 …

设计问卷调查问题的技巧二:确定问题的结构与顺序

上篇文章中&#xff0c;我们了解到设计问卷调查问卷的技巧有保持问题中立、少用开放式问题、保持全名平衡的答案集、谨慎设置单一回答。在这篇文章中&#xff0c;我们将继续深入探讨设计问卷调查问题的剩余5大技巧&#xff01; Tip5&#xff1a;注意问题的顺序 虽然您可以任意…

【Linux】 file命令使用

file命令 file命令用于辨识文件类型。 语法 file [参数] [文件名] who命令 -Linux手册页 命令选项及作用 执行令 file --help 执行命令结果 参数 -b  列出辨识结果时&#xff0c;不显示文件名称&#xff1b;-i&#xff1a;显示MIME类型&#xff1b;-z&#xff1a;对…

Linux 栈回溯

目录 前言一、什么是栈回溯&#xff1f;二、栈回溯的实现原理三、参考阅读 前言 日常工作中&#xff0c;我们在开发软件程序时&#xff0c;经常会遇到程序奔溃的问题&#xff0c;导致程序奔溃的原因有很多&#xff0c;我们一般都是定位到相关代码&#xff0c;再去查询具体原因。…

C# 使用PanGu分词

写在前面 这是官方介绍&#xff1a;盘古分词是一个中英文分词组件。作者eaglet 曾经开发过KTDictSeg 中文分词组件&#xff0c;拥有大量用户。作者基于之前分词组件的开发经验&#xff0c;结合最新的开发技术重新编写了盘古分词组件。 盘古分词组件需要配合其字典文件使用&am…

虚幻学习笔记—文本内容处理

一、前言 本文使用的虚幻引擎5.3.2&#xff0c;在虚幻中已经集成了很多可以直接处理多样化文本的蓝图&#xff0c;比如格式化动态显示、浮点数多样化等。 二、实现 2.1、格式化文本显示动态内容&#xff1a;在设置某个文本时可以使用“Format Text”蓝图设置自定义可以的显示…

1.6锁的升级过程

一、偏向锁 轻量级锁 当有新的线程进来时 其实就是竞争不激烈&#xff0c;但是确实存在多个锁竞争的情况&#xff0c;而且是&#xff0c;大家都很有序的进行&#xff0c;一释放&#xff0c;下一个线程就拿到锁&#xff0c;很有顺序的获取锁&#xff0c;基本上通过自旋的方式代…

一、Oceanbase基础

一、集群相关概念 集群&#xff1a;整个分布式数据库。Region&#xff1a;表示区域&#xff0c;是地域的逻辑概念&#xff0c;如1个城市&#xff0c;1个集群可以有多个Region&#xff0c;用于跨城市远 距离容灾。Zone&#xff1a;表示分区&#xff0c;是机房或机架的逻辑概念…

Git指定分支或文件回退到指定版本

文章目录 一、分支回滚1.1、使用 git reset 命令1.2、使用 git revert 命令1.3、使用 git checkout 命令 二、文件回滚2.1、回滚未提交文件2.2、回滚已提交文件2.2.1、首先查看文件的历史版本2.2.2、找到你想要还原的版本2.2.3、将文件还原到你想要还原的版本2.2.4、提交代码 三…