00:00
各位同学大家好,咱们继续完成课程列表功能,刚才呢,咱们把接口已经完成了,通过条件查询带分页完成了课程列表的接口,那下面呢,咱们来开始整合前端,把前端功能最终我们进行实现,那下面咱们开始做个整合,首先第一步在前端里边呢,按照之前相同的方式,咱们先添加上一个路由。那路由我从课件中复制一下,把路由加进去,路由里面有很多,有些呢,咱们暂时先用不到,咱目前用的应该就是一个课程的列表功能,所以我重点把这个咱先给他拿过来。我在里边复制一下,复制到我们的这个位置,然后在里边有很多有些咱暂时用不到,后面用的是咱们做那个添加课程部分,目前用到应该就是一个课程列表部分,这是咱的第一部分加路由,然后加上路由之后我们的第二部分,我们来看一下啊,在路由里边啊,有一个小问题。
01:07
之前咱们写那个讲师管理的时候呢,当时咱用的part叫vod啊,这里边呢,我们写的也vod,为了跟之前区分,我们给它稍微换一下,改成叫vod,就是视频课程vod cos。跟之前去分享。然后里边到vod里面来啊。给它改个名字,跟之前有个区分,然后在里边把路由创建之后,下面呢,咱们根据它的这个结构把页面我们做创建,页面呢在vos里边咱们有个目录叫VODVOD中呢有一个文件加叫cos cos里边我们建第一个页面就是list点。小D位置。然后这个页面中,后面做咱的列表功能,另外里边还有一个form是后面做添加的,这页面我也先提前创建出来,为了后面咱们操作方便。
02:06
form.ve另外里边还有一个页面,这页面为了最后做那个统计使用,叫chart,这咱们在里边也给它创建出来。我在里边做一个创建。所以现在咱把路由和页面都完成创建,完成创建之后,咱们的下一步操作把咱们要用的接口在API中做定义,那首先我在API里边的vod中先建个JS文件,这文件就叫sjs课程的JS文件,把接口在里边定义出来。这个部分我从里边复制出来,然后咱们把路径给它改一下。我们来看一下这个路径啊。找到CTRL里边admin vod cos,传入当前页,每日记入数和条件对象用的是get提交,这是我们目前的路径。另外你注意啊,咱们传参数这里边我并没有写request body,所以这里边加上叫,如果你写的是body,里边要加什么?
03:14
是不是加个date,咱之前讲到过,所以这个接口做个定义,定义之后最后我们写这个页面,但是我们在条件查询中呢,它需要用到那个,就是看这张图里边啊,就是这个效果。有你的课程分类部分,课程分类呢,咱们之前应该写过这个接口,也是会用到我们当时定义的这个接口,所以咱一块儿直接调就可以了,这个咱就不需要再定义了,因为之前已经定义过了,然后最后呢,咱就编写这个页面,页面就是list view中,那我把页面内容直接复制过来,然后改一下里边的具体内容。那咱最后写一下啊,来到list.ve中,把页面内容我们直接复制,复制之后各位注意啊,一般来讲页面的上面部分用的是element UI中的组件,这部分一般是没有什么错误的。
04:08
而咱错误是下面部分,最后把下面部分我们做一个修改,首先看一下啊,里边引入几个JS文件,大家把JS文件先检查路径,不要写错。A片里面的vod中,第一个叫,第二个叫,第三个叫subject,这些都正确。下面定义变量和初始值,然后这里边调用第一个叫fech date,它来得到咱们那个课程的列表信息传入参数。然后咱们看啊里面这个特点。第一个是它这个集合,然后集合呢,咱们到我们接口中看一下,咱是放到map中,集合的名字我们叫records,所以这个名字要跟你接口中保持一致,这各位特别注意啊,我强调一点,咱们在复制前端的时候呢,一般改的两个地方,第一个你的路径可能跟你这个不一样,改一下,然后第二个就是接口反映的名字可能不一样,也就是respond date的名字不一样,咱要到接口中看一下,第一个叫。
05:17
然后看第二个这个名字total count,总记录数,这个需要改一下,这是咱们第一个得到。分页查询的列表,第二个初始化分页这个数据这个方法,然后这里边因为咱们做这个条件查询中要得到你的一级和二级分类,比如说一级后端前端,二级Java javascript,所以咱们通过零得到第一级,把数据得到,另外调我们的这个方法叫init teacher list得到所有的讲师,咱们调里面这个方法,Teacher API中的方法我们看一下啊。就是里边有一个应该有一个查询所有讲师的方法,把这个我们最终得到这个方法呢,我们目前好像是没有啊,那单给他快速写下啊,然后把这方法用到,因为咱要显示所有讲师,也就是在页面中的这个位置。
06:15
往上找一下啊,页面中的大家看啊,就是这里。由你所有讲师要列出来,所以咱们要一个方法就是查询所有的讲师,那这个接口咱好像目前是没有,那咱们快速写一下,因为很简单,我就直接写一下啊,查询所有讲师,那我来到讲师的CTRL里边,这里边。咱们几个方法查询所有的讲师,就把所有讲师查出来可以了,这个方法之前应该也有,就这个,就这个范兜,然后里边之前有异常的模拟,这个我先去掉,咱把这个方法做个定义,然后一会儿直接掉就可以了,那我现在定义一下啊,在teacher里边按照结构我们来写一下啊,就跟这结构差不多,咱改一下。
07:04
这个是查询。所有的讲师,我们起个名字叫list,这里边不需要什么参数,然后咱们加上它的路径,Admin vod teacher。看这路径啊,上面应该都写过,跟那一样,然后它后面名字叫这个find o,它是一个get提交。把这个写过来。就是在我们这个位置啊,Find。Get,提交它不需要其他参数。现在这就可以了,然后可以之后我们在页面中做过调用,调用list得到数据,最终返回,这是穿梭讲师,所以这些都得到了,然后得到之后呢,在里边还有一个方法,比如现在啊,我们点击一级分类,是不是显示它的二级分类,所以咱们再次调方法,比如说我现在。什么意思呢,说的具体点啊,就这个表。
08:02
比如现在啊,我点击后端开发,是不是要显示后端开发下边有哪些分类,那后端开发下边是不是有Java,就根据他的ID查他的相同数据,所以调的是这个方法,最终进行实现。包括由你分页的页码数的改变。这些内容。所以以上啊是咱们前端的部分,咱们就最终整出来了,这各位直接复制可以了,你把里边那个路径,包括respond data的名字改一下可以了,包括咱们看一个细节啊,就这位置。我点击一分类调这个方法,这个方法中就是刚才看到的,根据它的ID值得到它下一层二级分类,咱们都是调我们刚才里边的这个接口进行实现,得到它的下一层分类,也就是调这个接口啊,这些都写到过,所以以上就是前端的一个整合,咱们就最终完成了,完成之后最后咱们把效果试一下,看一下最终这个效果怎么样,能不能把咱们的所有课程按照条件查询带分页的效果最终显示出来。
09:11
那咱们试一下啊。首先我把后端接口咱们先重启一下。各位注意啊,咱们之前在这个查所有讲师的时候呢,我们做了一个异常的模拟,咱为了有效果,这个异常的部分需要给它注掉,要不然效果肯定没有,它会提示总是报错,这一点他会注意一下啊,然后咱们等它启动,这是后端部分,前端这里边也是成功的,最终我们来做一个测试。然后现在看一下啊,我先登录进去找到这个叫点播管理里边有一个叫课程列表啊,当然在路由前面呢,咱们可以加上一个图标啊,不加也可以啊,咱也加一下吧,咱追求完美一点啊,给他加个图标。与默认不加功能是一样的,就是加这个。
10:00
一个图标啊,Icon我们加上一个table,加到这里边这个位置。然后加上之后我们再来看一下啊,你看啊,点播管理中课程列表是不是有这个图标,这个就可以了,然后咱们点击课程列表,大家看里边我们看啊,数据是出来了,这样的话就完成了这么一个显示啊,包括你看啊,我现在一共有19条记录,现在是第一页,我可以点第二页进一步显示,这个我们就做到了啊,有些应该没加图片啊,咱就找有图片的。这里边正常都可以了,然后正成以之后我们在里边呢,是个条件大家看啊,这是第一层分类,是不是这些默认第二层为空,比如现在我点击后端开发大家看。显示是不是Java,比如现在啊,我点击前端显示javascript里边有这个条件部分,然后这个位置有标题,有其他内容啊,这些内容,比如说现在啊,我就根据这个标题咱查一下随便写个啊,咱就查询一个叫Java。
11:10
查询大家看Java相关课程是不是查出来了,然后清空查所有这个位置,有所有的讲师,咱们能根据师做这么一个查询这个啊,我们看到了这么一个基本的效果。然后这里边呢,有一个小问题啊,大家看页面中,你看讲师是不是有的没有啊,应该是我当时数据的问题啊,大家看一下啊,就是讲师里边在我课程表里有讲师ID,而讲师这里边咱当时这些数据是不是已经删掉了啊,就这个问题我给他改过来啊,为了咱们有这个效果,然后改过来之后,到这里边我们再重新看一下。大家看讲师名称是不是都有了,所以以上我们就是完成了里面这个功能。课程列表的条件查询待分页,这是我们实现的第一个功能。
12:02
包括它的接口,包括前端,我们最终就完成出来了。
我来说两句