00:00
刚才呢,咱们完成了订单列表接口开发,下面咱们整合前端,把最终的效果给它实现出来,那咱们来做一下啊,首先第一步我们在前端里边,咱先找到在里边这个API的目录下边,咱们先创建一个JS文件,因为我们是一个新的模块,所以咱们先建个文件夹,文件夹的名字我就叫O。在order里边创建一个JS文件,咱们叫order info.js这是咱的第一部分,创建之后在里边把我们的接口定义出来,那我把这个复制过来,然后改成我们的具体路径,咱们先拿过来,然后咱们看一下啊,这个径中我们是加上当前页,每月记数,还有你的对象,然后咱们是get提交。大家看一下,我们就是这个路径,另外参数部分我们没有用request body,所以里边就加一个叫paramo,如果你用的是request body,要加上一个名字,就是咱说那个date,所以这是第一部分,然后这个写完之后,咱的第二步创建一个新的路由,这部分我复制过来,路由咱们来到里边的这个目录下中的index JS,咱们在里边加上路由。
01:25
那我就加到。这个位置啊,就是咱说这个订单的部分,我们叫O订单管理订单列表,然后在里边呢,咱们的下一步操作,把它的页面做创建页面,在waves里边我们找到啊,咱们首先建这么一个文件夹。来创建文件夹,我就叫O。然后在order里边,我再来建一个文件夹叫order info,或者说我们就直接建一个文件了啊,咱就叫list,我建一个叫list.voe在里边做创建。
02:03
就是我们的定位。咱们见个页面。list.vuee所以咱们的列表页面,所以现在这个页面部分我们就完成了创建,完成创建之后,咱的下一步操作在页面中加上我们的具体内容,那我把这内容九份到这个例子weuee中,然后把里面的径和名字咱们改一下啊,首先大家看啊,在这里边API下面的中有一个注意大小写,我现在都是小写。然后下面我们调用接口,这里边有一个叫fetch data,也就是说咱们下面这个方法。然后在里边啊,调用我们刚才的方法做了一个就是分页查询。最终反映这个值,一个叫records,一个叫total,这两值咱需要检查一下,跟我们的接口中,咱们要保持一致。
03:00
看一下啊,就是结合里边的这个地方。一个叫total,一个叫records,跟他要一样,要不然值取不到,然后包括其他的就是分页的一些相关处理,所以以上咱就把这个前端完成整合,这各位能快速做到创建接口,添加路由,最终改页面,然后把效果最终我们实现出来,所以现在啊,这过程就做到了,做到之后下面我把负重新启动一下,然后看一下最终结果。就是各位注意啊,目前咱要启动接口的服务,要启动有这么三个服务,第一个是我们的O的这个模块,第二个是这个vod模块,第三个就是网关模块,目前这三个模块咱们都需要启动起来,那咱们等先启动,然后最终做测试。现在啊,正在启动O的模块,这个模块需要在这个那进行注册,后面要用网关进行访问。
04:00
然后这两个模块我也启动下,咱们等他先都启动起来。咱们稍等一下啊。好,我们看啊,三个服务都启动了,OVOD和网关,咱们可以先到中刷新看一下,大家看里边注册三个服务是不是都注册进来了,然后下面来到前端,我们看一下最终结果,首先我先刷新,然后咱们登录。登录进去之后大家看啊,在这里边找到里面这个叫订单管理,订单管理中有一个叫订单列表,我们现在点击订单列表,大家看里边的特点啊,咱们看一下效果啊,目前一点它没有出来,那我们看一下什么问题啊,是我们哪个路径写的不对啊,咱们快速检查一下啊。好,咱们这么来做啊,我把这个前端给它也重新启动一下,然后最终我们在测试,那现在启动一下啊,刚才接口已经启动了,目前咱们把前端也启动一下,然后最终做个测试。
05:07
咱们看一下啊,目前接口部分应该都正确,里边的相关内容应该都存在,那咱们把前端重新启动下。咱们等他出来啊,出来之后我们试一下啊,首先为了明显这里边的这个内容,我先给它清一下,防止它有缓存问题啊,先给它清除一下啊。然后进入之后,我们重新访问,找到订单管理中的订单列表,大家看啊,数据是不出来了,刚才是因为啊没有重新启的问题,然后出来之后我们看里边有我们的各种数据啊,比如说每页显示五条数据,里边有分页,然后分页之后咱们简单是个条件,条件中呢,我就是这么一个就是。啊,咱们看啊,里面有很多值,我就是一个这个订单状态,比如说这个已支付。我们看里边啊,所以大家看这个条件发现啊,这个条件好像不太没有起作用,咱们看一下啊,是哪里写的不对,看一下这个已知未知付。
06:08
咱们先试一个手机号,我这里边应该有这个手机号,这个值包括订单号,那我就设个订单号啊,用这个查一下,打开这个条件。我们看啊,这个没有错,然后是个手机号,因为手机号好像我这里只写了一个手机号。啊,咱就搞,然后查询。这里边啊,我们看一下。呃,这个。这个也出来了啊,这些没有错,它问题就是里边的这个。支付状态不对,已支付和未支付这个值有问题,那咱看一下什么问题啊,咱就要直接找一下前端中的内容,应该是前端出了哪些问题。咱们看到啊,里边有这个支付状态是这个,然后支付状态呢,它是取到这个集合里面那种做了一个便利叫state list,所以list呢,我这里边加这个值一个是。
07:01
未支付一个是已支付,然后里边都取到这个值,那咱看一下咱们表里边跟他对照看一下,看表里边那个支付的状态。啊,大麦对照看一下啊。啊,咱们看啊,这里写的应该是没有错啊,就这里写是对的,包括你看上面它取的话,就取到里面那个状态值,传到那个叫O这么做,这么看没有问题,然后看一下接口中,看是不是接口中少写这个条件。大家看啊。用快递订单号手机号开始接入时间,咱发现好像没有写那个状态啊,所以咱在这里边给他加一个条件,我加上o info VO里边这个叫OS订单状态,刚才没有写这个,然后这个状态值在下面,咱们同样做个判断,最终我们做个实现,我用它快速改下啊这个值。就在这里订单状态值,如果这个值不等于空,那我们根据它做一个查询订单状态,咱们看一下字段名字,它叫做这个。
08:11
啊,这里O的加线。把这个拿过来。所以现在啊,我们刚才问题就是少写了一个条件,这个订单状态,那把这个加上之后,我现在把我们的接口重新启动一下,然后最终再做个测试啊,就这么一个小问题啊,另外说一个这么一个问题啊。各位,如果说你改了某个模块之后,你发现改完之后重启项目可能不好使,那这个时候呢,你需要把你当前所有服务都重启一下,特别是你的网关服务也需要重启一下,要不然可能会造成这个东西找不到啊,我现在请用它咱们试一下啊,重新来到前端,我先刷新。刷新之后,我们现在找到里面这个叫订单的状态,咱们搜索一个已支付啊,应该是没有数据,然后搜索一个未支付是不是查出来了,所以咱们现在啊,就把里边这个订单管理模块就完成了,咱们做到了一个订单列表功能,管理员能看到所有用户的订单的信息,这是我们实现的这么一个功能。
我来说两句