day15【微信扫描支付】/14-尚硅谷-谷粒学院-生成微信支付二维码前端

接口完成，大家看最终的前端，在前端里边大家先来到这个页面啊，我们看到啊，在这个页面中，当我们点击去支付，它是不是要就给我们生成是不是二维码，所以咱们要是不是要调用咱们刚才的接口，根据订单ID把二维码是不是要生出来，所以咱现在就要写这个去支付这个过程，那咱们把这个过程我们来最终写一下啊。给大家直接实现啊，跟之前都差不多，首先第一个在API中，咱把那两个方法我们先做个定义，就包含咱们说那个生成二维码的方法，还有查询那个状态的方法，把这两方法咱都给它写到这里边。那我来写一下啊。生成二维码的方法。还有一个是查询订单。状态方法，那我们先写一个生成二维码方法，比如叫这个create native。

里边根据咱那个订单号生成啊，比如订单号我就叫这个O的no。在下面写上咱这个结构，包括它那个地址。我把地址到里边复制一下啊，这个地址。Eduolo。这个地址，然后后面加上生成二维码，叫create native，最后再传这么一个。订单的订单ID或者订单号，他的提交方式，咱是一个盖着提交啊，这应该没有错，这是第一个第二个。查询订单状态的这么一个方法啊，订单。状态。那把这个咱来写一下啊，在里边我把名字给他改一下啊，我叫query这个，呃。订单支付嘛，Query pay这个CSSTTS里边传入这么一个，也是我们的一个。

订单的ID啊。比如叫O的，然后下面咱们来写一下它这个路径。这个路径query。配，然后传入你这个订单号。这个啊，它的提交方式也是一个get提交，所以咱们现在在里边把这方法定出来了啊，这是我们写到的，然后写完之后咱继续来看啊，那怎么做呢？看页面中，当我点去支付是做的事情，所以咱来到去支付这个页面，也就是咱说那个订单的那个显示页面，在这页面中咱做个调用，然后把这实现。啊，那我们来看一下啊，来到这个页面，这个页面应该是咱们在这个详情页面中，到这个O里边这个下线OYD的页面，就是这个页面，在这个页面中呢，咱找到去支付那个地方。各位看到。是不是这里在这个位置呢，我们也是绑这个事件，然后写个方法，那这方法我们来写一下啊，我就给它写到我们的下边啊。

这位置我加一个叫。Methods。啊，然后里边加这个方法就是去支付叫to配啊去支付。然后在这个方案中咱要干什么呢？各位注意啊，咱点去支付是不是就要生成二维码啊，所以咱们要到一个二维码的界面，那我一会儿我就再写个页面，专门用于生成二维码，但是我们在生成二维码的时候，咱是不是需要这个订单号，所以咱们把订单号给他也是传过去啊，就可以做到啊，主要这么一个基本过程啊，就是把订单号一传，然后通过它。咱把这个啊，就是生成二维码，那我来写一下啊，直接咱就做一个跳转了，到那个页面啊，这次点router。Push。加上咱这个地址叫pass。然后地址，比如说一会儿我们这地址呢，我起个名字就叫这个配后面加上你那个订单号。

当然各位注意啊，订单号现在在哪里呢？在哪里？你看它这是不是那个order对象嘛，在O的对象里边，咱是不是有这个订单号，就是里边的啊，咱开里边，呃，这边应该没有写啊，就是OID里边那个O的no，通过它能取到咱的订单号，那我就直接啊用这个咱给他取一下。或者说其实就是这个啊，都可以用这个也能取到啊，就做法都是一样的，然后直接写一个就是。c.o点上这个叫o no，这是取到我们的订单号，或者说里边你专门写一个o no，把这个p.OID传过来也是一样的啊，就是都可以做到，这样的话，把这个方法写出来了，就是到这个页面咱调方法生成二维码。然后洗完之后在里边，因为这种方式中，咱说到每个订单它的订单号都不一样，所以咱用到的应该还是那个叫动态路由。

