day16【统计分析功能】/02-尚硅谷-谷粒学院-课程支付流程总结

今天的第一个内容呢，咱就把昨天我们在支付之后这个流程给大家再做个总结，因为这个流程要稍微麻烦一点啊，我这里边详细来说一下。也就是我现在比如说我来到这里边，当我点击某一个课程，进入到详情，我点立即购买，咱们要生成订单，当我点去支付，咱是不是到这个二维码界面，而在二维码界面，比如说我现在用微信一扫，咱是不是能支付，我支付之后它是不是要再回到我那个详情页面呀？那就是支付之后再回到协页面，这过程我们是怎么做到的？因为之前比较简单，就是你生成订单，生成二维码，主要是后面的过程，给各位做个详细的一个分析，那我们来啊看一下这过程我们是怎么做到的。我在图上来画一下啊。支付之后，咱们要回到我们那个详情页面，这个过程咱们是怎么做到的，那我来给大家写一下啊，比如说这个位置我来截个图，咱们一步来分享啊。

首先在里边呢，我们有这个二维码。就是这个啊，而在二维码界面中，我们往下来执行，比如说现在我用这个微信一扫描这个二维码，也就是我们现在完成了这么一个支付。这位置啊，完成了支付，那这完成支付之后，我们要怎么去做呢？给大家就来说这个过程，那咱看一下啊，这个过程中呢，咱就会来到我们的前端中，看我们前端怎么处理的，找到我们昨天写那个页面。来找一下啊，就是现在呢，在我这个订单页面，就是OID页面，大家看到这段代码，当我点去支付的时候，它就去调这个方法，这个方法中呢，我们用了一个路由跳转是不是到这个支付这个页面，就是这个配里边的页面，咱的页面是这个PID啊就到这里边，那我们打开看里边怎么做到的啊，找这页面。

然后大家看啊，在这个页面中呢，我们做的就是。生成微信二维码，咱是调接口，把二维码用voe的组件下载下来啊，咱昨天说到的，然后这里边，比如现在我把这个支付之后，那咱怎么做呢？主要是咱们下面这个流程啊，那给大家来写一下啊，咱是怎么做到的？我写到这个位置。就是我们的做法是这么来实现，首先第一个咱们就是每隔这个三秒钟，就每隔三秒去查询一次，我这个订单的一个支付的一个状态，每隔三秒去查一次，而它的代码在我们里边就这位置体现。大家看里面啊，咱们用了一个Java中一个方法，就之前讲到过，叫set interval，是一个定时器的方法，这方法就表示每隔3000毫秒，又是每隔三秒去直用一次你的这个方法，这个方法就是咱们写那个接口查询支付状态方法，所以咱们就是每隔三秒去查一次我们支付状态。

这个啊是我们做的第一部分，然后咱写第二个，第二个第二个就是当我们查询这个支付状态的时候，如果说这支付并没有完成，那怎么做，咱就在这里一直在等待它完成啊，就是做一个等待。然后第三个继续来写。就是如果说现在我们查询的这个支付状态是一个已经支付的这个状态，那这个时候该怎么做呢？看我里边这个写法啊，大家看这位置，我们的做法就是写了这个代码。

这一代码是什么意思呢？就是咱把这个定时器给它就清除掉，因为你不写这代码，就算你成功，那这定时器还会再去查询，因为咱们成功之后，这是不是不需要再查状态了，你状态已经是成功的，所以咱们做法就是当状态已经是已经支付的时候，咱怎么做呢？在我们的页面中。咱们就是清除这个定时T的这个效果，就让它不再执行，这是我们的第三步，然后清除之后，当然咱在这个后台中，我们如果说是支付，咱在那个接口里边要做些事情，做什么事情呢？第一个。就是更新我们订单的状态，也就是啊，到咱这个O表里边，把里边的这个值变成一一就表示已经支付。然后第二步还要做件事情，咱像这个支付记录表里边添加上一条那个支付的记录，比如像这个paylog里边我们会加上一条记录，就你支付成功之后，里边会做出这条记录。

所以咱们里边是这么一个过程，咱们支付完成。按照这个过程把这个做到啊，包括咱昨天也这么做到的，在我们前端中加了一个叫set interval，是一个定时器，定时器就是每隔三秒执行一次，这个查接口查状态的方法，如果说你查的状态这里边是位置符，那我们就一直等待，如果说你是已经支付，那咱就把这个定时器清除，然后在接口里边更新状态，并且添加一条支付记录。主要啊这么一个流程，所以各位把这个给他知道啊，这里边有个定时器的方法，然后清除定时器，用这个方法叫clear interval，就是把它这个效果给它清除掉，当一清除定时器就不起作用了。

这个两个方法啊，然后各位注意，这里边有这么一个地方，因为咱们定时器中呢，会有一个返回值，所以我起了名字叫TIME1，当我们清除的时候，咱把它的返回值给它清除掉，那这定时器就没有效果了，最后在date里边几个TIME1让它返这个值在里边把这个TIME1给它clear clear掉，就给它清除掉。这个啊是咱们写到前端的部分，各位把这个给他知道啊，然后咱们最后再看一下接口里边，接口中呢，就是根据订单号查这个状态，然后咱是wi里边两个方法，一个是查状态方法，一个是更新和添加记录方法，这个查状态方法咱们就是调那个微信提供一个地址，它会给咱们返回值，然后这个是更新和添加，是咱们操作表的一个数据。而在它繁殖里边，咱也做了输出啊，就是里边的这个地方。

我们做了输出，然后输出里边呢，就是有很多的值，在这值里边，大家看啊，就是有很多，而咱是根据里边的这个值叫try state这个值，比如说我先把这些关掉啊，咱看一下里边有这个值，这个值呢，如果说你是没有支付，那它的值叫no pay就没有支付，当你是已经支付，这个值就变成了success，所以我根据它做了判断，如果它是success，咱就给它做更新添加，如果他不是success，我们就一直提示支付中啊，让他在等待。而这支付中咱们也做了一个处理，做了什么处理呢？大家看到啊，在我们的前端中，咱最后还加了一个叫就是response的拦截器，就这个。拦截器中怎么做到呢？就是里边我做了一个判断，如果说你是这个状态码，那我们就提示他登录，如果说你不是2万，是25000这个状态码，那怎么做，它就表示支付中，咱就不做任何提示，也就是我现在如果你是支付中，我就一直等待在页面中，不做任何提示，只要它成功，咱们再做这个跳转啊，这是我们目前的一个解决方案。

每隔三秒查一次，然后这里边啊，按照这个流程把这个。支付之后怎么跳转到详页面给他做到了啊，所以大家把这过程给他要清楚啊，你知道这个每一步我们都是怎么做到的，这个过程中呢，涉及到咱的后端接口，还有前端的代码实现两个过程各位都要做到啊，后端里边呢，它的结构比较固定，各位可以按照流程给它改一改就可以了，而前端中这里边综合用到了我们之前的Java square里面内容，比如说定时器。清除定时器啊，包括咱区的vuee这些综合的应用在这里边应该都有体现。所以各位啊，把这段代码都好好去写一写啊，是一个支付的完整一个流程。

啊，这个啊过程我们就做了一个总结啊，也就是昨天我们写的这么一个流程。