基于SSM框架大型分布式电商系统开发（17-18）

最新推荐文章于 2023-12-07 10:28:42 发布

顿字有七

最新推荐文章于 2023-12-07 10:28:42 发布

阅读量495

点赞数

分类专栏：毕业项目

本文链接：https://blog.csdn.net/a5f4s6f4a65f4a6sf/article/details/89082263

版权

毕业项目专栏收录该内容

10 篇文章 4 订阅

订阅专栏

前言

跨域解决方案与提交订单+微信扫码支付

第十七章跨域解决方案与提交订单

1.商品详细页跨域请求

1.1需求分析

从商品详细页点击“加入购物车”按钮，将当前商品加入购物车，并跳转到购物车页面。

1.2 JS跨域请求

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。

1.3跨域调用测试

修改pinyougou-page-web 的itemController.js ，引入$http服务，修改addToCart方法

//添加商品到购物车
	$scope.addToCart=function(){
		$http.get('http://localhost:9107/cart/addGoodsToCartList.do?itemId='
				+ $scope.sku.id +'&num='+$scope.num).success(
				 function(response){
					 if(response.success){
						 location.href='http://localhost:9107/cart.html';//跳转到购物车页面
					 }else{
						 alert(response.message);
					 }					 
				 }				
		);				
	}

测试后发现无法跨域调用
XMLHttpRequest cannot load
http://localhost:9107/cart/addGoodsToCartList.do?itemId=112344&num=1.
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:9100’ is therefore not allowed access. The response had HTTP status code 400.

1.4跨域解决方案CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
请求过程如下图:
在这里插入图片描述
Preflight Request：

然后服务器端给我们返回一个Preflight Response

下面我们就开始动手，让我们的购物车工程能够接收跨域请求
（1）首先修改pinyougou-cart-web 的CartController.java的addGoodsToCartList方法，添加
下面两句代码

response.setHeader("Access-Control-Allow-Origin", "http://localhost:9105");
response.setHeader("Access-Control-Allow-Credentials", "true");

Access-Control-Allow-Origin
Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。
他是通过服务器端返回带有Access-Control-Allow-Origin标识的Response header，用来解决资源的跨域权限问题。
使用方法，在response添加 Access-Control-Allow-Origin，例如

Access-Control-Allow-Origin:www.google.com

也可以设置为 * 表示该资源谁都可以用
（2）修改pinyougou-item-web的itemController.js

//添加商品到购物车
$scope.addToCart=function(){
	$http.get('http://localhost:9107/cart/addGoodsToCartList.do?itemId='
	+ $scope.sku.id +'&num='+$scope.num,{'withCredentials':true}).success(
			function(response){
				.......				 
			}				
	);		
}

调用测试，可以实现跨域了。
CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。另一方面，开发者必须在AJAX请求中打开withCredentials属性。否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。

1.5 SpringMVC跨域注解

springMVC的版本在4.2或以上版本，可以使用注解实现跨域, 我们只需要在需要跨域的方法上添加注解@CrossOrigin即可

@CrossOrigin(origins="http://localhost:9105",allowCredentials="true")

allowCredentials=“true” 可以缺省

2.结算页-收件人地址选择

2.1需求与数据库分析

2.1.1需求描述

在结算页实现收件人地址选择功能

2.1.2数据库结构分析

Tb_address 为地址表
在这里插入图片描述

2.2准备工作

2.2.1生成代码

使用《黑马程序员代码生成器》生成代码，并拷贝到工程
（1）AddressService接口拷入pinyougou-user-interface
（2）AddressServiceImpl 类拷入到pinyougou-user-service
（3）pinyougou-cart-web 引入pinyougou-user-interface依赖，AddressController 类拷入到pinyougou-cart-web

2.2.2拷贝页面资源

将getOrderInfo.html拷贝至pinyougou-cart-web的webapp下

2.3实现地址列表

2.3.1后端代码

（1）修改pinyougou-user-interface的AddressService.java，新增方法定义

/**
 * 根据用户查询地址
 * @param userId
 * @return
 */
public List<TbAddress> findListByUserId(String userId );

（2）修改pinyougou-user-service的AddressServiceImpl.java

    /**
	 * 根据用户查询地址
	 * @param userId
	 * @return
	 */
	public List<TbAddress> findListByUserId(String userId ){				
		TbAddressExample example=new TbAddressExample();
		Criteria criteria = example.createCriteria();
		criteria.andUserIdEqualTo(userId);		
		return addressMapper.selectByExample(example);
	}

（3）修改pinyougou-cart-web的AddressController.java