那我来创建啊。在配里边呢，咱们再来一个文件夹，叫这个配。里边呢，建一个页面。页面的规则就是下划线加个名字，名字随便起啊，比如名字我就叫，呃，咱就叫这个PID网点VO。在这个页面中，咱做那个二维码的生成啊，这个咱做到了啊，然后做到之后页面中我们来写一下页面中内容，我把这个复制一下，然后javascript代码咱重新写一下啊，找到页面啊。就那个订单二维码的页面，这是订单显示页面，不是这个，然后往下看。这是二维码页面，我这里写到页面部分，在这里把这个给各位复制过来啊，然后咱们写下面的。扎损部分，最后再改上面。往下写一下啊。Java死灰部分，然后写完之后在里边，因为咱们要调接口，根据订单ID生成二维码，所以咱把这个OS给它也是先引入进来，比如叫这个orders API from，加上咱这个地址啊，就是A。

Orders，然后这个写完之后，在下面咱就可以做到这个过程啊，因为咱们要生成二维码，所以我还是写一种比较。简单的方式还是用这种。义务请求吧，因为这个最方便啊，用它咱来改一下啊。写个义务请求，然后写义务请求过程中，咱就调这里边的方法。瑞。Orders A片点上里边的。这个方法生成二维码，然后它里边要传入你那个订单号，咱再跳转到页面中，把这个通过路由是不是传过来了，所以我这里边直接写一个叫。Her。点上什么。

各位要知道啊，你注意啊，我们在OID页面，咱是不是写OID，在PID页面是不是要写PID啊，就是你这名字是什么我就写什么，然后下面加上这么一个。点赞啊，咱加个response。加一个箭头函数，然后通过response把这数据得到，我就来一个叫配OBG。然后等于response.data.data因为咱们生成二维码返回的那个类型是一个集合，咱就把这个map集合给得到，而在map集合中有咱们对应的这些值，咱一会给他意思都取出来，现在就用这个叫配OBBG得到里边那个map集合。啊，所以这个我们就得到了啊，得到之后呢，最后咱在我们的上面把这些值都给它显示出来啊，那我们看一下啊，里边应该是写好的，咱就要给他看一遍啊。第一个这个地方。这是我们那个订单号，大家看啊，就是通过这个map里边来看订单号，就这个值叫out trade no啊no。

这是我们的第一个订单号，应该就是这个值，然后第二个是咱那个价格叫total b，看这名字那是他这没有错，再看下面一个值。你看这位置啊，这位置呢，咱要做那个叫微信支付了，咱就要生成二维码，那怎么生成呢？给大家说一下啊，在这过程中你注意啊，我写个叫配OBBG叫code的ul，而code的ul就这个东西是不是咱们那个二维码地址，而这地址你直接比如你写个图片，这地址不能生出来，它需要咱们用到VE中一个组件，把这个给它下载下来，而这组件咱之前应该是装过的，如果各位没有装的话，怎么做呢？你用那个命令n PM in死斗把这装上，当然咱应该是装过的。包括咱看我的笔记中啊，应该是在。

呃，应该是在前面这个那个阶段啊。就是在那个我们写那个请求登录的时候，应该有这个东西啊，我们也找一下啊。应该是代就这个啊，可以看到在咱做登录的时候，我们装了一个MCUY是叫这个组件，我说后面用的，就这时候用到这组件什么意思呢？它是VE里边一个下载二维码的一个组件，咱需要把它装上，然后在配置文件中加上这句话，之前我们应该是装过的啊，咱们看一下啊。就是在这里边的。里边有一个他。把这个咱需要给他使用啊，然后现在他就通过这个组件，根据你的地址把二维码就可以下载下来啊，主要就是这个过程啊，所以现在。咱们把这个页面我们就做到了，就在这个页面中，咱就可以生成咱们微信扫描的二维码这个啊，完成这么一个整合啊，主要这个过程啊。

