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

就是咱们接口完成两个，然后咱们下面先做第一件事情，我先把这个页面咱先做一个整合啊，就是咱们先整合一段页面，因为咱都写接口，这效果各位看到就是比较这种不不明显，咱们先把页面整合一个，就是咱们把里边的这个页面。各位看我这张图上，比如说我们现在点这个立即购买，他肯定要到咱的订单页面生成订单，那咱一会儿把这个页面我们先整出来啊，这是咱一块儿做的第一件事情，然后这个做完之后，大家看，当我们点去支付，咱是不是要生成二维码呀，所以第二部分咱就来写这个生成二维码这个接口，包括咱支付之后查询订单状态接口，然后这两个接口写完之后，最后咱再把二维码，包括这个过程的页面整出来啊，这是我们下午做的事情。就是咱们第一个先把上午两个接口对应的页面先整合出来，然后再写那个支付的其他部分，包括接口，包括页面啊，咱下午把这功能给它做到这个啊，是我们马上要做的事情，那咱们先做第一部分，我们就来先把这个生成订单的页面，咱们先做个整合。

来给大家写下啊。咱们做的事情就是整合生成订单的页面，那怎么做，给各位一步一步我们来说一下啊。首先第一步操作，因为咱要写页面嘛，所以说我强调啊，这页面中的内容咱直接复制就可以了，但是里边的Java所有代码需要咱去写一下，所以首先我们做页面的第一步怎么做呢？咱先啊复制我这个订单和支付页面需要的一些就是CSS和JS一些文件，把这文件先复制。因为咱之前大家看啊，在咱前端中有一个叫呃，Set文件夹，里边是不是有相关的CSS包文件，但是这个文件中没有我们订单页面的，所以咱把它叫做复制，而这个页面因为各位都会共享出来啊，就是我这里先共享一下，一会儿我忘记啊，就是我们在这个里边有一个文件夹叫access，就是各位一会做的话，你把这个access直接复制到你的项目中，把你之前内容给它覆盖掉，因为在之前中没有我们这个。

订单相关的就是这个文件啊，这个文件夹，你把这个拿到你的项目中，主要复制这个CS，把这些都覆盖你之前那种。包括咱看这4S里边，咱之前应该没这么多，现在有我们最新用到的，比如说里边有什么order啊，包括什么微信等等，这些内容是咱们马上需要的，所以这个是咱一块儿做的第一件事情。把这个先覆盖你那里边的相关的静态文件。这个啊，给大家截过来啊，第一步把你的文件做覆盖，然后这个做到之后，咱们看第二部分，我们写第二步。

第二步咱干什么呢？就是现在当我们点击那个叫立即购买，咱是不是要生成这个订单呀，也就是说啊，我点立即购买，在这按钮上，咱肯定要绑定这么一个事件，然后咱们编写个方法，调用咱的接口把这个订单生成，这第二步咱就要做这事情，在页面中调接口把这实现，那咱就就写一下这怎么做啊，按照咱们之前一贯的做法。我来试验一下哈。首先第一个。咱需要在我们的API中定义我们这个JS文件，就是里边写那个订单部分。那我们来定义啊，找到A片这位置里边写一个订单，这里没有，咱重新创建一个，比如说用它我就快速改一个啊。

在里边给他改个名字，这个名字我们就叫订单的，比如说叫orders。针对订单，然后在O里边，咱定义我们上午写的两个接口，第一个接口就是生成订单的接口。然后第二个接口是咱写那个根据ID查询订单接口，咱们有两个接口。行，这位置啊，这个是根据订单ID查询订单信息，咱把两个接口先做个定义，那咱们先写第一个接口，我给它改个名字生成订单嘛，我就叫这个可。Orders生成订单，而生成订单的时候各位注意啊，咱之前写那接口中呢，我们需要有参数，咱看一下啊，咱还有什么参数。是不是这个课程ID嘛，包括这个用户ID咱是放到he中，不需要咱们传，只要你登录就有，但是课程ID需要咱们传递，所以在里边我就写一个参数是咱这个课程ID，然后写完之后下面写上你接口那个地址，我把地址我就快速复制一下。

这个地址。给他拿过来，Edu加个order，后面加上这个叫create order，然后加上你那个课程的ID。这个复制啊，咱就没写飘的符号，所以我直接做一个拼接，如果说你写飘的符号，那用那个表达式给它直接写过来都一样的啊，我直接这么来做了，生成订单，然后再看它的提交方式，我是写了一个POS提交，所以里边改成叫。Post这个啊，第一个接口做到了，然后第二个我们定义跟它类似，快速改一下，第二个叫获取订单的信息，比如说叫get orders info。而获取订单信息，咱肯定也是根据那个订单的ID啊，这是课程ID，这是订单ID，假设我就写一个ID。