@RequestMapping("/findListByLoginUser")
public List<TbAddress> findListByLoginUser(){
	String userId = SecurityContextHolder.getContext().getAuthentication().getName();
	return addressService.findListByUserId(userId);
}

2.3.2前端代码

（1）pinyougou-cart-web的cartService.js

//获取地址列表
this.findAddressList=function(){
	return $http.get('address/findListByLoginUser.do');	
}

（2）pinyougou-cart-web的cartController.js

//获取地址列表
$scope.findAddressList=function(){
	cartService.findAddressList().success(
		function(response){
			$scope.addressList=response;
		}		
	);		
}

（3）修改getOrderInfo.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/cartService.js">  </script>
<script type="text/javascript" src="js/controller/cartController.js">  </script>

指令

<body ng-app="pinyougou" ng-controller="cartController" ng-init="findAddressList()">

循环列表

<div ng-repeat="address in addressList" >
<div class="con name">
<a href="javascript:;" >{{address.contact}}<span title="点击取消选择">&nbsp;</a>
</div>
<div class="con address"   >{{address.address}}<span>{{address.mobile}}</span>	
	<span class="base" ng-if="address.isDefault=='1'">默认地址</span>
	<span class="edittext"><a data-toggle="modal" data-target=".edit" data-keyboard="false" >编辑</a>&nbsp;&nbsp;<a href="javascript:;">删除</a></span>
</div>
<div class="clearfix"></div>
</div>

显示效果如下：
在这里插入图片描述

2.4地址选择

（1）在orderInfoController.js增加代码

//选择地址
$scope.selectAddress=function(address){
	$scope.address=address;		
}

//判断是否是当前选中的地址
$scope.isSelectedAddress=function(address){
	if(address==$scope.address){
		return true;
	}else{
		return false;
	}		
}

（2）修改页面-点击选择

<div ng-repeat="address in addressList" >
<div class="con name {{isSelectedAddress(address)?'selected':''}}" ><a href="javascript:;"
 ng-click="selectAddress(address)">{{address.contact}}<span title="点击取消选择">&nbsp;</a></div>
<div class="con address">{{address.address}}<span>{{address.mobile}}</span>	
	<span class="base" ng-if="address.isDefault=='1'">默认地址</span>
	<span class="edittext"><a data-toggle="modal" data-target=".edit" data-keyboard="false" >编辑</a>&nbsp;&nbsp;<a href="javascript:;">删除</a></span>
</div>
<div class="clearfix"></div>
</div>

（3）修改页面，显示选择的地址

<div class="fc-receiverInfo">寄送至:{{address.address}} 收货人：{{address.contact}} {{address.mobile}}</div>

2.5默认地址显示

修改orderInfoController.js

//查询当前登录人的地址列表
$scope.findAddressList=function(){
	addressService.findListByLoginUser().success(
		function(response){
			$scope.addressList=response;
			//设置默认地址
			for(var i=0;i< $scope.addressList.length;i++){
				if($scope.addressList[i].isDefault=='1'){
					$scope.address=$scope.addressList[i];
					break;
				}					
			}					
		}
	);		
}

3.结算页-支付方式选择

3.1需求分析

实现支付方式的选择，品优购支持两种支付方式：微信支付和货到付款

3.2支付方式选择

3.2.1前端控制层

cartController.js

    $scope.order={paymentType:'1'};	
    //选择支付方式
	$scope.selectPayType=function(type){
		$scope.order.paymentType= type;
	}

3.2.2页面

getOrderInfo.html

<li class="selected" ng-click="selectPayType('1')">微信付款<span title="点击取消选择"></span></li>
<li ng-click="selectPayType('2')">货到付款<span title="点击取消选择"></span></li>

4.结算页-商品清单与金额显示

4.1需求分析

显示购物车中的商品清单以及合计数量、金额

4.2显示商品清单

（1）页面getOrderInfo.html上初始化调用

<body ng-app="pinyougou" ng-controller="cartController" ng-init="findAddressList();findCartList()">

（2）循环显示商品清单

<div ng-repeat="cart in cartList">
	<ul class="yui3-g" ng-repeat="orderItem in cart.orderItemList">
		<li class="yui3-u-1-6">
			<span><img src="{{orderItem.picPath}}"/></span>
		</li>
		<li class="yui3-u-7-12">
			<div class="desc">{{orderItem.title}}</div>
			<div class="seven">7天无理由退货</div>
		</li>
		<li class="yui3-u-1-12">
			<div class="price">￥{{orderItem.price}}</div>
		</li>
		<li class="yui3-u-1-12">
			<div class="num">X{{orderItem.num}}</div>
		</li>
		<li class="yui3-u-1-12">
			<div class="exit">有货</div>
		</li>
	</ul>
