课程目标

目标1：能够说出秒杀实现思路

目标2：实现秒杀频道首页功能

目标3：实现秒杀商品详细页功能

目标4：实现秒杀下单功能

目标5：实现秒杀支付功能

1、秒杀业务分析

1.1、需求分析

所谓“秒杀”，就是网络卖家发布一些超低价格的商品，所有买家在同一时间网上抢购的一种销售方式。通俗一点讲就是网络商家为促销等目的组织的网上限时抢购活动。由于商品价格低廉，往往一上架就被抢购一空，有时只用一秒钟。

秒杀商品通常有两种限制：库存限制、时间限制。

需求：

（1）商家提交秒杀商品申请，录入秒杀商品数据，主要包括：商品标题、原价、秒杀价、商品图片、介绍等信息

（2）运营商审核秒杀申请

（3）秒杀频道首页列出秒杀商品（进行中的）点击秒杀商品图片跳转到秒杀商品详细页。

（4）商品详细页显示秒杀商品信息，点击立即抢购实现秒杀下单，下单时扣减库存。当库存为0或不在活动期范围内时无法秒杀。

（5）秒杀下单成功，直接跳转到支付页面（微信扫码），支付成功，跳转到成功页，填写收货地址、电话、收件人等信息，完成订单。

（6）当用户秒杀下单5分钟内未支付，取消预订单，调用微信支付的关闭订单接口，恢复库存。

1.2、数据库表分析

Tb_seckill_goods 秒杀商品表

Tb_seckill_order 秒杀订单表

1.3、秒杀实现思路

秒杀技术实现核心思想是运用缓存减少数据库瞬间的访问压力！读取商品详细信息时运用缓存，当用户点击抢购时减少缓存中的库存数量，当库存数为0时或活动期结束时，同步到数据库。产生的秒杀预订单也不会立刻写到数据库中，而是先写到缓存，当用户付款成功后再写入数据库。

1.4、工程搭建与准备

（1）工程模块搭建

（a）创建秒杀服务接口模块 pinyougou-seckill-interface ，依赖pinyougou-pojo

（b）创建秒杀服务模块pinyougou-seckill-service (war)，pom.xml引入依赖参见其它服务工程,依赖 pinyougou-seckill-interface ， Tomcat7插件运行端口为9009。添加web.xml、 spring 配置文件参见其它服务工程, dubbox的端口为20889。

（c）创建秒杀频道web模块 pinyougou-seckill-web(war) pom.xml引入依赖参见cart_web工程(需添加单点登录和权限控制)，依赖 pinyougou-seckill-interface ，Tomcat7插件运行端口为9109 添加web.xml、 spring 配置文件参见cart_web工程。

将秒杀相关的页面及资源拷贝到此模块。添加angularJS.

（2）代码生成

运用《黑马程序员代码生成器》生成代码，拷入工程

1.5、秒杀商品后台管理（学员完成）

运营商系统web模块pinyougou-manager-web依赖 pinyougou-seckill-interface

商家系统web模块pinyougou-shop-web依赖pinyougou-seckill-interface

学员实现代码：

（1）商家后台

（a）秒杀商品列表

（b）秒杀商品申请

（c）秒杀订单查询

（2）运营商后台

（a）待审核秒杀商品列表

（b）秒杀商品审核

（c）秒杀订单查询

2、品优购-秒杀频道首页

2.1、需求分析

秒杀频道首页，显示正在秒杀的商品（已经开始，未结束的商品）

2.2、后端代码

（1）服务接口层

（a）修改pinyougou-seckill-interface的SeckillGoodsService.java

	/*** 返回当前正在参与秒杀的商品* @return*/public List<TbSeckillGoods> findList();

（2）服务实现层

