【九月打卡】第11天 Java支付全家桶 企业级各类支付手段一站式解决方案（5-8）

课程名称：Java支付全家桶 企业级各类支付手段一站式解决方案

课程章节：5-8 后端系统查询支付结果

主讲老师：神思者

课程内容：

今天课程学习的主要知识点内容包括：
后端系统查询支付结果的请求封装、后端接口定义和编写、前端页面接口调用的实现、如何将前端 ajax 变成同步请求。

课程收获：

1、后端系统查询支付结果的请求封装，将前端的请求参数进行封装，其主要代码实现如下：

@Data
@NoArgsConstructor
public class UpdateOrderStatusForm implements Serializable {

    @NotNull(message = "orderId 不能为空")
    @ApiModelProperty(value = "订单id", required = true)
    private Integer orderId;

}

2、后端接口定义和编写，在 controller 层定义后端接口，加上@Login表示需要用户登录后才能访问（头部token通过校验），在该方法内，接收前端的传参，处理自己的逻辑，其中最主要的是调用微信商户平台的查询接口，从微信商户平台放回的结果内解析出付款状态。学习过程中发现，这个接口不应该仅仅是查询状态，应该还要负责根据结果修改订单状态，故将接口的名字改成“updateOrderPayStatus”，其主要代码实现如下：

    @Login
    @PostMapping("/updateOrderPayStatus")
    @ApiOperation("更新商品支付订单状态")
    public R updateOrderPayStatus(@RequestBody UpdateOrderStatusForm form, @RequestHeader Map header) {
        ValidatorUtils.validateEntity(form);
        String token = header.get("token").toString();
        int userId = Integer.parseInt(jwtUtils.getClaimByToken(token).getSubject());
        int orderId = form.getOrderId();
        OrderEntity order = orderService.getOne(
                Wrappers.<OrderEntity>lambdaQuery()
                        .eq(OrderEntity::getId, orderId)
                        .eq(OrderEntity::getUserId, userId)
                        .last("limit 1")
        );
        if (null == order) {
            return R.error("用户与订单不匹配");
        }

        try {
            Map map = new HashMap();
            map.put("out_trade_no", order.getCode());
            WXPay wxPay = new WXPay(myWXPayConfig);
            Map<String, String> result = wxPay.orderQuery(map);
            String returnCode = result.get("return_code");
            String resultCode = result.get("result_code");
            String tradeState = result.get("trade_state");
            if ("SUCCESS".equals(returnCode) && "SUCCESS".equals(resultCode) && "SUCCESS".equals(tradeState)) {
                order.setStatus(2);
                order.setPaymentType(1);
                orderService.updateById(order);
                return R.ok("订单状态已修改");
            }
        } catch (Exception e) {
            e.printStackTrace();
            return R.error("查询支付订单失败");
        }

        return R.error("订单状态未修改");
    }

3、前端页面接口调用的实现
（1）接口地址配置，修改 config.js 文件，写入后端请求的地址，主要内容如下：

......
let wxUrl = {
	......
	updateOrderPayStatus: baseUrl + "/app/wx/updateOrderPayStatus",
}

（2）在 order.js 文件内，封装ajax请求方法，实现接口的调用，主要内容如下：

function queryPayStatus(orderId) {
	let result = false;
	$.ajax({
		url: wxUrl.updateOrderPayStatus,
		method: "post",
		dataType: "json",
		contentType: "application/json",
		async: false,
		beforeSend: (req) => {
			req.setRequestHeader("token", localStorage.getItem("token"));
		},
		data: JSON.stringify({
			"orderId": orderId
		}),
		success: (resp) => {
			console.log(resp);
			let code = resp.code;
			if (0 == code) {
				result = true;
			}
		},
		fail: (err) => {
			console.log(err.errMsg);
		}
	});
	return result;
}

4、如何将前端 ajax 变成同步请求？
默认情况下，前端 ajax 的请求是异步的，可以通过添加 async: fasle 将其改变成同步请求方法。