</div>

4.3显示合计金额

修改 getOrderInfo.html

<div class="list">
	<span><i class="number">{{totalValue.totalNum}}</i>件商品，总商品金额</span>
	<em class="allprice">¥{{totalValue.totalMoney.toFixed(2)}}</em>
</div>
......
<div class="fc-price">应付金额:
<span class="price">¥{{totalValue.totalMoney.toFixed(2)}}</span></div>

5.保存订单

5.1需求分析

5.1.1需求描述

点击订单结算页的提交订单，将购物车保存到订单表和订单明细表中，并将购物车数据清除.

5.1.2数据库结构分析

Tb_order为订单主表
在这里插入图片描述

5.2准备工作

5.2.1搭建框架

（1）创建pinyougou-order-interface 引入依赖pinyougou-pojo
（2）创建pinyougou-order-service （WAR）参照其它服务工程引入依赖，添加web.xml spring配置文件 dubbox端口20888 tomcat7运行端口9008
（3）pinyougou-cart-web 引入依赖pinyougou-order-interface

5.2.2生成代码

生成tb_order表相关代码，并拷贝到工程中
在这里插入图片描述

5.2.3分布式ID生成器

我们采用的是开源的twitter( 非官方中文惯称：推特.是国外的一个网站，是一个社交网络及微博客服务) 的snowflake算法。
在这里插入图片描述
（1）将“配置文件/工具类”下的IdWorker.java 拷贝到common工程
（2）在pinyougou-order-service工程的spring配置文件中添加配置

<bean id="idWorker" class="util.IdWorker">
    	<!-- 进程ID -->
    	<constructor-arg index="0" value="0"></constructor-arg>
    	<!-- 数据中心ID -->
    	<constructor-arg index="1" value="0"></constructor-arg>
 </bean>

5.3后端代码

5.3.1服务实现层

修改pinyougou-order-service的OrderServiceImpl.java

    @Autowired
	private RedisTemplate<String, Object> redisTemplate;
	
	@Autowired
	private TbOrderItemMapper orderItemMapper;
	
	@Autowired
	private IdWorker idWorker;
	
	/**
	 * 增加
	 */
	@Override
	public void add(TbOrder order) {
		//得到购物车数据
		List<Cart> cartList = (List<Cart>) 
				redisTemplate.boundHashOps("cartList").get( order.getUserId() );
		for(Cart cart:cartList){
			long orderId = idWorker.nextId();
			System.out.println("sellerId:"+cart.getSellerId());
			TbOrder tborder=new TbOrder();//新创建订单对象
			tborder.setOrderId(orderId);//订单ID
			tborder.setUserId(order.getUserId());//用户名
			tborder.setPaymentType(order.getPaymentType());//支付类型
			tborder.setStatus("1");//状态：未付款
			tborder.setCreateTime(new Date());//订单创建日期
			tborder.setUpdateTime(new Date());//订单更新日期
			tborder.setReceiverAreaName(order.getReceiverAreaName());//地址
			tborder.setReceiverMobile(order.getReceiverMobile());//手机号
			tborder.setReceiver(order.getReceiver());//收货人
            tborder.setSourceType(order.getSourceType());//订单来源
			tborder.setSellerId(cart.getSellerId());//商家ID				
			//循环购物车明细
			double money=0;
			for(TbOrderItem orderItem :cart.getOrderItemList()){		
				orderItem.setId(idWorker.nextId());
				orderItem.setOrderId( orderId  );//订单ID	
				orderItem.setSellerId(cart.getSellerId());
				money+=orderItem.getTotalFee().doubleValue();//金额累加
				orderItemMapper.insert(orderItem);				
			}
			tborder.setPayment(new BigDecimal(money));			
			orderMapper.insert(tborder);	
		}
		redisTemplate.boundHashOps("cartList").delete(order.getUserId());
	}

5.3.3控制层

修改pinyougou-cart-web的OrderController.java

/**
 * 增加
 * @param order
 * @return
 */
@RequestMapping("/add")
	public Result add(@RequestBody TbOrder order){
		//获取当前登录人账号
		String username = SecurityContextHolder.getContext().getAuthentication().getName();
		order.setUserId(username);
		order.setSourceType("2");//订单来源  PC
		try {
			orderService.add(order);
			return new Result(true, "增加成功");
		} catch (Exception e) {
			e.printStackTrace();
			return new Result(false, "增加失败");
		}
	}

5.4前端代码

5.4.1服务层

修改pinyougou-cart-web的cartService.js

//保存订单
this.submitOrder=function(order){
	return $http.post('order/add.do',order);		
}

5.4.2控制层

