day15【微信扫描支付】/09-尚硅谷-谷粒学院-生成订单前端页面整合（2）

就是前端启动之后呢，我们下面再来启用接口，但是接口中啊有个特点各位注意啊，因为咱们现在OS接口是不是要调那个edu，还要调咱们那个U3的，是不是要调另外两个模块中那种，所以咱们这里过程中用到我们的NAS才能实现一个异程调用，那咱们下面啊把那个NAS。需要给他也请起来。那大来启动一下啊，NUS呢，应该在我们的第九天或者第十天啊，咱们看一下啊，呃，第十天中啊，里边有NUS了，那我把这服务我就直接启动，启动方式很简单，找到里边的B目录，有一个叫startup.cd把这一双击就可以了，如果说你在legal系统中要用这个start up.sh啊，都是一样的，咱现在把它先启动起来啊，因为我们要用到里边的这个。就是纳斯的注册中心。我们现在啊，启动启动之后呢，通过浏览器访问一下它那个页面。

啊，再来访问啊，它的页面。这里边啊，应该叫这个local host。8848。这个绑出来啊，然后咱们登录它默认用密码都是NAS。啊，都是这个啊。这个咱们先登进去，要各位要记得啊，咱之前应该是在第十天说过的啊，把NAS作为注册中心，你在里边注册才能实现相应的调用，这注册中心就好比说咱那个房产中介。然后在里边有一个叫服务列表啊，这个位置默认是没有东西的，那我下面把这些服务我们依次给它都启用起来啊，咱一个来启动。比如说首先我先启动第一个就是我们那个。Edu啊，这个我先启动。把它行起来就是edu，然后再请u center，包括再启OS，把这三个服务都启动，启动之后咱到那个NAS里边看一下里边这些。

启动的服务在里边能不能列出来啊，如果能列出来，咱通过前端后端再做调用。啊，一个启动啊。等它启动起来，这是第一个edu，然后启动之后到里边我一刷新。大家看service-edu是不是有了这个没有错，再请第二个咱那个U3头。把这个系统下啊U3。这些啊，我先都给它关掉啊。有问题咱再慢慢调试。第二个等它启动，启动之后，咱也到NAS看一下有没有这个内容啊，咱们多等一会儿啊。这是第二个。这个应该可以了啊，然后可以之后到里边我们现在还是做个刷新U是不是可以了，然后咱们再启动第三个，第三个就是这个orders这个啊，把这个我们也启动，然后咱看效果啊，等它启动起来。

好现在啊，我们看这个应该也可以了啊，然后都请之后咱们到里边最后刷新。各位看到三个负是不存在了，Edu order和这个U参啊，都没有错，然后都没有错之后我们还需要再讲一个地方啊，因为咱们这个OS呢，我们用的是一个新的端口叫8007，所以咱把N这就要再检查一下，看里边那个配置对不对啊，默认是没有各位需要加上，如果加上的话，你看里面这个配置对不对。去打开啊，找到那个8007。看这里边啊，U3的是8150，这个edu是8001，然后807是这个啊叫order service。好像不对啊，大家看对不对啊，看我那名字叫什么。各位看我这个名字是不是叫edu啊，咱们不叫o swis啊，所以把这需要改一下啊，不改肯定不对。

给它改一下啊，然后再重启，我这个叫eduo啊，这个改完了，改完之后咱需要把这个N这个给它重启一下，然后最终再测试啊。那我来重新启动。把这个打开。里边是N-S。Stop，然后咱们N这个做一个最终的启动。就是这个啊。这样的话应该就可以了，把这些都精起来了，包括这些也都改了，然后这些呢，都做到之后，咱最后来做一个不用测试，包括这跨域应该都加了啊，那我们来最终试一下啊。先来到我们这个项目的首页面，就是local house了，3000，我们先记住。然后进入之后呢，这里边我们先做一个登录啊，因为它要取出去，肯定你要先登录，没有登录它没有那内容这些细节后面咱再完善，咱先把核心流程先走通，那我登录一下啊。

用手机号，包括这个密码。或者用微信扫码登录啊，都一样的，用这个我先登录，登录之后这里边啊，在我们这个页面中会显示登录之后的昵称和头像，这个是之前做过的，应该没有问题，然后点击课程，进入到课程列表，咱们点击里边的某一个课程，比如我点这个课程。HTHTML5入门课程，咱一点的话，进入到肯定是他的详情页面啊，这个效果在详情中，当咱点立即购买，咱是不是就要生订单，那咱看这个过程它对不对啊，就来测试一下接口和前端这个过程。咱把F12也打开，有问题咱也方便找到。这个位置啊都打开，那我现在点立即购买，咱看效果啊，我一点。

可以看到啊，这里边。你看啊，现在到页面中过来了，但是他是不是报了一个错呀，那咱看他报了什么错啊，首先我们看啊。各位注意，在这个就是等一下回来啊，在我点这个立即购买的时候，其实他现在应该是做了两件事情，第一件事情它是不是要生成一个订单有，然后第二件事情在我这页面中要显示是不是你的订单信息有那两个东西咱都看一下啊，先看订单有没有生成，再看信息有没有显示，看它到底是哪里报的错啊，咱一个来看啊。比如说第一个我们先看一下表里边找到咱的订单表，把这表找到啊，订单表呃这个啊。然后在表中，比如现在我给它刷新。这个表。大家看啊，在我这个表中呢，其实我刚才这个数据应该已经加过来，就是这套数据是我刚才新加的一个订单，就这个啊，呃，这样为了明显这数据我先都删掉，因为这么看不明显啊。