ID。然后下面呢，把它那个路径咱们布置一下啊。ED加上一个O。后面加上那个获取订单信息的名称，我们叫get order info。最后加上你那个ID。这个第二个方法提交方式就是一个get提交，所以咱们现在啊，在我们的API中，把这个两个方法，咱就快速做这个定义啊，就是里边的这个步骤。这个啊，我就把代码截过来，因为之前咱都写过类似的，跟之前都一样，主要就是这个文件。我们做这个定义。这一步做到了啊，然后这个做到之后，咱下面做的是在页面终，我们肯定要做这么一个调用啊，那咱们来最终来到页面中做一个调用。我写到D位置。就是第二部分。

在我们的页面中进行调用，那怎么调用咱们就来到页面中，而页面是哪个页面呢？咱们还是看。这个图里面啊，就是咱那个需求那部分。找到这个位置啊，大家看这个页面里边。是不是有一个叫立即购买呀，而这个页面应该是在那个课程的。是不是详情页面。所以说咱们在课程详页面中点立即购买，让他来绑定一个事件，然后咱们调接口生成订单，生成之后跳转到咱这个订单这个显示页面，所以咱们来找到课程详页面中的这个立即购买位置在这里边我们来做一下啊。和小的位置。在课程箱页面立即购买的按钮位置，给它绑定一个事件，然后调用我们的方法，那咱把这个快速写一下啊，先找到咱那个详情页面。

我们找到在课程里边是不是哈，下划线idvuee，然后找到咱那个立即购买啊，咱们看到应该是在。这位置啊，我应该写了一个事件啊，大家再给他一会儿重新写啊，各位看到啊，这里边有一个效果，咱一会儿再完善，就是这里边效果是什么呢？如果说你课程是免费的，是不是显示立即观看呀，如果说你课程是收费的，它显示不是叫立即购买啊，那我们先改成立即购买，最后咱们把这个小功能再完善，我们先让它有效果，先改成利益购买，最后再改成。就是免费立即观看，不免费再购买啊，咱先让他先有一个效果，然后在里边呢，这个位置啊，这个改一下啊，立即购买。在我们的这个位置呢，给它绑定一个事件，比如这个事件我就叫create orders，调这个方法再来实现啊，所以就写上这个地方。我把这个给大家寄过来。

就是这部分啊，然后这个选完之后，最后页面中咱来做这个最终的这么一个调用，把这调一下，那这方法咱先给它写到我们的下边，就是生成订单，也就是这个位置啊呃，这个我重新写啊，就我之前自己测试的，我重新给他先删掉啊。然后咱们往下来写啊，在这个位置。我们写一个方法，就是这个生成订单方法，调这个名字create orders，然后在方法中咱就调刚才咱们在API中定义的方法，那把API给它就引入进来啊，咱引入一下啊。Import，我叫orders。A片。From加上咱这个路径at API，这叫orders啊，名字别写错，咱们调这个里边的方法，把这个我们给他最终做到，那咱给他快速掉下啊，应该不复杂，咱之前都写过类似的。Orders API里边这个方法这个。

Create orders，然后在方法中呢，咱需要给他传递上这么一个，就是课程的一个ID，把这个需要传递，那怎么传呢？大家看过这个地方啊，因为这是得到那个课程的详情，包括你的基本信息，还有他的章节小结，然后咱们用PID是不是得到路由中的ID啊，所以把这ID最后赋值就是不是给这个cos ID，那下面就可以直接用了。我写一个叫这点cos ID，哎，我直接复制啊，省得我敲错啊，Cos ID这是得到我们这个课程的ID啊，把这个得到。呃，点错了，把这个得到啊，然后得到之后呢，就是现在在里边我们下面加上一个。点赞。然后加上一个response，这样的话，这个订单应该就可以生成啊，咱们就做到了，然后咱们在生成订单之后，看一下咱的接口中啊。

就这里边各位看到我们返回的是什么？是不是这个订单号，所以咱们把订单号给他接受一下，因为咱们要返回这个值啊，把这值给它得到，那我就加上一个。几个注释啊。返回到订单号，我加上一个response，点上date，点上date，点上这个order ID，这样的话，通过这个方法咱们就生成了一个订单，这个完成了啊，然后完成之后我们要怎么做呢。菜张图上大家看啊，这个过程啊，当我立即购买，咱们就调这个方法，第二列方法之后，订单是不是生成了，就是我表中有这条订单数据，然后生成订单之后，咱是不是要跳转到这个订单显示页面中，就是到这个页面中去，所以咱要跳到页面中去，那这个过程怎么做到，就是咱们怎么要跳到一个页面中去呢？给大家啊，来写一下啊。