修改cartController.js

//保存订单
	$scope.submitOrder=function(){
		$scope.order.receiverAreaName=$scope.address.address;//地址
		$scope.order.receiverMobile=$scope.address.mobile;//手机
		$scope.order.receiver=$scope.address.contact;//联系人
		cartService.submitOrder( $scope.order ).success(
			function(response){
				if(response.success){
					//页面跳转
					if($scope.order.paymentType=='1'){//如果是微信支付，跳转到支付页面
						location.href="pay.html";
					}else{//如果货到付款，跳转到提示页面
						location.href="paysuccess.html";
					}					
				}else{
					alert(response.message);	//也可以跳转到提示页面				
				}				
			}				
		);		
	}

5.4.3页面

修改getOrderInfo.html

<a class="sui-btn btn-danger btn-xlarge" ng-click="submitOrder()" >提交订单</a>

将静态原型中的pay.html paysuccess.html payfail.html 拷贝到pinyougou-cart-web中

第18章微信扫码支付

1.二维码

1.1什么是二维码

二维码又称QR Code，QR全称Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。
二维条码/二维码（2-dimensional bar code）是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理：它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。

1.2二维码优势

信息容量大, 可以容纳多达1850个大写字母或2710个数字或500多个汉字
应用范围广, 支持文字,声音,图片,指纹等等…
容错能力强, 即使图片出现部分破损也能使用
成本低, 容易制作

1.3二维码容错级别

L级（低） 7％的码字可以被恢复。
M级（中）的码字的15％可以被恢复。
Q级（四分）的码字的25％可以被恢复。
H级（高）的码字的30％可以被恢复。

1.4二维码生成插件qrious

qrious是一款基于HTML5 Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码，你可以控制二维码的尺寸颜色，还可以将生成的二维码进行Base64编码。
qrious.js二维码插件的可用配置参数如下：

参数	类型	默认值	描述
background	String	"white"	"white"
foreground	String	"black"	二维码的前景颜色。
level	String	"L"	二维码的误差校正级别(L, M, Q, H)。
mime	String	"image/png"	二维码输出为图片时的MIME类型。
size	Number	100	二维码的尺寸，单位像素。
value	String		需要编码为二维码的值

下面的代码即可生成一张二维码

<html>
<head>
<title>二维码入门小demo</title>
</head>
<body>
<img id="qrious">
<script src="qrious.min.js"></script>
<script>
 var qr = new QRious({
	   element:document.getElementById('qrious'),
	   size:250, 	
	   level:'H',	   
	   value:'http://www.baidu.com'
	});
</script>
</body>
</html>

2.微信扫码支付简介

2.1微信扫码支付申请

微信扫码支付是商户系统按微信支付协议生成支付二维码，用户再用微信“扫一扫”完成支付的模式。该模式适用于PC网站支付、实体店单品或订单支付、媒体广告支付等场景。
申请步骤：（了解）
第一步：注册公众号（类型须为：服务号）
请根据营业执照类型选择以下主体注册：个体工商户| 企业/公司| 政府| 媒体| 其他类型。
第二步：认证公众号
公众号认证后才可申请微信支付，认证费：300元/次。
第三步：提交资料申请微信支付
登录公众平台，点击左侧菜单【微信支付】，开始填写资料等待审核，审核时间为1-5个工作日内。
第四步：开户成功，登录商户平台进行验证
资料审核通过后，请登录联系人邮箱查收商户号和密码，并登录商户平台填写财付通备付金打的小额资金数额，完成账户验证。
第五步：在线签署协议
本协议为线上电子协议，签署后方可进行交易及资金结算，签署完立即生效。

2.2开发文档

微信支付接口调用的整体思路：
按API要求组装参数，以XML方式发送（POST）给微信支付接口（URL）,微信支付接口也是以XML方式给予响应。程序根据返回的结果（其中包括支付URL）生成二维码或判断订单状态。
在线微信支付开发文档：
https://pay.weixin.qq.com/wiki/doc/api/index.html
我们在本章课程中会用到”统一下单”和”查询订单”两组API

1.appid：微信公众账号或开放平台APP的唯一标识
2.mch_id：商户号 (配置文件中的partner)
3.partnerkey：商户密钥
4.sign:数字签名, 根据微信官方提供的密钥和一套算法生成的一个加密信息, 就是为了保证交易的安全性
2.3微信支付SDK
微信支付提供了SDK, 大家下载后打开源码，install到本地仓库。
在这里插入图片描述
使用微信支付SDK,在maven工程中引入依赖

<dependency>
	<groupId>com.github.wxpay</groupId>
	<artifactId>wxpay-sdk</artifactId>
	<version>0.0.3</version>