然后这个整完之后，我们再检查一遍啊，或者这个文档我们再快速过一遍啊，然后咱们看一下目前的效果什么样啊，咱大概过一遍啊。就是订单这应该已经生成了，包括这个页面都有了，然后下面咱是二维码，那怎么做呢？在里边去支付位置，咱们绑定一个事件，就是to配，然后里边跳转到你的支付页面，这个页面刚才咱也创建过了，就是里边这个。PID的页面啊，到这个位置。把这路径你看咱没写错，然后在页面中怎么做到呢？咱就是在页面中通过路由得到里面的PID值，然后得到之后把这个free瑞给这个配OBBG，因为里边有咱们返回的map集合，然后通过配OBBG把里边这些值意思都取出来，这些值取的名字都是你在这个。实现类中写的这些名字啊，把这取过来，但我强调啊，就是这几个名字其实是随便写的。

你注意啊，咱们put中的名字这是随便写的，但是你注意get中的名字是固定的，这个名字是随便写的，因为咱是直接put里边的几个值。这各位注意啊，这个不能乱写，因为它返回里面名字是固定的，包括咱刚才在这位置也做了输出，比如说咱也看它返回值到底是什么。所以这样的话啊，把这个。二维码生成部分我们就完成了这个啊，是我们写到这个过程啊，咱们实验出来啊。然后实现之后呢，下面啊，我们先看一下目前的效果，然后再来做那个支付的过程啊，就是支付肯定还有这些东西啊，咱们一块儿来做啊，先把这个过程我们先给他弄出来啊。那咱们来测试啊。这个过程中的前端应该不需要重启啊，咱应该已经都启用了，然后咱就把接口启用一下，接口中刚才也都写完了，包括跨域也都加上了，那我就重新启动啊，我就把OS启动一下。

然后咱们做一下这种测试，看能不能出来，有问题咱再给他调试出来啊。有一点各位注意啊，咱写代码不要追求一次性都成功，这种几率在实际开发中基本上是不存在的，一些代码肯定会有问题，但是通过不断的调试，不断修改，把这才能做出来啊，所以咱们啊，有问题慢慢去调试，不用追求一次成功，实际中这种效果只有理论上的可能，实际中肯定会有各种问题啊。那现在启动了啊，包括咱再看一下那个nacos里边啊，检查一下里边应该有相关的这个服啊检查一下啊NAS。这个应该都有啊，然后下面我们来做一下最终的这么一个测试啊，看一下最终结果。重新我们进入啊。然后进入之后，我给他重新做个登录。

如果登录啊。这个登进去啊，然后登录之后，为了明显，我先把表中数据先给它删掉啊，为了咱一会儿更明显啊，这些先。删掉就是那个订单的，然这是订单那个支付资质的啊，这应该没有现在啊里边没有数据，然后我们来做一下这过程，看他能不能做到，有问题咱再调试啊，我点课程到咱们这个课程列表，然后到列表中点击某一个课程，进入到肯定是我们的详情页面。啊，那我们点它到详情，在详情页面中这位置点立即购买，就会生成我们的订单，刚才咱应该都剩了，这些过程都没有错，然后这个过程中，比如现在我把F12点开啊，有问题咱能找到。现在怎么做呢？我们点去支付，是不是就要生成二维码呀？啊，那咱们往下执行啊，我现在点去支付。

大家看啊里面的过程我发现啊，目前他报了一个错误啊，咱看报了什么错啊。他说这个东西啊。什么安范没有定义啊，那咱看什么问题啊，咱看这问题到底在哪里，是不是我这个写错了，还是什么造成的啊。我们来排查。这种问题很常见啊，咱们先看我们这个，先看这里边啊，大家看啊，在我的这个控制台中，你发现。二维码的集合，咱是不是返回了。比如说我在这个接口中的。这个地方是返回了，证明咱们这个是对的，然后咱看它里边有什么值，各位看啊，你看这个值我这给大家截过来啊，是咱们那个调用，就是微信官方的地址，返回你的二维码，这个map集合，咱刚才把这个已经返回了，那我们看它里边是什么内容。啊，把这个咱先看一下啊。比如说我现在。呃，重新建一个TS文件啊，用这个咱们来。

