121.公众号开发-付费课程支付前端和测试原创

各位同学大家好，下面呢我们继续来实现支付课程的基本功能，前面呢完成了生成支付订单，包括订单微信支付的接口，那下面呢，咱们来完成后续过程，后续过程中呢，首先是前端部分，然后最后有两个接口实现，那下面咱们先做一个分析，然后最终做实现。首先我们看前端里面，咱们找到页面，先找到这个页面cos info，也就是课程详情页面，在课程详情页面中的这个位置，我们找到啊，有这么一个按钮或者超链接。叫立即购买，当咱们点击立即购买，它触发事件到这个BY这个方案里面来，然后在BY方法中，咱们通过路由跳转到这个trade的页面，传入课程ID，那咱们来到里面那个点voe这个页面，在这页面中干什么？就是咱们之前做那个生成支付订单的这个里边，那我们看到啊，在里边我们可以生成订单，比如最后。

这里边首先显示你的基本的这个就是课程的信息，包括生成订单的信息，包括优惠券信息等，然后最后我们点击这个叫确认下单，就可以生成订单，我们调这个方法，O的这个方法咱们找到。这个方法。然后在这方法中调用接口，最终生成订单，这个接口咱们已经写过了，一会儿做个调用可以了，最终生成订单成功之后，我们跳转到这个页面，就是这个pay配页面完成支付，那咱找到p pay.voe这个页面，咱们看一下啊，在里边就进行最终的支付，这个过程我们之前提到过啊，各位需要用手机进行测试，如果你用PC端或者其他端测试有问题。

然后在里边我们最终完成支付，支付的时候呢，要调用咱们之前写这个接口进行支付，而在支付之后大家看啊，里面这个方法就是支付之后处理。然后支付之后，在微信这一端给咱们会返回一个值，也就是这个值是OK，那表示支付成功，那支付成功之后，后续咱们干什么，是不是要把订单状态做修改，大家看啊，订单表里边有个字段，就是这个字段。我们找到在里边的这个位置，Older the订单状态，第一次生成订单状态值咱们看到是零，零代表未支付，当咱们支付之后把状态改成一，所以最后还需要做这个事情。以上是咱们一个分析，然后在过程中我们看啊，里面有段代码。这段代码不是我写的，是微信官方代码，这里提到啊。

使用以上判断，前端返回就是返回它是OK，但是微信团队正中提示这个值是OK，它并不保证绝对口，就并不保证一定是成功的，所以咱为了保险，我这里边啊又做了一个处理，什么处理，比如说咱们写个接口去查询微信接口，看我当前订单是否成功，如果成功之后，那咱再做后续处理啊，这咱们一会儿进行实现。所以以上啊是咱们对这个订单支付的一个基本分析，我再重复一遍，然后进行实现，就是咱们在详情页面中确认订单，然后来到这个支付页面，在里边进行支付，而支付之后咱们再去调用微信订单接口，查一下支付状态，就是你的订单是否成功，如果成功的话，那咱再往后进行处理。以上是一个基本分析，所以前端里边都已经写好了，那下面呢，咱们来写一下剩下的两个接口，首先第一个接口很简单，就是订单详情，因为咱们生成订单支付有一个详情显示，所以第一个我在o info API ctrl里边先完成订单详相通接口，然后第二个接口在微信配CTRL里边，根据这个订单号去查询订单的支付状态，看它是否成功。

如果支付成功之后，那咱们更新订单状态，把这个做实现，那下面呢，咱就来快速写下两个接口啊，应该很简单，咱们快速实现一下啊，首先第一个接口咱们在O里边我们找到就是这个o info。APICTR了，我把其他的先关掉，然后在里边加上这个接口，把路径咱们复制过来，根据订单号查询订单的详情信息咱们写下啊，而这个查询我们一会儿在service里边，咱们专门写个方法，我就叫get order info。

根据ID。进行查询，里边传外地，然后查完之后我要咱们显示更完整，我这里边写好了这么一个VO对象，那我们给它找到啊，就是O的。In for VO，再让它返回这个对象，在O的in for VO里边有咱们的所有数据，然后这个之后我们最终做一个。蕊，咱们先蕊吞一下造的点OK，里边传入order INF for VO，这是咱们写的CTRL部分，然后在里边把这方法我们先创建出来。就是根据订单的ID获取订单的信息。写完之后service的实现类中把方法最终我们做个实现，这个方法很简单，就是根据ID查询，然后最终进行封装可以了，那咱们快速写一下啊，首先第一个根据订单的ID，先查询订单的基本信息，还有他的详情信息，最后再给他。

