11 跨域 支付 秒杀.txt

UP 返回
day17 
对应视频 E:\2019年4月黑马程序员教程\05-黑马JavaEE49期全套\17品优购电商系统开发\阶段一\17跨域解决方案与提交订单

1.跨域和CORS
  访问的网址中,协议、域名、端口有任何一个不同,都被当作是不同的域。js中向不同域的地址请求数据时,就会有跨域问题
    改造模块pinyougou-page-web,修改149187842867969.html中对应的请求,访问 http://localhost:9105/149187842867969.html ,点击加入购物车,会向http://localhost:9107/cart/addGoodsToCartList.do 发送请求,就会有跨域问题:
      !!@@D:\MyJAR_Project\WordsCollection\refer\202204172.png_1795_121_1@@!!
  CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
    它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。
    对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
    因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
      !!@@D:\MyJAR_Project\WordsCollection\refer\202204173.png_561_614_0.4@@!!
    服务器发送真正的请求之前会先发送一个预请求Preflight Request,并接收到服务器的预返回Preflight Response。预返回中的Access-Control-Allow-Origin包含了服务器允许跨域请求的域信息
	Preflight Request							Preflight Response
	!!@@D:\MyJAR_Project\WordsCollection\refer\202204174.png_696_247_0.5@@!!	!!@@D:\MyJAR_Project\WordsCollection\refer\202204175.png_718_164_0.5@@!!

  修改后台代码:
	!!@@D:\MyJAR_Project\WordsCollection\refer\202204176.png_1081_114_1@@!!
  修改前台代码:
	!!@@D:\MyJAR_Project\WordsCollection\refer\202204177.png_814_106_1@@!!
  修改后9105的商品详情页点击加入购物车就可以成功跳转购物车页面cart.html
  CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器,一方面要服务器同意,指定Access-Control-Allow-Credentials字段。另一方面,开发者必须在AJAX请求中打开withCredentials属性。
	
	springMVC的版本在4.2或以上版本,可以使用注解实现跨域, 我们只需要在需要跨域的方法上添加注解@CrossOrigin即可
	@CrossOrigin(origins="http://localhost:9105",allowCredentials="true")
	allowCredentials="true"  可以缺省

  添加订单结算页面getOrderInfo.html,该页面可在购物车页面cart.html点击结算跳转到,页面显示登录用户的收货地址(收货地址仅完成了查询,修改需要自己实现),支付方式,并将购物车中的订单信息再次展示一遍(格式有些区别),获取总数和价格
	用户地址信息表tb_address	 is_default表示默认地址,进入页面需要自动选中(测试使用的账号为test003 123654)
	订单主表tb_order	 payment_type对应页面的支付方式。该表每一条记录对应购物车中的一个商家,订单明细表tb_order_item对应每一个商品

  创建模块pinyougou-order-interface,pinyougou-order-service(端口9008,dubbox 20888),cart的web引用pinyougou-order-interface,对应OrderController.java
	订单表没有设置主键自增,因为这个表会占用很大的存储,后面需要数据库分片,这样在不同的数据库中就有可能因为自动递增出现重复的主键。
		!!@@D:\MyJAR_Project\WordsCollection\refer\202204182.png_359_76_1@@!!
	本模块使用推特的雪花算法 (IdWorker.java),通过spring配置文件的方式注入参数
		!!@@D:\MyJAR_Project\WordsCollection\refer\202204183.png_865_263_0.5@@!!

  本次课程最终流程:
	1.启动以下服务: (user-service cart-service cart-web page-web order-service)
	!!@@D:\MyJAR_Project\WordsCollection\refer\202204201.png_737_113_1@@!!
	2.访问 http://localhost:9105/149187842867969.html		选择商品的一些分类,点击 加入购物车,跳转到购物车
			http://localhost:9107/cart.html		该页面展示加入了购物车的所有商品。可以通过加减号改变数量,金额也会随之改变。点击 结算,跳转到支付页
			http://localhost:9107/getOrderInfo.html	该页面展示支付信息,可以选择收件人地址信息等。点击 提交订单,会向订单表插入数据,清空购物车;根据选择的支付方式跳转到不同的支付页面
		

day18
E:\2019年4月黑马程序员教程\05-黑马JavaEE49期全套\17品优购电商系统开发\阶段一\18微信扫码支付

1. 二维码
  1.1 二维码优势
	信息容量大, 可以容纳多达1850个大写字母或2710个数字或500多个汉字
	应用范围广, 支持文字,声音,图片,指纹等等...
	容错能力强, 即使图片出现部分破损也能使用
	成本低, 容易制作
  1.2 二维码容错级别
	L级(低) 7%的码字可以被恢复。
	M级(中) 的码字的15%可以被恢复。
	Q级(四分)的码字的25%可以被恢复。
	H级(高) 的码字的30%可以被恢复。
  1.3 二维码生成插件qrious
	qrious是一款基于HTML5 Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码,你可以控制二维码的尺寸颜色,还可以将生成的二维码进行Base64编码
	!!@@D:\MyJAR_Project\WordsCollection\refer\202204231.png_576_334_1@@!!