</dependency>

我们主要会用到微信支付SDK的以下功能：
（1）获取随机字符串

WXPayUtil.generateNonceStr()

（2）MAP转换为XML字符串（自动添加签名）

 WXPayUtil.generateSignedXml(param, partnerkey)

（3）XML字符串转换为MAP

WXPayUtil.xmlToMap(result)

2.4 HttpClient工具类

HttpClient是Apache Jakarta Common下的子项目，用来提供高效的、最新的、功能丰富的支持HTTP协议的客户端编程工具包，并且它支持HTTP协议最新的版本和建议。HttpClient已经应用在很多的项目中，比如Apache Jakarta上很著名的另外两个开源项目Cactus和HTMLUnit都使用了HttpClient。
HttpClient通俗的讲就是模拟了浏览器的行为，如果我们需要在后端向某一地址提交数据获取结果，就可以使用HttpClient.
关于HttpClient（原生）具体的使用不属于我们本章的学习内容，我们这里这里为了简化HttpClient的使用，提供了工具类HttpClient（对原生HttpClient进行了封装）
HttpClient工具类使用的步骤

HttpClient client=new HttpClient(请求的url地址);
client.setHttps(true);//是否是https协议
client.setXmlParam(xmlParam);//发送的xml数据
client.post();//执行post请求
String result = client.getContent(); //获取结果

2.5工程搭建与准备工作

（1）建立支付服务接口模块pinyougou-pay-interface （jar）
（2）建立支付服务实现模块pinyougou-pay-service （war）依赖pinyougou-pay-interface 和pinyougou-common 、 spring dubbox 相关依赖、微信SDK （因为不需要连接数据库所以不用引用dao工程）

<dependency>
	<groupId>com.github.wxpay</groupId>
	<artifactId>wxpay-sdk</artifactId>
	<version>0.0.3</version>
</dependency>

添加tomcat插件，运行端口为9000
添加spring配置文件，参见其它服务工程
（3）在pinyougou-common工程中添加工具类HttpClient.java ，并添加依赖

<dependency>
	<groupId>org.apache.httpcomponents</groupId>
	<artifactId>httpclient</artifactId>	  		
</dependency>

添加配置文件weixinpay.properties
appid：微信公众账号或开放平台APP的唯一标识
partner：财付通平台的商户账号
partnerkey：财付通平台的商户密钥
notifyurl: 回调地址
（4）pinyougou-cart-web依赖工程pinyougou-pay-service
（5）将二维码插件QRious 拷贝到pinyougou-cart-web 的plugins目录中

3.品优购-微信支付二维码生成

3.1需求分析与实现思路

3.1.1需求分析

在支付页面上生成支付二维码，并显示订单号和金额
用户拿出手机,打开微信扫描页面上的二维码,然后在微信中完成支付
在这里插入图片描述

3.1.2实现思路

我们通过HttpClient工具类实现对远程支付接口的调用。
接口链接：https://api.mch.weixin.qq.com/pay/unifiedorder
具体参数参见“统一下单”API, 构建参数发送给统一下单的url ，返回的信息中有支付url，根据url生成二维码，显示的订单号和金额也在返回的信息中。

3.2后端代码实现

3.2.1服务接口层

（1）在pinyougou-pay-interface创建包com.pinyougou.pay.service ，包下建立接口

package com.pinyougou.pay.service;
import java.util.Map;
/**
 * 微信支付接口
 * @author Administrator
 *
 */
public interface WeixinPayService {

	/**
	 * 生成微信支付二维码
	 * @param out_trade_no 订单号
	 * @param total_fee 金额(分)
	 * @return
	 */
	public Map createNative(String out_trade_no,String total_fee);
}

3.2.2服务实现层

pinyougou-pay-service创建com.pinyougou.pay.service.impl包，新建类

@Service
public class WeixinPayServiceImpl implements WeixinPayService {

	@Value("${appid}")
	private String appid;
	
	@Value("${partner}")
	private String partner;
	
	@Value("${partnerkey}")
	private String partnerkey;
	