也都删掉。咱重新讲啊，包括这个日志这数据我也先给他都删掉。啊，咱重新测试啊，让他看的更明显点，因为里边有些数据干扰我们的视线啊，咱一个来看。那我重新测试啊，还是先回来。到另一面。在这个页面中呢，现在是登录，然后点课程。点完课程之后，比如我们用第一个课程点它进入到进行页面，在相应页面中我们点立即购买。大家看现在到页面中是不是他就没有问题，就是报错了出错了啊，没有这个内容显示，那咱看是哪步报的错，先看咱的表里边，我们找订单表。各位看。订单表中数据是不是得到了，也就是说啊，咱们生成订单部分是没有错的，但是它的错误是什么呢？因为你在生成订单之后，咱在这个OID页面中，它是不是要显示你的订单的信息，有其他问题，应该是在这里是你显示订单信息这过程中出现了问题。

这个啊，是我们定位到的。不是，各位是否能看懂这个问题啊，第一步生成订单没有问题，因为表中数据已经有了。而单第二步就是在你。获取订单信息的过程中，他报错了啊，里边出了问题这个啊，我们定位到了，那咱们看它什么问题啊。先看它提示能不能看到。我们看啊，他提出我们是这个地方，他说这个。这个错误啊，这错误咱一般看到之前看到已知是那个跨域问题啊，但是目前应该不是跨域，因为咱们那个跨域的注解是加过了，所以咱看是不是路径，包括什么调方法等等一些问题，是不是写不对啊，那我们看一下啊里面这个错误。首先你看啊，这里边有一个叫edu order order，然后get order info后面传入我们那个就是。

订单的ID啊，包括咱看订单ID这个ID什么什么530啊，这也没有错，那如果说遇到这问题，那咱怎么做呢，还是按照咱们传统方式，咱先看那个。接口对不对，如果接口没问题，再看前端，它到底是哪里掉错了啊，咱就一步去排查，因为直接这么看，你看不到问题，它肯定不是跨越路径，咱应该也没有写错，那我现在这么来做啊，我们先用这个。Swag先做个测试啊，看这个对不对。然后打开swa。Local house啊，应该是那个8007，诶不是这个啊。我这个地址8007。加上swagger。杠ui.htl把这个打开啊，W在里边找这个方法，根据订单ID查询订单的信息，这个咱们把ID传过来，就咱刚才这个IDID是对的，然后传过来之后，这里边我点这个try it out。

大家看。数据是对的，应该没有错，这些数据我们是得到的啊，包括你看里边这些值应该都有，那证明咱的接口应该是没有错的，这一部分是对的，那就看一下前端是哪里写的不对啊，咱看前端。那我们来进一步排查啊，首先先一步检查。在我们这个。下划线OID里边咱是调用刚才我们写这个接口，就是这个接口。Get o的info里边传个ID啊，咱们把这个得到，那我们检查一下啊，就是我之前说过啊，我再重一遍，当你看到这种错误，无外乎就是几类问题，什么问题呢？要么跨域，要么路径，或者说相关这些信息，一些问题，比如说你提方式参数等等有问题，他一般也会报这错误，那咱检查一下啊，到底是哪里写的不对。

我说各位是否能听懂啊，我再说一遍，当你看到这种问题啊，一般外乎几类问题，要么跨域，要么路径写错了，要么可能你挑方式或者参数写的不对，也就这几个问题，他不会有别的问题，那我们看一下啊，哪里不对？首先我们看啊，这是我们的方法，Get order info，传个order ID，这都没有问题，然后不知道各位是否看到啊，我这什么提交。是不是get提交，我这写什么？是POS递交，它就这个错啊，就是你是get提交，你非写poose，所以它就出现那个提示说你那个什么什么不能访问，因为挑方式写的不对这个啊，咱就快速定位到就这个造成的问题啊，所以各位以后见到就从这几方面去找这问题啊，基本上就能找到，因为它没有什么特别的地方啊。那这个咱们给它改完之后，咱们最后再来试一下啊，比如现在我在页面中刷新大家看。这个就是我们想要的一个效果，就这效果生成了你这个订单，并且在里边做了一个显示，这个啊，我们就做到了啊，然后做到之后我们可以再试一遍啊，重新再试一个，比如我先回来刷新。

刷新之后呢，我换课程，假如这个课程我现在点它到详情，然后咱们现在点立即购买。各位看到是不是到了咱们的订单的显示页面啊，这个我们就完成了现单整合，然后在页面中，当我们点去支付，它就会生成二维码，然后咱们用微信支付，把后面过程可以实现，目前把订单生成和订单显示这个我们做到了啊。包括你看里边有你的封面名称，什么价格等等啊，这些都存在了。而刚才问题就是提交方式，但是写错了post，就是我非写post，但是它本身是get，他报了刚才那个错误。这个啊，咱就整合出来了啊，我们的订单生成的效果。