00:00
各位同学大家好,下面呢,咱们来完成课程列表和课程详情前端的整合,前端整合呢,就是在微信公众号中通过H5页面进行显示的过程,这个代码之前提到我们已经开发完成了,但是这个过程给各位详细来介绍一遍,把每步怎么实现的给大家详细说一遍,所以下面咱们开始看一下前端的整合,然后最终完成。相关的功能的测试。其实这个前端开发呢,跟我们之前做那个后台管理系统是差不多的,只是说我们现在这个前端项目,我们并没有基于什么框架,是直接用voe的骨架构建一个项目进行开发,那咱们看一下这前端到底是怎么做的,我们看一下啊,首先咱之前提到在这个APPVO中。是我们的主要页面,当咱们访问菜单里边的功能都需要做一个授权操作,这之前说到过,那下面呢,咱们开始看这个具体功能。
01:06
首先我们看第一部分,在我项目中呢,我这位置也是有一个路由的文件,那咱看到啊,路由文件在这里叫root里边的inext JS,我这里强调啊,这个过程呢,我的课件中每步都写的很详细,我这里边把这步骤给各位同学再详细来说一遍,前端代码虽然不需要各位从零去写一遍,但是流程包括有问题应该能快速找到它在哪里,流程要特别熟悉,那咱们下面来看啊,第一个路由文件在这里边带的宅子里边。然后各位看啊,里面有它的路由,这是我提前写好的,那能找到咱们当前的路由,当前用的应该是这两路由,那咱看什么意思啊,首先看第一个我的路由的路径叫cos冒号sub ID就是传入你的分类ID,这是路由路径,那路径什么意思?咱们看到我们的菜单的这个表里边,我把这个表打开,在这里边叫menu表。
02:09
然后大家看啊,在me表里边各位看到,呃,这个没点出来这里啊,在里边各位看这个URL路径,比如咱们举例这个叫后端开发,大家看到路径啊,我们是这么写的。然后把这路径咱们拿过来比较来看一下,各位看径是不是叫cos加个一,这个一是什么呢?对应的就是你这个分类的ID,所以当咱们访问这个路径的时候,它就跟这个能匹配上,然后匹配上之后怎么做就会跳转到你的这个页面中,显示分类里边这个课程的列表功能,这是第一个,那咱找到这个就是。课程的分类的里边,这个课程列表这个页面,它是在views里边有一个叫cos.voe,就是。
03:01
找到啊cos啊,在这里这个页面中显示列表,另外我们再看下一个路径这个。注意看啊,这个叫cos info冒号cos ID是显示课程详情,就是咱们传入课程ID,进入详情页面,详情页面在这里叫cos info view。所以这就是路由通过路径,包括页面跳转,比如咱们路径这个路径,那到列表功能,包括你的详情,那它到这里边去,这是第一部分,然后第二部分我们往下来看啊。这里边因为咱要调接口,所以接口咱们同样建JS文件,把接口进行定义,那咱看啊,文件在这里,API里边有个文件叫cos.js我在里边写了两个接口,一个课程列表,这么一个接口,一个课详情接口,这个咱们已经做到了,把这个做定义,跟我的路径应该一样啊,就是我刚才写路径的时候,我是故意从课件中复制的路径,为了前端方便,如果你是自己写的话,需要把路径得给它检查一遍,跟这个保持一致,这是接口定义。然后下面就是两个页面,那咱看一下啊,第一个页面,这个页面叫cos.voe是课程的列表页面,那咱看这页面啊。
04:23
在页面里边,咱们从上往下看,它里边有相关的这个内容啊,包括你看啊,这里边有个事件叫unload。什么意思啊,就表示页面加载时候,它会触发,然后调这方法,就叫onlo的方法,这个方法然后在方法里边我调了下一个方法,叫fech date fech date中就是调用我们接口中的方法,然后得到咱们的最终内容,包括里边你看啊,里边有一个list,然后他把数据放到list中去,包含有其他值,然后这个list最终在我们的上面部分,它用这里边做了一个便利显示,就这位置V-four是便利做了显示,所以这就是我们说这个。
05:08
课程的列表的这个部分,这个我们就看到了,跟咱之前管理员系统中应该是差不多的。然后下面有一个详情部分,详情部分呢,他在这里就是点了一个叫去看看,然后到info方法中传入课程ID,在info中我们通过路由跳转到这个路由,这咱刚才看过啊,Cos info里边传入课程ID,然后它会到咱们这个叫cosfo VO中。咱们看到在这里边呢,我们引入了相关的文,然后往下看啊,里边得到你的课程ID,然后调方法,就调用咱的接口,最终得到里边的内容,内容里边包括你这个课程的VO对象描述,包括章节小结,讲师等等,最终做实现。
06:00
啊,但是这里边还有一个分享,这些还没有说到,后面咱再完善,但是目前页面里边把这个分类里边的课程列表,包括课程详情,我们的前端部分应该已经。给各位做了一个说明,所以各位啊,把这个能给他熟悉这个流程里边的径要跟你的接口保持一致,所以这就是关于课程列表,还有课程详情的前端介绍,那这个介绍之后,下面呢,咱把功能做个测试,看一下最终效果怎么样。我们来测试一下啊,首先第一个各位注意啊,咱们的接口呢,因为刚才是改了内容,所以我现在把接口服务给它重新启动一下,另外就是前端需要启动,我这里前端已经启动起来了,另外注意啊,内网穿透需要启动,这必须要有,现在这些我都听起来了,然后咱们等它启动完成,最后进行测试,看一下最后结果就是列表和详情能不能进行显示。
07:06
那咱来看一下啊,首先我打开微信公众号,我就点了一个课程,比如说现在我点了一个叫后端开发。大家看啊,跳转到一个页面中去,然后在里边这个位置啊,它有这么一个显示。但是现在啊,显示之后,咱们稍微等一会儿。我们发现啊,等一会儿之后呢,这个数据好像是没有出来,那咱们看什么问题啊,首先咱们看这个vod里边目前还没有输出,咱们稍微等一下看是不是因为比较慢的问题啊,因为我这用内网穿透这种测试可能会慢一点,实际中应该没有这个问题,那咱们稍微等一会儿,如果还没有出来,咱再调试,看到底是哪里出现的问题。啊,咱们看啊,这个控制台中呢,有日志输出,刚才应该是比较慢的问题啊,然后咱们看页面里边,你看啊,页面中它提示我一个叫成功,然后我点OK。
08:04
咱们看数据是还没有出来,那咱们看什么问题啊,这个过程中呢,后端应该没有错,是正确的,那咱们看一下前端是哪里写的不对,前端呢,其实是开发好的,那咱们找一个文件看一下啊,大家看这个文件。JS这是封装一个JS文件,然后各位看啊,在文件中呢,有这么一个地方叫intercepts,什么意思啊,是不是拦截器啊,就是每次请求他先执行这个请求拦截器,然后每次接口反应数据执行这个响应拦截器,然后在响应拦截器中,大家看啊,这里边有个判断。各位看到这个问题了吗?应该能看到啊,你看啊,我们目前的接口呢,成功的时候。返回的状态码是什么?是不是2万呀,但是我的前端根据200是不是判断,所以这么判断它永远是失败,刚才弹出成功,就把你的信息返回了,它提示咱们成功,但是它是失败的一个判断,所以咱怎么做,把这个状态码改成2万,要不然效果是不对的啊,咱们做个修改,修改之后我把前端重新启动一下,然后最终我们再做个测试,刚才是这个问题,因为这里边应该改成2万,而不是200。
09:23
啊,这个状态码判断是错误的,咱们等它重启,最终再试一下啊,我现在来到里边,比如现在我点这个大数据活动开发都可以,我就点大数据,然后在里边咱们看效果啊。大家看你看啊,现在这个列表数据是不是就出来了,这个咱们就完成了显示啊,包括里边是咱们分类下边的课程,这是第一部分,然后这个之后下面呢,咱们现在点击某一个课程看一下课程的详情,那我点这个叫去看看。大家看啊,你看现在是不是到了一个详情界面啊,只是因为我现在是用这个电脑测试,所以这个图啊拉的比较多一点,你在手机上应该就没这问题了,应该是正常的,所以现在详情页面也出来了,包括在里边也可以进行这个观看啊,包括播放等等。
10:15
比如说咱可以再试一个,假如我试这个去看看。你看数据是不是出来了,所以咱们现在就把这个公众号里边点播课程中这个列表,还有详情功能,我们就完成整合,包括接口部分,包括前端部分。
我来说两句