封装到这个FVO对象里面去，那咱写一下啊，第一个查询，我们先调用base中的方法里面这方法叫select by ID传ID得到订单的基本信息，然后第二个调用order detail里面的方法get。根据ID查询出订单的详情信息，这是咱们查出数据，然后查出数据之后把两数据封装到这个O的info VO里边去做一个这种封装，那咱们快速写一下啊，先用这对象，然后拟完对象之后，我们先用这个的方法里的copy，通过它先把的数先给它复制到这个里去。

我们用这个这个复制，然后之后呢，其他值咱再手动给他set进去啊，那这set过程我从课件中找到，给个位复制过来咱们看啊，下面我用set的两个值，一个是课程ID，一个是课程名称，然后最后我们把这个o info view对象做个返回以上就完成了根据订单ID得到订单详情的这个接口，这个为了一会儿进行使用。然后这个之后我们再看下一个接口，下一个接口是什么呢？就刚才提到咱们生成订单支付之后，我们要查一下支付状态，因为在前端微信团队郑重提示，这虽然是OK，但是并不能绝对保证一定是支付成功的，所以咱在查一下看他是否成功，所以下面我们写一下里边这个方法。

查询支付状态这个方法呢，我们写到微信配CTRL里边进行实现，那各位来写一下啊。我来到这个CTRL中，微信配CTRL，其他的先关掉，然后在里边加上我们这个方法，方法就是。查询支付状态，然后在方法中啊，有个细节之前没有特别提到，这里给大家特别提一下啊，就是这个值O的no，这个值呢，咱之前说叫订单号，但是我强调啊，这里的订单号呢，其实指的呢，并不是我们那个订单ID，它指的是什么呢？大家看啊，订单表里边有这么一个字段。我们找到啊订单表。

往后看一下一个字段，这个叫out trade no指的是里边的这个字段，是你订单那个流水号，或者订单的这个号，它指的并不是订单ID，根据它我们之前是生成这个支付，包括这里边查状态，根据这个订单号进行查询，这个特别注意一下啊。然后这个之后下面呢，我们在里边写下这个具体方法，咱们做个实现啊，然后这个方法首先第一部分咱们就是根据订单号。去调用微信那边一个接口查询支付状态，就是你的支付是否成功，那我们调一下啊，微信配service里边我们写个方法，就叫这个query。里边传入订单号，然后最终让他返回一个map集合，这是由微信那端给咱们返回到，咱给他做个接收，我起个名字就叫result map。

然后map里边加上泛型都是这个缀啊，为了咱们方便，这是第一部分，一会咱们解释方法，然后这个之后下面呢，这这里边我们做个判断，就是根据微信支付状态的接口，判断你的支付是否成功，再来做这个判断。那怎么判断，给大家说明啊，就是支付呢是否成功，里边无外乎有这么几个场景。大家可以想一下啊，第一个场景是不是支付成功，第二个支付失败，第三个是不是正在支付中，一般就是这三种状态，那这里边怎么来做，我写一下啊，首先第一个咱做个判断。我这里啊，如果说呢，这个result map就是微信接着给咱返回值是个，那那就表示呢，咱目前没有查到任何的支付信息，那就表示我支付出错，注意啊，这里说明微信这一端它并不会返回错误的信息，如果说你支付错误，它是返回空，就是什么都不返回，让你查不到这个状态，所以咱们第一个表示支付失败，我们就直接判断是不等于呢，如果他支付失败，那我就直接给他抛出一个。

自定义异常了。硅谷课堂exception。20001，然后提示说这个支付出错，这是第一个判断，然后第二个那就是支付成功，支付成功怎么做呢？咱们看我课件中啊，微信它的接口中最终给咱们返回有一个固定的一个值，这个值给大家复制过来咱们看啊，这个名字叫trade set，是微信这个返回值中包含一个固定值，所以咱判断这个值如果是success，那就表示支付成功，或者说咱们这个支付已经成功了。