	/**
	 * 生成二维码
	 * @return
	 */
	public Map createNative(String out_trade_no,String total_fee){
		//1.创建参数
		Map<String,String> param=new HashMap();//创建参数
		param.put("appid", appid);//公众号
		param.put("mch_id", partner);//商户号
		param.put("nonce_str", WXPayUtil.generateNonceStr());//随机字符串		
		param.put("body", "品优购");//商品描述
		param.put("out_trade_no", out_trade_no);//商户订单号
		param.put("total_fee",total_fee);//总金额（分）
		param.put("spbill_create_ip", "127.0.0.1");//IP
		param.put("notify_url", "http://test.itcast.cn");//回调地址(随便写)
		param.put("trade_type", "NATIVE");//交易类型
		try {
			//2.生成要发送的xml 
			String xmlParam = WXPayUtil.generateSignedXml(param, partnerkey);
			System.out.println(xmlParam);	
			HttpClient client=new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder");
			client.setHttps(true);
			client.setXmlParam(xmlParam);
			client.post();		
			//3.获得结果 
			String result = client.getContent();
			System.out.println(result);
			Map<String, String> resultMap = WXPayUtil.xmlToMap(result);			
			Map<String, String> map=new HashMap<>();
			map.put("code_url", resultMap.get("code_url"));//支付地址
			map.put("total_fee", total_fee);//总金额
			map.put("out_trade_no",out_trade_no);//订单号
			return map;
		} catch (Exception e) {
			e.printStackTrace();
			return new HashMap<>();
		}			
	}
}

3.2.3控制层

pinyougou-cart-web创建PayController.java

/**
 * 支付控制层
 * @author Administrator
 *
 */
@RestController
@RequestMapping("/pay")
public class PayController {
	@Reference
	private  WeixinPayService weixinPayService;
	
	/**
	 * 生成二维码
	 * @return
	 */
	@RequestMapping("/createNative")
	public Map createNative(){
		IdWorker idworker=new IdWorker();		
		return weixinPayService.createNative(idworker.nextId()+"","1");		
	}
}

这里我们订单号通过分布式ID生成器生成，金额暂时写死，后续开发我们再对接业务系统得到订单号和金额
浏览器测试
在这里插入图片描述

3.3前端代码实现

3.3.1服务层

在pinyougou-cart-web创建 payService.js

app.service('payService',function($http){
	//本地支付
	this.createNative=function(){
		return $http.get('pay/createNative.do');
	}	
});

3.3.2控制层

在pinyougou-cart-web 创建payController.js

app.controller('payController' ,function($scope ,payService){	
	//本地生成二维码
	$scope.createNative=function(){
		payService.createNative().success(
			function(response){
				$scope.money=  (response.total_fee/100).toFixed(2) ;	//金额
				$scope.out_trade_no= response.out_trade_no;//订单号
				//二维码
		    	var qr = new QRious({
		 		   element:document.getElementById('qrious'),
		 		   size:250,
		 		   level:'H',
		 		   value:response.code_url
		 		});				
			}
		);		
	}		
});

3.3.3页面

修改pay.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/payService.js">  </script>
    <script type="text/javascript" src="js/controller/payController.js">  </script>
    <script type="text/javascript" src="plugins/qrious.min.js"></script>

指令

<body ng-app="pinyougou" ng-controller="payController" ng-init="createNative()">

设置二维码图片的ID

<p class="red"></p>                      
         <div class="fl code">
              <img id="qrious">
              <div class="saosao">
                  <p>请使用微信扫一扫</p>
                  <p>扫描二维码支付</p>
	         </div>
	      </div>

显示订单号

订单号：{{out_trade_no}}

显示金额

<em  class="orange money">￥{{money}}</em>元

4.品优购-检测支付状态

4.1需求分析及实现思路

4.1.1需求分析

当用户支付成功后跳转到成功页面
在这里插入图片描述
当返回异常时跳转到错误页面

4.1.2实现思路

我们通过HttpClient工具类实现对远程支付接口的调用。
接口链接：https://api.mch.weixin.qq.com/pay/orderquery
具体参数参见“查询订单”API, 我们在controller方法中轮询调用查询订单（间隔3秒），当返回状态为success时，我们会在controller方法返回结果。前端代码收到结果后跳转到成功页面。

4.2检测支付状态-后端代码

4.2.1服务接口层

在pinyougou-pay-interface的WeixinPayService.java中新增方法定义

/**
 * 查询支付状态
 * @param out_trade_no
 */
public Map queryPayStatus(String out_trade_no);

4.2.2服务实现层

在pinyougou-pay-service的WeixinPayServiceImpl.java中实现方法

@Override
public Map queryPayStatus(String out_trade_no) {
	Map param=new HashMap();
	param.put("appid", appid);//公众账号ID
	param.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/orderquery";		
	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;
	}	
}

4.2.3控制层

在pinyougou-cart-web的PayController.java新增方法

/**
	 * 查询支付状态
	 * @param out_trade_no
	 * @return
	 */
	@RequestMapping("/queryPayStatus")
	public Result queryPayStatus(String out_trade_no){
		Result result=null;		
		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, "支付成功");
				break;
			}			
			try {
				Thread.sleep(3000);//间隔三秒
			} catch (InterruptedException e) {
				e.printStackTrace();
			}							
		}
		return result;
	}