修改pinyougou-seckill-service的SeckillGoodsServiceImpl.java

	@Overridepublic List<TbSeckillGoods> findList() {TbSeckillGoodsExample example=new TbSeckillGoodsExample();Criteria criteria = example.createCriteria();criteria.andStatusEqualTo("1");//审核通过criteria.andStockCountGreaterThan(0);//剩余库存大于0criteria.andStartTimeLessThanOrEqualTo(new Date());//开始时间小于等于当前时间criteria.andEndTimeGreaterThan(new Date());//结束时间大于当前时间return seckillGoodsMapper.selectByExample(example);}

（3）控制层

修改pinyougou-seckill-web的SeckillGoodsController.java

	/*** 当前秒杀的商品* @return*/@RequestMapping("/findList")public List<TbSeckillGoods> findList(){return seckillGoodsService.findList();}

2.3、前端代码实现

（1）服务层

在pinyougou-seckill-web创建 seckillGoodsService.js

//服务层
app.service('seckillGoodsService',function($http){	    	//读取列表数据绑定到表单中this.findList=function(){return $http.get('seckillGoods/findList.do');		}	
});

（2）控制层

在pinyougou-seckill-web创建seckillGoodsController.js

 //控制层 
app.controller('seckillGoodsController' ,function($scope,seckillGoodsService){	//读取列表数据绑定到表单中  $scope.findList=function(){seckillGoodsService.findList().success(function(response){$scope.list=response;}			);}       
});

（3）页面

修改seckill-index.html,引入js

<script type="text/javascript" src="plugins/angularjs/angular.min.js">  </script>
<script type="text/javascript" src="js/base.js">  </script>
<script type="text/javascript" src="js/service/seckillGoodsService.js">  </script>
<script src="js/controller/seckillGoodsController.js">  </script>

指令

<body ng-app="pinyougou" ng-controller="seckillGoodsController" ng-init="findList()">

循环列表的实现

<li class="seckill-item" ng-repeat="pojo in list"><div class="pic"><img src="{{pojo.smallPic}}" width="290px" height="290px" alt=''>	
</div><div class="intro"><span>{{pojo.title}}</span></div><div class='price'><b class='sec-price'>￥{{pojo.costPrice}}</b><b class='ever-price'>￥{{pojo.price}}</b></div><div class='num'><div>已售{{ ((pojo.num-pojo.stockCount)/pojo.num*100).toFixed(0) }}%</div><div class='progress'><div class='sui-progress progress-danger'><span style='width: {{ ((pojo.num-pojo.stockCount)/pojo.num*100).toFixed(0) }}%;' class='bar'></span></div></div><div>剩余<b class='owned'>{{pojo.stockCount}}</b>件</div></div><a class='sui-btn btn-block btn-buy' href='seckill-item.html#?id={{pojo.id}}' target='_blank'>立即抢购</a>
</li>

2.4、缓存处理

修改pinyougou-seckill-service的SeckillGoodsServiceImpl.java

@Autowiredprivate RedisTemplate redisTemplate;@Overridepublic List<TbSeckillGoods> findList() {//获取秒杀商品列表List<TbSeckillGoods> seckillGoodsList = redisTemplate.boundHashOps("seckillGoods").values();if(seckillGoodsList==null || seckillGoodsList.size()==0){TbSeckillGoodsExample example=new TbSeckillGoodsExample();Criteria criteria = example.createCriteria();criteria.andStatusEqualTo("1");//审核通过criteria.andStockCountGreaterThan(0);//剩余库存大于0criteria.andStartTimeLessThanOrEqualTo(new Date());//开始时间小于等于当前时间criteria.andEndTimeGreaterThan(new Date());//结束时间大于当前时间seckillGoodsList= seckillGoodsMapper.selectByExample(example);		//将商品列表装入缓存System.out.println("将秒杀商品列表装入缓存");for(TbSeckillGoods seckillGoods:seckillGoodsList){redisTemplate.boundHashOps("seckillGoods").put(seckillGoods.getId(), seckillGoods);}			}return seckillGoodsList;}

3、品优购-秒杀详细页

3.1、需求分析

商品详细页显示秒杀商品信息。

3.2、显示详细页信息

（1）后端代码

修改pinyougou-seckill-interface的SeckillGoodsService

	/*** 根据ID获取实体(从缓存中读取)*/public TbSeckillGoods findOneFromRedis(Long id);

修改pinyougou-seckill-service的SeckillGoodsServiceImpl.java

	@Overridepublic TbSeckillGoods findOneFromRedis(Long id) {return  (TbSeckillGoods)redisTemplate.boundHashOps("seckillGoods").get(id);}

修改pinyougou-seckill-web的SeckillGoodsController

	@RequestMapping("/findOneFromRedis")public TbSeckillGoods findOneFromRedis(Long id){return seckillGoodsService.findOneFromRedis(id);		}

增加超时时间设置

	@Reference(timeout=10000)private SeckillGoodsService seckillGoodsService;

（2）前端代码

pinyougou-seckill-web 的seckillGoodsService.js

	this.findOne=function(id){return $http.get('seckillGoods/findOneFromRedis.do?id='+id);		}

pinyougou-seckill-web 的seckillGoodsController.js ，引入$location服务

//查询实体 $scope.findOne=function(){	seckillGoodsService.findOne($location.search()['id']).success(function(response){$scope.entity= response;					});				}

修改seckill-item.html ，引入js

<script type="text/javascript" src="plugins/angularjs/angular.min.js">  </script>
<script type="text/javascript" src="js/base.js">  </script>
<script type="text/javascript" src="js/service/seckillGoodsService.js">  </script>
<script src="js/controller/seckillGoodsController.js">  </script>

指令

<body ng-app="pinyougou" ng-controller="seckillGoodsController" ng-init="findOne()">

用表达式显示标题

<h4>{{entity.title}}</h4>

图片

<span class="jqzoom"><img jqimg="{{entity.smallPic}}" src="{{entity.smallPic}}" width="400px" height="400px" /></span>

价格

<div class="fl price"><i>¥</i><em>{{entity.costPrice}}</em><span>原价：{{entity.price}}</span>
</div>

介绍

<div class="intro-detail">{{entity.introduction}}</div>

剩余库存

剩余库存：{{entity.stockCount}}

3.3、秒杀倒计时效果

（1） $interval服务简介

在AngularJS中$interval服务用来处理间歇性处理一些事情

格式为：

 $interval(执行的函数,间隔的毫秒数,运行次数);

运行次数可以缺省，如果缺省则无限循环执行

取消执行用cancel方法

$interval.cancel(time);

我先现在先做一个简单的例子：10秒倒计时，首先引入$interval , 控制层编写代码如下：

	$scope.second = 10; time= $interval(function(){ if($scope.second>0){ $scope.second =$scope.second-1;  			}else{$interval.cancel(time); 		  alert("秒杀服务已结束");}},1000);

页面用表达式显示$scope.second的值

（2）秒杀倒计时

修改seckillGoodsController.js ，实现

	$scope.findOne=function(){	seckillGoodsService.findOne($location.search()['id']).success(function(response){$scope.entity= response;allsecond =Math.floor( (  new Date($scope.entity.endTime).getTime()- (new Date().getTime())) /1000); //总秒数time= $interval(function(){ if(second>0){ second =second-1;$scope.timeString=convertTimeString(allsecond);//转换时间字符串}else{$interval.cancel(time); 		  alert("秒杀服务已结束");}},1000);			});				}	//转换秒为   天小时分钟秒格式  XXX天 10:22:33convertTimeString=function(allsecond){var days= Math.floor( allsecond/(60*60*24));//天数var hours= Math.floor( (allsecond-days*60*60*24)/(60*60) );//小数数var minutes= Math.floor(  (allsecond -days*60*60*24 - hours*60*60)/60    );//分钟数var seconds= allsecond -days*60*60*24 - hours*60*60 -minutes*60; //秒数var timeString="";if(days>0){timeString=days+"天 ";}return timeString+hours+":"+minutes+":"+seconds;}

修改页面seckill-item.html ，显示time的值

<span class="overtime"> 距离结束：{{timeString}}</span>

4、品优购---秒杀下单

4.1、需求分析

商品详细页点击立即抢购实现秒杀下单，下单时扣减库存。当库存为0或不在活动期范围内时无法秒杀。

4.2、后端代码

（1）服务接口层

修改pinyougou-seckill-interface的SeckillOrderService.java

	/*** 提交订单* @param seckillId* @param userId*/public void submitOrder(Long seckillId,String userId);

（2）服务实现层

Spring配置文件配置IdWorker

pinyougou-seckill-service的SeckillOrderServiceImpl.java实现方法

	@Autowiredprivate RedisTemplate redisTemplate;@Autowiredprivate IdWorker idWorker;@Overridepublic void submitOrder(Long seckillId, String userId) {//从缓存中查询秒杀商品		TbSeckillGoods seckillGoods =(TbSeckillGoods) redisTemplate.boundHashOps("seckillGoods").get(seckillId);if(seckillGoods==null){throw new RuntimeException("商品不存在");}if(seckillGoods.getStockCount()<=0){throw new RuntimeException("商品已抢购一空");}	//扣减（redis）库存		seckillGoods.setStockCount(seckillGoods.getStockCount()-1);redisTemplate.boundHashOps("seckillGoods").put(seckillId, seckillGoods);//放回缓存if(seckillGoods.getStockCount()==0){//如果已经被秒光seckillGoodsMapper.updateByPrimaryKey(seckillGoods);//同步到数据库	
redisTemplate.boundHashOps("seckillGoods").delete(seckillId);		}//保存（redis）订单long orderId = idWorker.nextId();TbSeckillOrder seckillOrder=new TbSeckillOrder();seckillOrder.setId(orderId);seckillOrder.setCreateTime(new Date());seckillOrder.setMoney(seckillGoods.getCostPrice());//秒杀价格seckillOrder.setSeckillId(seckillId);seckillOrder.setSellerId(seckillGoods.getSellerId());
seckillOrder.setUserId(userId);//设置用户IDseckillOrder.setStatus("0");//状态redisTemplate.boundHashOps("seckillOrder").put(userId, seckillOrder);}

（3）控制层

修改pinyougou-seckill-web的SeckillOrderController.java

@RequestMapping("/submitOrder")
public Result submitOrder(Long seckillId){String userId = SecurityContextHolder.getContext().getAuthentication().getName();if("anonymousUser".equals(userId)){//如果未登录return new Result(false, "用户未登录");}try {seckillOrderService.submitOrder(seckillId, userId);return new Result(true, "提交成功");}catch (RuntimeException e) {e.printStackTrace();return new Result(false, e.getMessage());} catch (Exception e) {e.printStackTrace();return new Result(false, "提交失败");}
}

4.3、前端代码

（1）前端服务层

pinyougou-seckill-web的seckillGoodsService.js

	//提交订单this.submitOrder=function(seckillId){return $http.get('seckillOrder/submitOrder.do?seckillId='+seckillId);}

（2）前端控制层

pinyougou-seckill-web的seckillGoodsController.js

	//提交订单$scope.submitOrder=function(){seckillGoodsService.submitOrder($scope.entity.id).success(function(response){if(response.success){alert("下单成功，请在1分钟内完成支付");location.href="pay.html";}else{alert(response.message);}});		}

（3）页面

修改seckill-item.html

<a ng-click="submitOrder()" target="_blank" class="sui-btn  btn-danger addshopcar">秒杀抢购</a>

5、品优购-----秒杀支付

5.1、需求分析

用户成功下单后，跳转到支付页面。支付页显示微信支付二维码。用户完成支付后，保存订单到数据库。

5.2、生成支付二维码

（1）后端代码

（a）pinyougou-seckill-web工程引入pinyougou-pay-interface依赖

（b）修改pinyougou-seckill-interface的SeckillOrderService.java

	/*** 根据用户名查询秒杀订单* @param userId*/public TbSeckillOrder searchOrderFromRedisByUserId(String userId);

（c）修改pinyougou-seckill-service的SeckillOrderServiceImpl.java

	@Overridepublic TbSeckillOrder  searchOrderFromRedisByUserId(String userId) {		return (TbSeckillOrder) redisTemplate.boundHashOps("seckillOrder").get(userId);}

（d）在pinyougou-seckill-web新建PayController.java

/*** 支付控制层* @author Administrator**/
@RestController
@RequestMapping("/pay")
public class PayController {@Referenceprivate  WeixinPayService weixinPayService;@Referenceprivate SeckillOrderService seckillOrderService;	/*** 生成二维码* @return*/@RequestMapping("/createNative")public Map createNative(){//获取当前用户		String userId=SecurityContextHolder.getContext().getAuthentication().getName();//到redis查询秒杀订单TbSeckillOrder seckillOrder = seckillOrderService.searchOrderFromRedisByUserId(userId);//判断秒杀订单存在if(seckillOrder!=null){long fen=  (long)(seckillOrder.getMoney().doubleValue()*100);//金额（分）return weixinPayService.createNative(seckillOrder.getId()+"",+fen+"");}else{return new HashMap();}		}
}

（2）前端代码

将pinyougou-cart-web工程的payService.js payController.js pay.html qrious.min.js 拷贝到pinyougou-seckill-web工程 payController.js暂时注释对查询的调用。

5.3、支付成功保存订单

（1）后端代码

（a）修改pinyougou-seckill-interface的SeckillOrderService.java，定义方法

/*** 支付成功保存订单* @param userId* @param orderId
*/
public void saveOrderFromRedisToDb(String userId,Long orderId,String transactionId);

（b）在pinyougou-seckill-service的SeckillOrderServiceImpl.java实现该方法

	@Overridepublic void saveOrderFromRedisToDb(String userId, Long orderId, String transactionId) {System.out.println("saveOrderFromRedisToDb:"+userId);//根据用户ID查询日志TbSeckillOrder seckillOrder = (TbSeckillOrder) redisTemplate.boundHashOps("seckillOrder").get(userId);if(seckillOrder==null){throw new RuntimeException("订单不存在");}//如果与传递过来的订单号不符if(seckillOrder.getId().longValue()!=orderId.longValue()){throw new RuntimeException("订单不相符");}		seckillOrder.setTransactionId(transactionId);//交易流水号seckillOrder.setPayTime(new Date());//支付时间seckillOrder.setStatus("1");//状态seckillOrderMapper.insert(seckillOrder);//保存到数据库redisTemplate.boundHashOps("seckillOrder").delete(userId);//从redis中清除}

（c）修改pinyougou-seckill-web的PayController.java，增加查询的方法

	/*** 查询支付状态* @param out_trade_no* @return*/@RequestMapping("/queryPayStatus")public Result queryPayStatus(String out_trade_no){//获取当前用户		String userId=SecurityContextHolder.getContext().getAuthentication().getName();Result result=null;		int x=0;		while(true){//调用查询接口Map<String,String> map = weixinPayService.queryPayStatus(out_trade_no);if(map==null){//出错			result=new  Result(false, "支付出错");break;}			if(map.get("trade_state").equals("SUCCESS")){//如果成功				result=new  Result(true, "支付成功");				seckillOrderService.saveOrderFromRedisToDb(userId, Long.valueOf(out_trade_no), map.get("transaction_id"));break;}			try {Thread.sleep(3000);//间隔三秒} catch (InterruptedException e) {e.printStackTrace();}	x++;//设置超时时间为5分钟if(x>100){result=new  Result(false, "二维码超时");break;}			}return result;}

（2）前端代码

调用查询的方法，参见pinyougou-cart-web工程。

queryPayStatus(response.out_trade_no);//查询支付状态

5.4、订单超时处理

当用户下单后5分钟尚未付款应该释放订单，增加库存

（1）删除缓存中的订单

（a）修改pinyougou-seckill-interface的SeckillOrderService.java

	/*** 从缓存中删除订单* @param userId* @param orderId*/public void deleteOrderFromRedis(String userId,Long orderId);

（b）修改pinyougou-seckill-service的SeckillOrderServiceImpl.java

@Overridepublic void deleteOrderFromRedis(String userId, Long orderId) {//根据用户ID查询日志TbSeckillOrder seckillOrder = (TbSeckillOrder) redisTemplate.boundHashOps("seckillOrder").get(userId);if(seckillOrder!=null &&seckillOrder.getId().longValue()== orderId.longValue() ){redisTemplate.boundHashOps("seckillOrder").delete(userId);//删除缓存中的订单//恢复库存//1.从缓存中提取秒杀商品		TbSeckillGoods seckillGoods=(TbSeckillGoods)redisTemplate.boundHashOps("seckillGoods").get(seckillOrder.getSeckillId());if(seckillGoods!=null){seckillGoods.setStockCount(seckillGoods.getStockCount()+1);	
redisTemplate.boundHashOps("seckillGoods").put(seckillOrder.getSeckillId(), seckillGoods);//存入缓存}			 }	}

（2）关闭微信订单

（a）修改pinyougou-pay-interface 的WeixinPayService接口

	/*** 关闭支付* @param out_trade_no* @return*/public Map closePay(String out_trade_no);

（b）修改pinyougou-pay-service的WeixinPayServiceImpl

@Overridepublic Map closePay(String out_trade_no) {Map param=new HashMap();param.put("appid", appid);//公众账号IDparam.put("mch_id", partner);//商户号param.put("out_trade_no", out_trade_no);//订单号param.put("nonce_str", WXPayUtil.generateNonceStr());//随机字符串String url="https://api.mch.weixin.qq.com/pay/closeorder";try {String xmlParam = WXPayUtil.generateSignedXml(param, partnerkey);HttpClient client=new HttpClient(url);client.setHttps(true);client.setXmlParam(xmlParam);client.post();String result = client.getContent();Map<String, String> map = WXPayUtil.xmlToMap(result);System.out.println(map);return map;} catch (Exception e) {e.printStackTrace();return null;}		}

（3）超时调用服务

修改pinyougou-seckill-web的PayController.java

	/*** 查询支付状态* @param out_trade_no* @return*/@RequestMapping("/queryPayStatus")public Result queryPayStatus(String out_trade_no){//获取当前用户		String userId=SecurityContextHolder.getContext().getAuthentication().getName();Result result=null;		int x=0;		while(true){........try {Thread.sleep(3000);//间隔三秒} catch (InterruptedException e) {e.printStackTrace();}	//不让循环无休止地运行定义变量，如果超过了这个值则退出循环，设置时间为1分钟x++;if(x>20){				result=new  Result(false, "二维码超时");	//1.调用微信的关闭订单接口（学员实现）Map<String,String> payresult = weixinPayService.closePay(out_trade_no);				if( !"SUCCESS".equals(payresult.get("result_code")) ){//如果返回结果是正常关闭if("ORDERPAID".equals(payresult.get("err_code"))){result=new Result(true, "支付成功");	seckillOrderService.saveOrderFromRedisToDb(userId, Long.valueOf(out_trade_no), map.get("transaction_id"));}					}				if(result.isSuccess()==false){System.out.println("超时，取消订单");//2.调用删除seckillOrderService.deleteOrderFromRedis(userId, Long.valueOf(out_trade_no));	}				break;}			}return result;}

（3）前端代码

pinyougou-seckill-web的payController.js

//查询支付状态 queryPayStatus=function(out_trade_no){payService.queryPayStatus(out_trade_no).success(function(response){if(response.success){location.href="paysuccess.html#?money="+$scope.money;}else{					if(response.message=='二维码超时'){location.href="payTimeOut.html";	}else{location.href="payfail.html";}								}				});}

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

双眼皮久目技术
...
2024/4/30 20:31:56
超声波双眼皮与全切
...
2024/4/21 12:53:14
江门双眼皮神
...
2024/4/30 21:00:01
江门双眼皮大神哥
...
2024/4/30 20:52:01
做个双眼皮多少钱定相信南昌同济
...
2024/4/30 23:39:00
angular1页面下滑
经过： 当前页面调用全局组件：例如拍照->调起后>退出拍照， 结果： 页面最底部，按键下滑。像超出隐藏那样，怎么也画不下去 fixed的定位弹层也下去了....
2024/4/21 12:53:11
杭州市双眼皮医院哪家最好
...
2024/4/21 12:53:09
双眼皮做了会下垂吗
...
2024/4/21 12:53:08
切双眼皮杭州市第一人民医院
...
2024/4/21 12:53:07
白玉龙美莱广州健丽医美割杭州市双眼皮医院好
...
2024/4/21 12:53:07
双眼皮手术有几种精益6金宪俊
...
2024/4/20 4:10:24
汕头双眼皮6舒心华美
...
2024/4/20 16:12:19
双眼皮手术做得不满意怎么办
...
2024/4/20 16:12:18
杭州拉双眼皮电话5珈禾
...
2024/4/20 16:12:17
双眼皮多宽美
...
2024/4/21 12:53:06
18、angular1之分页组件（包含在复杂弹窗组件里，分页组件包含勾选、过滤、拖拽、翻页记忆、请求服务、转圈服务、简单弹窗组件、插槽ng-transclude）
<!DOCTYPE html> <html lang"en" ng-app"myModel"> <head><meta charset"UTF-8"><title>勾选和分页组件之angular1.6.2版</title><script type"text/javascript" src"https://cdn.bootcs…...
2024/4/21 12:53:05
activiti自定义流程之整合（三）：整合自定义表单创建模型
本来在创建了表单之后应该是表单列表和预览功能，但是我看了看整合的代码，和之前没有用angularjs的基本没有什么变化，一些极小的变动也只是基于angularjs的语法，因此完全可以参考之前说些的表单列表展示相关的内容，这里…...
2024/4/29 12:41:09
割双眼皮最佳年龄先进8金宪俊
...
2024/4/21 12:53:03
angular和ionic_使用ionic 4和angular添加徽章通知
angular和ionicSo you have an app that you’ve been working on for a while, and you can picture the perfect item to add next. A way for people who use your app to know when they have something that needs their attention.因此，您有一个已经使用了一段…...
2024/4/21 12:53:01
双眼皮做哪种好6细致金宪俊
...
2024/4/21 12:53:01

品优购电商系统开发----秒杀解决方案（19）

课程目标

目标1：能够说出秒杀实现思路

目标2：实现秒杀频道首页功能

目标3：实现秒杀商品详细页功能

目标4：实现秒杀下单功能

目标5：实现秒杀支付功能

1、秒杀业务分析

1.1、需求分析

秒杀商品通常有两种限制：库存限制、时间限制。

需求：

（1）商家提交秒杀商品申请，录入秒杀商品数据，主要包括：商品标题、原价、秒杀价、商品图片、介绍等信息

（2）运营商审核秒杀申请

（3）秒杀频道首页列出秒杀商品（进行中的）点击秒杀商品图片跳转到秒杀商品详细页。

（4）商品详细页显示秒杀商品信息，点击立即抢购实现秒杀下单，下单时扣减库存。当库存为0或不在活动期范围内时无法秒杀。

（5）秒杀下单成功，直接跳转到支付页面（微信扫码），支付成功，跳转到成功页，填写收货地址、电话、收件人等信息，完成订单。

（6）当用户秒杀下单5分钟内未支付，取消预订单，调用微信支付的关闭订单接口，恢复库存。

1.2、数据库表分析

Tb_seckill_goods 秒杀商品表

Tb_seckill_order 秒杀订单表

1.3、秒杀实现思路

1.4、工程搭建与准备

（1）工程模块搭建

（a）创建秒杀服务接口模块 pinyougou-seckill-interface ，依赖pinyougou-pojo

（b）创建秒杀服务模块pinyougou-seckill-service (war)，pom.xml引入依赖参见其它服务工程,依赖 pinyougou-seckill-interface ， Tomcat7插件运行端口为9009。添加web.xml、 spring 配置文件参见其它服务工程, dubbox的端口为20889。

（c）创建秒杀频道web模块 pinyougou-seckill-web(war) pom.xml引入依赖参见cart_web工程(需添加单点登录和权限控制)，依赖 pinyougou-seckill-interface ，Tomcat7插件运行端口为9109 添加web.xml、 spring 配置文件参见cart_web工程。

将秒杀相关的页面及资源拷贝到此模块。添加angularJS.

（2）代码生成

运用《黑马程序员代码生成器》生成代码，拷入工程

1.5、秒杀商品后台管理（学员完成）

运营商系统web模块pinyougou-manager-web依赖 pinyougou-seckill-interface

商家系统web模块pinyougou-shop-web依赖pinyougou-seckill-interface

学员实现代码：

（1）商家后台

（a）秒杀商品列表

（b）秒杀商品申请

（c）秒杀订单查询

（2）运营商后台

（a）待审核秒杀商品列表

（b）秒杀商品审核

（c）秒杀订单查询

2、品优购-秒杀频道首页

2.1、需求分析

秒杀频道首页，显示正在秒杀的商品（已经开始，未结束的商品）

2.2、后端代码

（1）服务接口层

（a）修改pinyougou-seckill-interface的SeckillGoodsService.java

（2）服务实现层

修改pinyougou-seckill-service的SeckillGoodsServiceImpl.java

（3）控制层

修改pinyougou-seckill-web的SeckillGoodsController.java

2.3、前端代码实现

（1）服务层

在pinyougou-seckill-web创建 seckillGoodsService.js

（2）控制层

在pinyougou-seckill-web创建seckillGoodsController.js

（3）页面

修改seckill-index.html,引入js

指令

循环列表的实现

2.4、缓存处理

修改pinyougou-seckill-service的SeckillGoodsServiceImpl.java

3、品优购-秒杀详细页

3.1、需求分析

商品详细页显示秒杀商品信息。

3.2、显示详细页信息

（1）后端代码

修改pinyougou-seckill-interface的SeckillGoodsService

修改pinyougou-seckill-service的SeckillGoodsServiceImpl.java

修改pinyougou-seckill-web的SeckillGoodsController

增加超时时间设置

（2）前端代码

pinyougou-seckill-web 的seckillGoodsService.js

pinyougou-seckill-web 的seckillGoodsController.js ，引入$location服务

修改seckill-item.html ，引入js

指令

用表达式显示标题

图片

价格

介绍

我先现在先做一个简单的例子：10秒倒计时，首先引入$interval , 控制层编写代码如下：