一步来调试啊，把这问题给到最终解决。那咱看啊，有这些，首先第一个你的课程ID就是一，然后第二个这是我们那个订单号是他第三个大家看啊这个地方。这是什么呢？就是你那个微信的一个地址啊，这是它一个地址，但是这微信地址是由微信冒号杠杠生成的，后面有你的这个价格，包括你这个返回状态码，然后大家看啊，它返回状态码是什么。是不是success表示现在这个是只就是生成二维码是成功的，所以说这二维码应该是可以成功，但我们在页面中，咱显示中它报了一个错误，说这个东西没有定义啊，那咱看一下是不是我哪里写错了，或者哪里单词写的不对，咱查一下啊，是哪里写的不对。这叫配OBD。然后咱往上看，先按这个单词。Response，应该没错，这叫配OBD，然后往上找。Co OBD里边有这些值啊，就是里边首先有这个值，它叫out trade no啊，咱看是不是写错了啊。

我们来查一下啊。啊，这个我给他就直接复制过来这个值。Out trade no来到一面中啊，这个值。应该是他，然后后面应该有我们其他的这些值啊，比如说什么total投这些，这么看应该没发现他有什么错啊，因为这个他已经掉到了，如果它调不到呢，上面应该啊，我们这个接口它不会反应数据在这个过程应该没有错，那我们下面啊，比如说我们最终再试一下啊，看是哪里写的不对啊。我们看里边啊。这个位置应该调到了，而这过程中呢，咱会发现啊，这里边有一个问题，不知道各位同学是否能看到，我现在问题在哪里啊？这也是同学们经常犯的一个错误啊。

因为咱写代码有的时候我们写顺手了，什么叫写顺手了，你注意这是不是叫义务请求，在义务请求中这是不是叫re退，然后在下这位置还要加个什么。是不是也要加个瑞寸啊，如果你不加蕊寸的话，那这个值肯定它是后面取不到的，就这个值它告诉你为空啊，所以刚才应该是这个错误，这里边我少加了一个re return是这个造成的。各位是否能看到啊，就最开始咱没有这个蕊退，然后你这值虽然说它能调接口，但这值你后面用不了，因为你没给他蕊退，没给他做负值，这值等于空，你再取的话一直报什么时候没有定义，所以这位置就是少加了一个瑞T啊这个造成的。其实这个问题啊，拿来给它加上。然后咱们再试一下啊，也是一个小问题啊，不是什么特别的问题啊，最终咱们再试一下啊。呃，我重新测试，咱重新回来。把这个我们先刷新啊，然后为了明显这些数据还是先给它删掉啊，其实这些数据都已经加进来了。

啊，先给它删掉啊。包括这个里边没有啊，这个订单中回空，现在我们再试一下啊。咱从完整测试，我还是先重新。登录一下。登录啊。然后用户名密码。咱们登录，登录之后到我们页面中，这个过程中显示昵称头像，点课程进入到列表，点击某一个课程进入它的详情，在详情中我们点立即购买，会生成我们的订单，然后生成订单之后，下面咱们再点这个叫去支付，会生成二维码，那我们再来看目前的效果啊，我一点。各位看二维码是不是生成了，咱们要的是不是就是这个效果，在这里边我们就是你看啊，有订单号，有你的金额，当然你可以显示就是你这个订单，它那个课程的名称都可以显示出来，咱目前而是显示这个值，所以这样的话，咱把这二维码页面就生出来了啊，这个我们就做到了啊。

然后咱们看一下表里边在我们的订单表中肯定有这个数据，但支付表因为咱还没有支付，这数据肯定目前还未空，因为咱们支付成功之后，里边会有这个内容啊，所以这是一个页面整合，咱把二维码就整出来了啊，刚才问题就是少写的一个铝寸啊，由这个造成我们那个没有显示问题。