00:00
下面呢,咱们继续来实现点播管理模块,刚才完成的课程的列表功能,下面咱们实现课程的添加功能,添加功能刚才我们已经做了分析,主要是里面的三个步骤,第一步添加课程的基本信息,第二个添加课程的大纲,包括章节小结,第三步课程信息的确认,还有最终发布,那在下面开始实现发布课程过程。首先我们先做第一个添加课程的基本信息,完成它的接口,包括前端的整合,那下面咱们来写一下这个借口。首先我们先做一个基本的分析,刚才咱们提到了课程基本信息里边呢包含两部分,一个是课程基本信息,一个是描述信息,而这两个内容咱要操作的话,大家看这张图里边操作是这两个表,一个课程基本信息表,一个叫课程描述表,所以说咱们做的这个功能需要向两个表中来加数据,那下面咱来完成这个接口开发。
01:09
咱们来具体写一下。首先第一个我在这个就是。Cos ctrl里边咱们来写上这个方法,那我们来创建一下这个方法叫做添加课程的基本信息,在里边加上注解A片aator,加上这个名字,添加课程基本信息。下面我们加上它的方法。咱们写一下啊,这个方法我用提交,然后起个名字,我就叫这个。Public。最终我先他一个值,先不让他报错。所以现在这个结构我们就完成了,完成之后呢,咱是不是要得到提交过来的数据,包括课程基本信息,包括你的描述信息这个部分呢,咱们还是用这个request的保底进行获取。
02:10
用这个我们来获取,然后这里边呢,有一个对象是我提前写好一个对象,这个对象名字我们写一下啊,叫cos form view,用来得到我们最终这个数据,那这个对象我们来看一下啊,里边这个有哪些属性。咱们来打开看一下,大家看啊,有课程的基本信息,另外有课程简介,也就是咱们说的描述信息在里边都包含,所以在用它做一个封装,然后封装之后下面呢,咱们调用service里边的方法,最终实验这个添加,我们起个名字就叫这个info。在里边传入这个view对象添加之后呢,大家注意啊,我们添加之后在课程里边有一个字段,就是课程的ID,后面咱们操作章节,操作小节,包括咱们操作描述都需要用到课程ID,所以在里边我就把这个课程ID给他做一个返回,我们写个浪类型加上。
03:20
扣地。把这个返回价,然后最终加上一个理C,以上是咱们完成的CTRL层的编写,添加课程基本信息,完成之后,下面再来编写service。在service里边先把方法做个创建,创建之后来到实现类中,我们进行最终的实现,那咱们最后写一下啊,我强调因为他要添加课程的基本信息,另外又要加描述信息,所以咱把那个描述的service给它也是注进来。为了咱一会儿操作方便,那我来注意一下啊描述service应该叫description service。
04:07
我们就叫description把这个注入,然后注入之后咱们开始写这个添加课程信息的方法,那咱来写一下啊,首先第一个我写一下先添加课程的。基本信息,也就是操作咱这个S这个表,然后第二个呢,再添加课程的描述信息,咱们操作这个。这是咱们一个基本过程,那咱们先做第一个添加课程基本信息,这个过程我们调base map中的insert方法,然后咱们传个课程对象就可以了,那课程对象我在里边一个对象new这个cos,然后把里面的值set到Co里面去,这个过程中咱还是用我们之前用过那个工具类。
05:01
B里边的把中的数据。复制到cos里面去,最终把cos对象传进去,我们就实现了一个课程基本信息的添加,这是咱做的第一步,咱完成,或者说你直接get set都是一样的,这个工具类之前咱们用过,现在咱一直在用,然后第二部分呢,我们来加课程的描述信息,这个信息咱们调。Description里边这个方法叫方法里边传入描述这个对象,那我把描述的对象我们先做一个创建。Cause description。这个创建出来,创建之后向里边来设置它的值,因为它的值呢,就那么几个,所以咱就手动set一下啊第一个值。咱们通过V把这个值取到。盖他。另外注意啊,在咱们描述里边,大家看表里边描述表中是不是有一个课程ID,咱们需要把这个程ID给他也要加进去,或者说呢,也让他的ID跟这个课程是同样的ID啊,这里边也单独写课程ID,就是怎么写都对,看你的实际写法,那我现在啊,我这么来做啊,注意我的写法。
06:21
首先第一个啊,大家看我这个课程这个描述里边这个ID,我们设置一个就是主见的策略,大家看啊,这策略什么意思,Input。这什么意思啊,表示咱是不是要自己输入,所以我现在啊这么来做,怎么做呢?因为这两个表是一对一的关系,咱们让它主键对应,比如我刻制ID是一,那我描述ID也是一,然后它里边做一个对应关系,让它们做一个主键的对应,所以我这里边就不用这个字段,用它也可以啊,我就专门想写另一种方式,那这里边改成input再来试一下啊,下面我写一下。
07:01
设置它那个。课程的ID把这个进去,然后怎么设置cos description.set ID加上课程ID,咱们通过cos里边把他的ID我们给它取到。现在就完成了,最后把这个对象传进去,我们就完成了描述信息的添加,添加之后最后把课程ID咱们做一个退就可以了,所以以上是完程的添加课程的基本信息,咱就把这个接口做到了,我们做是故意这么用的,咱就不用到这个字段了,专门让他的ID一样啊,也就是这个意思啊,各有同学可能不理解,我说的简单点。比如说我现在啊,有一个课程表,有一个描述表,我这里边比如说我课程的ID是一,然后里边有课程的基本信息,这里边是描述,咱让描述的ID也是一,然后下面有描述信息,让他们做一个主见的对应,咱是这么一个关系,所以现在通过这一部分就把这接口,最终咱就完成了。
08:13
大家把这功能能给他快速做到,然后这个完成之后,下面呢,我们进一步实现,把这个功能我们最终就进一步实验一下啊,现在接口做到了,我现在把这个服务咱们重新启动一下,然后开始整合前端,把前端整合完成之后,最终我们再做一个测试。等他先启动啊,然后咱们看前端。前端里边呢,按照咱们就是固有这个流程,咱就来快速写一下啊,首先第一部分咱们来到这个课程的列表页面,在列表页面这位置呢,我加了一个就一个按钮,或者说一个超链接,这个超链接叫做A的按钮,然后它掉了一个方法叫A的,在A的里边咱们找到我通过路由跳转,让它进入到咱那个添加的这个页面,就是我们写一个vod code info。
09:08
然后咱找一下啊,看这里边。Vod cos info,它是来到这个页面,然后这里边咱的名字因为已经改成了vod cos,所以把这个需要改一下啊,注意路径不要写错vod cos,所以现在我们点里边的就是这个按钮,让它跳转到那个添加的页面。这个我们已经做到了,然后做到之后我们继续往下来做,下面呢,把刚才这个添加的接口我们做一个定义,那咱们来到里边就是这个。API里边找到cos.js。然后把接口自定义这个接口添加课程基本信息,咱们检查一下路径,不要写错,看一下啊,路径就要save,然后用的是post提交,包括里边request body,再加上一个date,这一部分已完成,完成之后下一部分我们来编写这个页面。
10:07
大家看啊,因为咱们到这个里到页面是vod里边这个VO就是里边的这个页面,所以咱在这个页面中来写咱们最终的内容,那我现在把这页面内容我们做个复制,然后咱们看一下里面的具体内容啊,咱给他就复制一下啊。我把这个。拿过来做个复制。然后复制之后,咱们检查一下里边的一些相关内容,包括里边一些相关的路径啊,咱们看一下啊这个过程,然后把它改一下就可以了。咱们给他改一下啊,首先大家看啊,咱看课件里边,因为我现在呢,做这个就是发布过程中,里边有三步,包括基本信息大纲,还有最终发布,这里边会涉及到有很多的页面,所以把页面先创建,我在课件中都截了图,那我们按照这个结构做创建,你看啊,我这里边建一个叫com,里边有capital是章节的,Video是小节的,Info基本信息的publish发布的,所以按照结构把这些我们需要做创建,目前应该用到这么多,咱先建一些基本结构,那这里边啊,我来做创建。
11:28
我就在这个路径中,咱们改一下啊,Vod里边有个cos cos里边呢,咱们建上这么一个叫com这么一个文件夹。我来做个创建,然后在里边呢,我们来创建,创建什么呢?我们建一个叫点E这么一个文件啊,或者咱对照这个图来看一下啊,你建个Ino.voe。那我来创建,注意这里边啊,我都写成大写,但你也可以小写。选到这里啊,In for.vo把这个我们做一个创建。
12:05
这里啊,我写一下。然后这个之后呢,在里边还有那种,有一个character,还有video,这两是文件夹,包括里边有那种啊,咱先把这个文件夹创建,后面我们再进一步完善,那我来创建啊,在里边有个文件夹叫这个capital。另外里边有一个文件夹叫publish,这个我也先做个创建,里边内容后面我们再继续写,先把一个结构做到,这是咱们看到的啊,然后看到之后呢,它里边用到了就是voe中的相关组件进行了实现。咱们具体看一下啊,这个东西虽然不需要各位写,但是要求各位能看懂,大家看我这里边呢,这个部分是他那个步骤部分,就是咱们看到图里面画的这个步骤,第一个,第二个,第三个,而步骤里边有个值叫I,我这里约定当是零,它就显示的那种,当它是一显示章节的,当它是二或者等于三显示发布的,而这里边你看啊,目前初始值是零,那零里边咱就到我们这个就是基本新页面,如果是一或者别的值到别的页面,这里边有它这个路由的名字,路由名字跟我这里边对应,这部分各位直接复制可以的,不是你看这个编辑课程信息,这是编辑大纲等内容。
13:33
啊,所以这个啊,我们现在就初步做到了,然后做到之后咱们把页面内容复制,我们再复制一下这个in for中的内容,然后最终我们看一下它最后的结果。我把这部分点复制过来,咱们把径还有data的字给它改一下可以了,那我们看啊,首先在fo中引入了三个,这个是因为咱们。
14:05
添加课程信息中需要做上传,这个上传的代码咱之前是写过的。就是调用我们之前写那个文件上传接口,当时咱们传到了腾讯云的cos里面去,然后往下看啊,下面初始值一个是分类的,一个是讲师的,咱们把这数据通过调用都得到这个接口都定义了,另外里边有一个分类的一个切换,就是你选择一级分类显示它对应到二级分类,这里边也做到了,然后最后就是上传成功之后,我们得到它那个路径,包括上传之前做个校验,如果有异常做其处理,然后你点保存,它里边会调这个叫CU date,调用咱们刚才这接口,实际上这个就是添加操作,在添加之后把X5值变成一,变成一之后刚才说的它就到我们的下一步操作。
15:00
我们可以创建课程大纲等内容啊,所以目前咱们把这个页面部分就初步做到了,这些过程各位给他直接复制可以了,我再说一遍这个过程啊,我们的做法就是首先在里边。我们创建这个form.view页面,然后页面中呢,加上那种,在那种里边呢有个A,通过它判断你当前做的是哪一步,默认值是零,那就是第一步,第一步添加课程的基本信息,而添加课程基本信息咱们到的是我们这个info的页面,在info页面中作答的具体内容啊,就是里边的这个地方。包括这个位置啊,都写到了,然后在info里边,我们加入里边相关的值,完成这个课程的基本信息添加,所以现在咱们把页面部分做出处理,然后在它里边还有它的章节,包括小节部分,对咱们一会儿来完善,目前先完成添加课程基本信息的线段整合,这个我们先做到这里。
16:03
然后下面呢,咱们把服务器都启动,做一个最终的测试,看一下效果怎么样。下面咱们先启动前端,我把前端打开,我们来做个启动啊,在这里啊,我们看啊,这里边呢,它报了一个错误,错误是什么呢?就是咱们有些页面还没有做到,它会报错,那咱们来看一下啊,首先对照我们刚才那个页面的图,这里边有一个开video,我们看一下啊,有个开看页面部分video啊,应该不是publish,是video啊,那我们建一个叫video。来做个创建。然后另外再来看里边有一个叫publish.vuee啊,这部分应该是一个vuee的文件,那我们来做个创建。点VE创建应该是没有这个啊,这个我删掉。这些删掉啊,然后删掉之后我们再来看啊,这里边在开特中,因为我们刚才页面中引入了开特,它里边咱建一个默认的页面,就建一个叫index.vuee让他先不报错页面中的内容,咱后续再来完成,后面咱再写,那我现在创建之后,把这个咱们重新启动一下,然后最终试一下啊,这为了后面做章节小节做准备,目前用到应该主要就是ino的页面,Phone页面是做了一个跳转部分,然后里边info页面里边是我们基本信息部分,所以大家看啊,目前再启动就不报错了,按照结构你先创建,后面咱再完善下部分。
17:37
然后这个之后,咱们下面来到页面中来做一个课程的添加部分,咱们看最终效果能不能做到,那我们来实现一下啊。首先点添加大家看啊,到咱的第一步,然后这里边是我们的第一步,里边有基本信息,那我们来做个添加,比如现在我写个课程的标题,咱就叫测试课程一。
18:02
这里选择所有讲师,我就随便选了一个欧阳老师,然后选择类别,选择后端显示二级分类,比如选择前端,选它的分类,咱们选择一个,这是课时,咱十个课时,然后课程简介,咱就是测试这个简介啊,我来看的明确。然后这个之后呢,我们再来看啊,这里边有课程的封面,那咱们点击做个上传,我就把我这里边那个图片咱们给他传过来。我们来找一下啊,我这里边应该有一张图片,把这个做个上传,然后上完之后是不是就显示出来了,这个接口咱之前做那个腾讯云cos写过,这里边就直接做了一个调用。注意这路径不要写错啊,就说里边我们刚才那个info页面中上传的径的位置不要写错,然后最后有一个课程的价格,比如咱写个100元,最终数据完成,完成之后我们点击保存,并下一步大家看啊,提示咱们是不是成功了,所以咱的第一步就完成了,这是咱们写到的后续功能,咱们进步来完善。
19:13
所以大家啊,把这个功能能做到,然后做到之后咱们看一下数据库中的数据,看这数据是否真正加进来了,首先我们看课程,刚才加的叫测试课程一。各位看啊,是不进来了,然后这个ID是33,再看描述里边找到33描述叫测试简介,是不是也加进来了,所以咱们目前就把添加课程或者说发布课程中的第一步添加课程基本信息接口和前端就整出来了,这里边呢主要是前端,各位写的时候呢,按照就是我里边的这一张图中的结构,把页面先创建,咱目前用到应该就是form和inform。
20:00
别的页面后续来完善。所以现在啊,第一个部分我们就讲到这里。
我来说两句