就是咱们。生成订单之后，肯定要跳转到你订单的显示页面，咱要到页面，然后在页面中呢，咱们可以再做支付，包括在显示信息等等一些功能啊，那咱要做个跳转，那怎么跳转。给各位说一下啊，咱目前学的跳转方式，应该我们目前介绍的跳转方式就这几种，首先第一种方式，咱最常见这种方式就是这次点这个叫。Route点上叫push，然后加上你的地址，是可以这么做。另外还有一种方式啊，咱也写过叫window.location.ef也可以做到，咱现在用这个路由跳转最合适，然后在里边我加上一个pass，加上你跳转那个路径。那路径啊，因为咱是一个订单页面，这页面一会我重新创建，我先把地址写一下，比如我叫OS。然后后面注意啊，我们加一个值，这个是不是订单号啊，因为咱后面不管你是查询订单信息还是做这个支付，咱都需要订单号，所以我把每次生成订单号就通过路径传到咱这个订单页面，也就是传到这个页面，回到后面显示还是支付都很方便啊，所以我们现在这么来做到。

这个是咱写的JS0方法啊，就是我们的这段内容啊。各位把这个知道啊，我把它截个图啊，各位知道这个特点啊。我先解到这里面来。然后这里边我们做的事情就是就是刚才我说到的，首先我们绑定一个事件，在事件里边呢，我们调这个方法，方法里边就调咱们在API中定义的方法，根据课程ID生成我们的订单，生成订单之后呢，它要返回的是那个订单号，所以咱们就是把订单号给他直接传到我们的那个订单页面中，进行这个相关操作啊，就是通过这个orders后面直接传ID，用这个路由传递这个值。

所以咱们把这个做到了啊，就是一个方法，然后方法写完之后继续往下来做啊，第二步因文中调用，然后再看第三步。我想这位置啊。第三步呢，我们要做的事情就是，就是要创建这个订单显示的页面，在里边显示你那个生成的订单的这些信息，把这个咱要做的啊，这是我们要做的第三步，那咱们看啊，这个该怎么做。首先啊，来到这里。这里大家注意啊，不知道这个东西各位是否记得啊，你注意啊，我这道O里边，而这里边的是不是有订单ID，当然各位应该知道每个订单ID是都不一样啊，所以咱的地址中O是固定，当然后面每个地址不一样，那这个过程它叫什么来着？各位是不是有印象，他叫什么来着，咱之前学个东西啊，我写一下叫动态路由。

各位不知道是否记得啊，就是每次地址不一样，比如咱们做详情，课程详情，讲师详情都有这个东西，所以现在我们到这个页面就是咱也可以用动态路由方式，就是它每次ID不一样，用的是动态路由，那我们下面就先按照动态路由方式把这页面往下创建啊，那大看怎么做啊，首先配里边建文件夹，我教这个orders。然后O里边呢，有这个具体那个页面，页面按照动态路由方式怎么做呢？第一个要加个符号。是不是下划线第二个加上你那个就是一个值啊，这块加个名字，这名字随便起，比如我就叫o id.voe这就是动态路由会跳转到的页面，咱到这个下划线OID的页面啊，这样的话，你一执行完成之后，它就能跳过去。

这个我们先做个创建。我把这个给大家截一下啊，通过动态路由方式让它到我们的这个页面。这里啊。动态路由跳转。然后跳转页面，就是这个页面。啊，这是咱们之前学到的啊，然后最后咱在这个OID页面，就是咱们那个订单新享页面中，把我们的内容咱最终做个显示就可以了啊，那我们来显示一下啊，它的页面部分我就从这个课件中复制，然后Java部分咱一会重新来写，把页面复制一下啊，因为页面是固定的。就是这部分啊，下压线OID，然后这个是液面部分。啊，这个我先复制一下啊。然后复制到我们的OID中，这个复制之后，下面咱写这段。Java代码在这里边写咱的具体内容啊，就把这个写一下，那咱们用来实现啊。

那怎么做呢？跟之前都一样，咱还是把这个先引入，比如我叫orders。API from加上我们这个斜杠API。Orders先引入，然后引入之后在里边我们就是根据你的订单ID得到订单信息，因为咱们在跳转页面的时候，在这个路由的后面是不是有这D，所以咱们可以直接在里面得到，然后做个显示可以了，大家写一下啊，写法有多种方式，咱就写一个比较简单的一种做法，咱之前写过一种做法。就是这个逗号。各位应该都记得啊，异步调用嘛，咱通过CS得到里面的值，那现在我还这么来做啊，用异步方式把这个给它获取一下啊。到这里。然后在里边咱调这个OAPI。啊，A片。