4.3检测支付状态-前端代码

4.3.1服务层

在payService.js新增方法

//查询支付状态
this.queryPayStatus=function(out_trade_no){
	return $http.get('pay/queryPayStatus.do?out_trade_no='+out_trade_no);
}

4.3.2控制层

在payController.js中新增方法

//查询支付状态 
	queryPayStatus=function(out_trade_no){
		payService.queryPayStatus(out_trade_no).success(
			function(response){
				if(response.success){
					location.href="paysuccess.html";
				}else{					
					location.href="payfail.html";								
				}				
			}
		);
	}

在createNative方法的回调方法中调用此查询方法

//本地生成二维码
$scope.createNative=function(){
	payService.createNative().success(
		function(response){
			..........		    	
	     	queryPayStatus(response.out_trade_no);//查询支付状态				
		}
	);		
}

4.4查询时间限制

4.4.1问题分析

如果用户到了二维码页面一直未支付，或是关掉了支付页面，我们的代码会一直循环调用微信接口，这样会对程序造成很大的压力。所以我们要加一个时间限制或是循环次数限制，当超过时间或次数时，跳出循环。

4.4.2代码完善

（1）修改pinyougou-cart-web工程PayController.java的queryPayStatus方法

@RequestMapping("/queryPayStatus")
	public Result queryPayStatus(String out_trade_no){
		Result result=null;		
		int x=0;		
		while(true){
			//调用查询接口
			.......		
			try {
				Thread.sleep(3000);//间隔三秒
			} catch (InterruptedException e) {
				e.printStackTrace();
			}	
			//为了不让循环无休止地运行，我们定义一个循环变量，如果这个变量超过了这个值则退出循环，设置时间为5分钟
			x++;
			if(x>=100){
				result=new  Result(false, "二维码超时");
				break;
			}
		}
		return result;
	}

（2）修改payController.js

//查询支付状态 
	queryPayStatus=function(out_trade_no){
		payService.queryPayStatus(out_trade_no).success(
			function(response){
				if(response.success){
					location.href="paysuccess.html";
				}else{
					if(response.message=='二维码超时'){
						$scope.createNative();//重新生成二维码					
					}else{
						location.href="payfail.html";
					}					
				}				
			}
		);
	}

4.5支付成功页面显示金额

4.5.1问题分析

现在我们支付成功页面显示的是固定的值，怎么显示真正的支付金额呢？我们这里可以使用angularJS的页面传参来解决。

4.5.2代码完善

（1）修改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=='二维码超时'){
						$scope.createNative();//重新生成二维码					
					}else{
						location.href="payfail.html";
					}					
				}				
			}
		);
	}

（2）在payController.js中引入$location服务，新增方法

   	 //获取金额
	$scope.getMoney=function(){
		return $location.search()['money'];
	}

（3）修改页面paysuccess.html ，引入JS (与pay.html相同) ，body添加指令

 ng-app="pinyougou" ng-controller="payController"

用表达式显示金额

<p>支付金额：￥{{getMoney()}}元</p>

5.品优购-支付日志

5.1需求分析

我们现在系统还有两个问题需要解决：
（1）系统中无法查询到支付记录
（2）支付后订单状态没有改变
我们现在就来解决这两个问题。
实现思路：
（1）在用户下订单时，判断如果为微信支付，就想支付日志表添加一条记录，信息包括支付总金额、订单ID（多个）、用户ID 、下单时间等信息，支付状态为0（未支付）
（2）生成的支付日志对象放入redis中，以用户ID作为key，这样在生成支付二维码时就可以从redis中提取支付日志对象中的金额和订单号。
（3）当用户支付成功后，修改支付日志的支付状态为1（已支付），并记录微信传递给我们的交易流水号。根据订单ID（多个）修改订单的状态为2（已付款）。

5.2插入日志记录