2. 微信支付
	支付码申请步骤:
		!!@@D:\MyJAR_Project\WordsCollection\refer\202204301.png_590_720_1@@!!

	开发参考文档:https://pay.weixin.qq.com/wiki/doc/api/index.html
	
	创建pay-interface pay-service(端口10000,教程使用的是9000,但是这个端口被eclipse占用了,所以用不了)模块,service引入wx支付的依赖,同时依赖common,不需要依赖dao层。common添加HTTPS请求的依赖和wx支付相关的配置文件
	cart-web添加对pay-interface的依赖,同时复制二维码生成插件qrious.min.js

	由于没有申请公众号,故无法完成扫码支付,后台采用假装支付成功的方式:
		!!@@D:\MyJAR_Project\WordsCollection\refer\202205121.png_644_55_1@@!!

  本次课程最终流程:
	启动以下服务:
		!!@@D:\MyJAR_Project\WordsCollection\refer\202205122.png_759_114_1@@!!
	访问页面 http://localhost:9107/pay.html 即可进入二维码支付页面,后台采用轮询的方式获取支付状态,并最终页面对应跳转到paysuccess.html / payfail.html
3. 添加支付日志
	支付日志对应表为tb_pay_log,在OrderServiceImpl的add添加购物车方法中,创建支付日志入库,并存入redis;在PayController的支付二维码的生成方法中从redis中获取对应的支付日志,里面可以取到订单号和支付金额,返回给页面扫码
	OrderServiceImpl中添加方法updateOrderStatus用于更新日志和订单支付状态,清除缓存数据

	!!@@D:\MyJAR_Project\WordsCollection\refer\202206121.png_635_139_1@@!!
	启动redis CAS

	访问 http://localhost:9105/149187842867969.html ,选择商品加入购物车,跳转到 http://localhost:9107/cart.html ,点击结算(可能会跳到登录页),点击支付(默认扫码成功),可以看到tb_pay_log中有对应的记录


day19
E:\2019年4月黑马程序员教程\05-黑马JavaEE49期全套\17品优购电商系统开发\阶段一\18秒杀解决方案

1.秒杀业务说明
	Tb_seckill_goods 秒杀商品表 Tb_seckill_order 秒杀订单表。秒杀商品单独有个表,与商品无关,以后可以考虑建立关联
	秒杀技运用缓存减少数据库瞬间的访问压力,读取商品详细信息时运用缓存,户点击抢购时减少缓存中的库存数量,当库存数为0时或活动期结束时,同步到数据库。 产生的秒杀预订单也不会立刻写到数据库中,而是先写到缓存,当用户付款成功后再写入数据库
	秒杀服务接口模块 pinyougou-seckill-interface ,依赖pinyougou-pojo;秒杀服务模块pinyougou-seckill-service (war),pom.xml引入依赖参见其它服务工程,依赖 pinyougou-seckill-interface , Tomcat7插件运行端口为9009。添加web.xml、 spring 配置文件参见其它服务工程, dubbox的端口为20889;秒杀频道web模块 pinyougou-seckill-web(war)  pom.xml引入依赖参见cart_web工程(需添加单点登录和权限控制),依赖 pinyougou-seckill-interface  ,Tomcat7插件运行端口为9109  添加web.xml、 spring 配置文件参见cart_web工程。

  1.1 秒杀页面的倒计时需要引入$interval模块,在AngularJS中$interval服务用来处理间歇性处理一些事情,格式为:
		 $interval(执行的函数,间隔的毫秒数,运行次数);	运行次数可以缺省,如果缺省则无限循环执行  
	取消执行用cancel方法:$interval.cancel(time);	这个方法的参数是一个函数,即你要停止的行为,传入的其实就是interval函数本身。示例如下:
		$scope.second = 10; 
			time= $interval(function(){ 
			  if($scope.second>0){ 
				$scope.second =$scope.second-1;  			
			  }else{
				  $interval.cancel(time); 		  
				  alert("秒杀服务已结束");
			  }
			},1000);
		
	启动以下服务,访问 http://localhost:9109/ 即可看到待秒杀的商品seckill-index.html,点击立即抢购,跳转到详情页seckill-item.html,点击立即抢购进入支付页面。后台模拟支付成功,跳转支付成功页面,后台可以看到生成了支付记录tb_seckill_order
	!!@@D:\MyJAR_Project\WordsCollection\refer\202207031.png_759_105_1@@!!
	其中transaction_id字段为空,因为无法真的获取到微信支付结果。登录页需要手动访问http://localhost:9100/cas/login,如果一直报错或加载不出来,可以尝试先访问登出页面
	pinyougou-seckill-web的pinyougou-seckill-web中注意配置cas的工程跟地址为当前的项目http://localhost:9109/login/cas

	超时未支付的订单将删除,并恢复数量,同时调用微信支付的关闭订单(见方法WeixinPayServiceImpl.java.closePay)



























DOWN 返回