那成功之后咱们怎么做呢？我们说一下啊，这里边咱是不是就要需要更新一下我订单的状态，把状态变成已经支付状态，这是我们写到的，然后最终我们再一个值，比如退到点OK。里边啊加个档，然后咱做个提示，Master里边写上叫支付成功，这是它的一种状态，然后这个方法一会咱完成，而这里边如果说它不是success，那就是支付中，咱们给它也是反映一个值，我们就叫支付中。啊，就为了把这结构写清楚，所以以上这一个流程，然后写完之后在这位置咱们做个更新，这个更新其实咱们可以跟这个O的no更新，就是咱说那个订单号，或者里边那个流水号，而且流水号在微信支付状态查到接口中给咱也做了一个返回，他用这个名字做个返回。大家看啊，这个名字out trade no，其实就是O等于O就是这个值，那咱根据它做一个更新，这个更新我们就调用。

F的方法，咱们写个方法，我就叫。CS里边传入out trade no，就跟这个订单号咱们做个更新，所以以上control部分我们就完成了这么一个结构，然后完成之后我们写方法，第一个方法根据订单号调微信接口，查询支付状态。这个方法。一会儿完成，然后第二个就是更新订单的状态，当你成功之后，把订单状态那就改成已经支付状态，这是咱们这两个方法，最后在实现类中，咱们最终做个实现。最终这两个方法，那我们来看一下啊，首先第一个就是更新它的状态。

然后还有一个就是查询这个基本状态。也就是这个方法。啊，我在这里边给他实现一下啊，这是两个不同service，呃，其实你为了方便，你可以写到一个里面去啊，我就单独在2SERVICE里面做实现。这两个方法，所以咱们最后就把这两个方法咱们做一个实现，首先我先写第一个啊，就最简单这个根据这个订单号去更新订单状态，这个咱先写一下，因为这个比较简单，那我写一下怎么做啊。首先第一步根据订单号先查询订单，然后第二步设置。订单状态就变成已经支付，第三步调用方法更新，那我们来写一下啊，第一个查询，那我们用快rap或者用lada cry rapper都一样啊，我用拉DA cry rapper加上older INF for rap等于new上一个lada。

Query rapper，这是第一个，然后第二个rapper里边我们加上这个条件。点上EQ。Order info get是里边的，应该是这个叫out trade no，就是咱们说的订单号，然后把这个传进去，最后调方法，Base里边的。Rapper传进去，根据订单号得到订单的信息就是order info，然后得到之后向order info中我们来设置它这个状态值就是欧的值，变成一，一就代表已净支付，最后调方法更新加上update白地传入order info，所以现在这个方法我们就完成更新订单状态。完成之后，咱们最后来写这个方法，查询订单的支付状态，这个过程跟之前那个支付的过程差不多，都是调微信接口进行实现，那咱来写一下啊。

首先第一步封装微信接口需要的这些参数值，我们使用map性封装，然后第二部分调用接口，我们使用HTP可烂的方式进行调用，最后就是封装返回的这个结果。啊，这么一个过程，那咱们来写一下啊，第一步封装参数，我来到课件中，把这一步先复制过来，同样是放到一个map集合中，里边传入它的一些值，然后值里边说明啊这位置，因为咱们这个支付呢，之前提到我们用测试号是没法做支付的，只能用到正式号，所以里边这两只是你的这个商户号，还有商户ID，包括后面还有那个商户key，咱们都用上正式号那个。

然后正式号里边之前用过，咱为了方便我还是写固定了啊，第一个这个正式号那个就是ID，就是公信公众号的ID。第二个叫商户号。咱们也拿过来啊，我从上面复制一下。实际中这肯定放到配置文件取更方便，因为咱们为了这个能测试，我们直接写固定了第二个商户号这个值。把它拿过来。这两支特别注意一下啊，因为这个支付功能比较特殊一点，如果各位同学啊，自己在练习过程中，如果你想自己用那个号进行测试，那你这个支付这个功能没法测试，除非说你申请一个服务号才可以，但你自己用那个测试号，除了支付之外，别的功能都可以做到啊，所以支付功能按照我的方式做就可以了，到这是我们第一部分，然后第二部分呢，我们用HT client进行请求，那咱们就new一个HT client。Us，然后加上等于上一个htpus里边加上查询的接口路径。

路径呢，就是这个路径，我把这个分过来。这是微信官方提供的固定地址order query查询状态，然后下面我们来设置它的参数，LAN里边set叉传入map集合。然后在里边再加上它的P这位置用到微信中那个工具类，这咱昨天啊之前都说过了，然后这个工具类我们的名字general s叉L传入map集合，再传入你那个签名的key，签名key我们从上面复制一下，就这个key。把这个拿过来，然后这里边有一常我们用try catch给它捕获一下这么一个结构啊，我把这部分啊都放到try catch里面去。