修改pinyougou-order-service工程OrderServiceImpl.java 的add方法。
内容：判断如果支付方式为微信支付，向数据库插入支付日志记录，并放入redis存储

    @Autowired
	private TbPayLogMapper payLogMapper;
	/**
	 * 增加
	 */
	public void add(TbOrder order) {
		List<Cart> cartList = (List<Cart>) 
		redisTemplate.boundHashOps("cartList").get( order.getUserId() );
		List<String> orderIdList=new ArrayList();//订单ID列表
		double total_money=0;//总金额 （元）
		for(Cart cart:cartList){
			long orderId = idWorker.nextId();
              ......			
			orderIdList.add(orderId+"");//添加到订单列表	
			total_money+=money;//累加到总金额 
		}
		if("1".equals(order.getPaymentType())){//如果是微信支付		
			TbPayLog payLog=new TbPayLog();
			String outTradeNo=  idWorker.nextId()+"";//支付订单号
			payLog.setOutTradeNo(outTradeNo);//支付订单号
			payLog.setCreateTime(new Date());//创建时间
			//订单号列表，逗号分隔
			String ids=orderIdList.toString().replace("[", "").replace("]", "").replace(" ", "");
			payLog.setOrderList(ids);//订单号列表，逗号分隔
			payLog.setPayType("1");//支付类型
			payLog.setTotalFee( (long)(total_money*100 ) );//总金额(分)
			payLog.setTradeState("0");//支付状态
			payLog.setUserId(order.getUserId());//用户ID			
			payLogMapper.insert(payLog);//插入到支付日志表			
			redisTemplate.boundHashOps("payLog").put(order.getUserId(), payLog);//放入缓存			
		}		
		redisTemplate.boundHashOps("cartList").delete(order.getUserId());		
	}

5.3读取支付日志

5.3.1服务接口层

pinyougou-order-interface 工程的OrderService.java 新增方法

    /**
	 * 根据用户查询payLog
	 * @param userId
	 * @return
	 */
	public TbPayLog searchPayLogFromRedis(String userId);

5.3.2服务实现层

pinyougou-order-service的OrderServiceImpl.java实现方法

@Override
public TbPayLog searchPayLogFromRedis(String userId) {
return (TbPayLog) redisTemplate.boundHashOps(“payLog”).get(userId);
}

5.3.3控制层

修改pinyougou-cart-web工程PayController.java的createNative方法
实现思路：调用获取支付日志对象的方法，得到订单号和金额

    @Reference
	private OrderService orderService;
	/**
	 * 生成二维码
	 * @return
	 */
	@RequestMapping("/createNative")
	public Map createNative(){
		//获取当前用户		
		String userId=SecurityContextHolder.getContext().getAuthentication().getName();
		//到redis查询支付日志
		TbPayLog payLog = orderService.searchPayLogFromRedis(userId);
		//判断支付日志存在
		if(payLog!=null){
			return weixinPayService.createNative(payLog.getOutTradeNo(),payLog.getTotalFee()+"");
		}else{
			return new HashMap();
		}		
	}

5.4修改订单状态

5.4.1服务接口层

在pinyougou-order-interface的OrderService.java新增方法定义

/**
 * 修改订单状态
 * @param out_trade_no 支付订单号
 * @param transaction_id 微信返回的交易流水号
 */
public void updateOrderStatus(String out_trade_no,String transaction_id);

5.4.2服务实现层

在pinyougou-order-service工程OrderServiceImpl.java实现该方法.
这个方法主要做三件事：
1.修改支付日志状态
2.修改关联的订单的状态
3.清除缓存中的支付日志对象

    @Override
	public void updateOrderStatus(String out_trade_no, String transaction_id) {
		//1.修改支付日志状态
		TbPayLog payLog = payLogMapper.selectByPrimaryKey(out_trade_no);
		payLog.setPayTime(new Date());
		payLog.setTradeState("1");//已支付
		payLog.setTransactionId(transaction_id);//交易号
		payLogMapper.updateByPrimaryKey(payLog);		
		//2.修改订单状态
		String orderList = payLog.getOrderList();//获取订单号列表
		String[] orderIds = orderList.split(",");//获取订单号数组
		
		for(String orderId:orderIds){
			TbOrder order = orderMapper.selectByPrimaryKey( Long.parseLong(orderId) );
			if(order!=null){
				order.setStatus("2");//已付款
				orderMapper.updateByPrimaryKey(order);
			}			
		}
		//清除redis缓存数据		
		redisTemplate.boundHashOps("payLog").delete(payLog.getUserId());
	}

5.4.3控制层

修改pinyougou-cart-web的PayController.java。在微信支付接口有成功返回状态时，调用修改状态的方法

/**
 * 查询支付状态
 * @param out_trade_no
 * @return
 */
@RequestMapping("/queryPayStatus")
public Result queryPayStatus(String out_trade_no){
	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, "支付成功");
			//修改订单状态
			orderService.updateOrderStatus(out_trade_no, map.get("transaction_id"));
			break;
		}			
		try {
			Thread.sleep(3000);//间隔三秒
		} catch (InterruptedException e) {
			e.printStackTrace();
		}	
		//为了不让循环无休止地运行，我们定义一个循环变量，如果这个变量超过了这个值则退出循环，设置时间为5分钟
	     ......			
	}
	return result;
}