里边的这个方法，方法跟咱刚才定义的get orders for。在里边得到你那个订单的ID，因为咱现在有个P，那我加一个叫P点上，注意啊，这里不是写ID，写什么呢？你看你页面中叫什么名字，我这页面是不是叫OID，所以我写的是OID，就是下压线OID，你写它，如果你页面叫ID，那我写ID，我是OID，就写OID，根据它把这得到，然后得到之后咱下面加上一个。点赞，然后加一个response箭头函数，通过response到的数据，但是因为是异步操作呢，这里边必须要加个什么。是不是这个蕊屯啊，不加瑞屯得不到啊，然后最终在你这里边做个赋值，我就来一个瑞屯。然后里边比如我叫这个，呃，就叫O。冒号response，点上date，点上date，再点上接口，返回名字，咱叫这个item。

拿过来，这样的话，这个代码完成了，就是通过义务请求调用接口，根据我们就是路由中我们传过来这个订单ID，把订单信息得到，然后在页面中做个显示，也就是做到咱们。刚才看到的这么一个效果啊，就是做到。这个效果啊，这个啊是咱们现在要做的这么一个内容啊，那咱们现在把这个应该是只取到了，取到之后呢，上面做个显示啊，这个我提前都写好了，咱们看一下啊，显示的内容把这值改一改，因为有的可能跟我们当前的名字不一样啊，咱给他改造一下啊。比如说里边这些啊，都不变了，然后往下看啊。下面这位置第一个是你那个订单中的讲师名称啊，这个咱给他取一下咱的名称应该叫提成内啊，看一下啊。

Order里边有一个叫teacher name啊，这没错，然后除了他外，还有一个叫做Co cover，应该是一个封面，那咱看我这里边这个封面。是这个cos cover啊，这没有错，下一个有你那个。课程的一个标题，或者课程的名称，我这里边应该就叫costs title啊，应该都对，然后除了他之外，还有这个就是订单的一个价格，这个价格。Total fee，看这个值应该是。Total b就总的价格是这个啊，Total b这样的话，现在我们这个都显示了啊，然后咱们。把这个我们现在就做到了啊，就是当你点立即购买，它就跳转到咱们这个。课程的不是课，就是订单的一个生成页面，然后里边根据课程生成订单，咱们按这过程把这个我们就整出来了啊，主要这么一个过程啊。

我把这个代码给大家也。写一下啊。就在我们这个OID页面中，咱就根据订单ID显示出它的。详情信息主要就是这部分啊，这样的话，这个代码我们就说完成了，就是我们写到里边的这部啊，就把咱们上午那个接口部分，咱在前端页面也做了一个整合。这个图我先保存一下啊。第六个生成订单。前端页面的一个整合，这样的话咱就做到了啊，然后做到之后呢，这里边啊，就是还有一个细节。什么细节呢？就是针对是针对样式问题，不加样式也可以啊，因为大家注意刚才第一次啊，我在这个呃，Set里边应该多加了很多CSS，所以现在让这CSS给他用一下，要不然你这里边有那种它没有样式，那怎么用呢？咱找一个页面就是这个页面。Layout里面一个叫default，你看default中现在是不是引入一些CSS，你把这些给它重新引入一下啊，就是默认应该没这么多，这我后面加的就在你的deft页面中加上咱们新的这个CSS主要用到是这么几个。

Older，比如什么微信啊，把这个咱需要加上，这是最后一步啊。我写一下。这个不需要各位去敲，你把我这个直接复制可以了，就是第四个。咱需要在这个default。写的完整点啊，Layout。啊，Default页面。这里边添加上咱那个CSS的样式，你不加样式它里边啊，就是没有那个基本的一个效果啊，主要就是这些啊，所以咱们按照这些把这过程，我们就最终做到了主要这么一个流程啊，最后咱来检查一遍，然后咱们看它最后的效果什么样的啊，咱来检查。

首先啊，这里边我们看前端啊，在前端里边的第一部分，咱就是引入了CSS，然后底都加过了啊，这些没有错，然后在O里边先定义两方法，一个是生成订单，一个是根据ID查询，然后写完之后在课程形成页面中，咱就给他再立即购买位置，绑定了一个事件，加了方法就这位置。叫create orders，在方法中咱们是根据课程ID生成这个订单，而生成订单之后跳转到订单显示页面，页面显示跳转，咱用的是NAS中的动态路由方式，就是我加一个OS里边加一个下划线这么一个页面。这样的话就能跳过去啊，就不要写错，这次点root.push然后跳转之后，在我们这个订单显页面中，咱们再调出这个接口，通过路由取你的这个订单ID，然后把订单的详细信息查出来，并且在页面中我们做这么一个显示。

所以主要这么一过程啊，咱们把前端就做到了，然后做到之后把这个前端我先启动一下啊，然后一会儿咱再启动那个接口，把最终效果我们给它出来。这个啊，我先启动。然后启动之后，我们再启动接口啊，最终做到。