都给它放进来，所以现在这部分完成参数设置，然后设置之后我们继续往下写，加上里边的site htps，加上一个支持HTS的协议，最后发送请求，点上POS就可以实现，然后实现之后最后呢，它会返回结果，咱们做最终封装。可里边的get content返回结果，结果是一个叉L格式，咱们把叉L格式转换成一个map集合，为了咱们操作方便。我写一下啊叉L。然后转成了集合，集合咱们起个名字，我就叫这个。Result map，然后咱们把这map集合直接做个可以了，这个不需要特别的封装，直接里边就包含咱们的结果。包括啊这个叉L，为了一会儿咱看到方便，为了做个输出，为咱们看到更明确。

所以以上咱们就完成了这个微信支付，包括支付支后这个处理过程，这个咱们就最终做到了，所以各位啊，把这流程，包括这些接口，按照我课件中的一个过程，能给他最终骗出来，所以这个我们就写到这里，然后这个之后咱这些应该是都完成了，那下面呢，我把服务器给它都启动一下，然后最终咱们进行测试，完成它最终的一个效果。那现在啊，我把这个启动一下，包括前端，咱为了保险起见，最好给它也是重启一下，因为有时候会有缓存啊，咱给它都重启一下，重启之后最后完成测试。但是我说明啊，这个测试呢，各位不好看到，因为它只有在手机上才能测试，我们用微信PC端是没法测试的，所以我这里边我只能在手机上测试啊，这各位好像看不到啊，但这过程觉得正确的，我下面啊，我在这里边做测试，然后一边测试一边我特别说明一下，因为你在PC端这个效果出不来，它不能弹出那个测试光镜测试，这个做不到，只有在手机端才能实现。

那这里边啊，我来快速测试一下啊。首先我这里特别说明啊，我们怎么测试呢，跟之前一样，首先第一个就是你在里边啊，咱们看到这个课件里边。我们来到这个页面中，页面中有个超链接叫立即购买，就是这个位置可以做判断，如果你课程免费，这里边直接观看，如果不免费，我们立即购买，这个比较简单，我就不写这细节了，咱们做核心部分，然后核心部分中我现在啊，在我的手机上，我把这个公众号就是那个测试号打开。打开之后呢，点击某个课程，进入到课程的列表页面中去，我手机上先进行进入。

然后各位看啊，咱通过控制台能看到控制台里边有数据的输出证明目前是进入进去了，然后进入之后下面呢，我在手机上点击这个叫去看看，进入到详情页面中，在详情页面中，也就这个页面点击叫立即购买，在立即购买中他到下一个页面，然后下一个页面中呢，显示的金额包括信息啊，另外优惠券目前是没有可用的，这些都进行显示，然后我现在啊点击就是确认下单，可以生成这个订单，那我现在手机上我点击确认下单。然后点击之后，稍微等一会儿，正在加载，它就进入到了我这个页面，然后页面中里边什么样的呢？它就显示了你的课程订单的详情，下面有一个支付按钮，也就是我里边的就是这个界面。大家看啊，在这个界面中，比如说上面这个位置。呃，咱们看一下啊，就是在。找到有一个判断的一个地方。

确认下单在这里啊，就是咱们现在点它，然后这个位置到了我们这个界面，在这个界面中就是这个位置有一个支付和去看看做了一个判断，如果订单状态是零未支付，那我们就是选择支付，如果说不是零，那就去看看进行观看，现在是支付。我现在注意啊，在我手机上，我点击支付。然后里边什么场景呢？我手机上直接弹出了一个支付框，让我进行支付，它显示叫上硅谷it教育支付，然后现在我做了一个支付。啊，统一咱支付0.01元，然后支付之后，这里边在我手机上它就显示的就是去看看，因为我们已经支付了，然后我点进去看看，它就到了我的详情页面中，咱就可以完成这个视频的观看，以上是一个基本过程，所以就一点啊，我这不好演示，因为手机咱不好在这里演示出来啊，所以各位注意，这个支付需要用手机运测试，我目前测试过程都是正确的。

这是咱们完成的就是付费课程支付的功能，所以大家把这接口，把这流程给他好去看一看，然后这里边呢，涉及到有很多的部分，各位好好给他去看一下过程，过程并不难，只是步骤比较多一点，所以你一步一步仔细把每过程能给他最终找出来。