00:01
各位同学大家好,前面这些内容中呢,咱们把前端中的基础知识都已经说完了,包括搭建了前端的项目环境,通过wee me to完成搭建,并且改成了登录,以及完成了跨域的这么一个解决。那下面呢,咱们干什么事情呢?咱就开始开发我们的第一个模块,讲师管理模块的前端。之前咱们把讲师管理的接口应该是已经完成了,咱之前通过swag也都测出来了,那下面呢,咱就把这个讲师管理的前端最终整出来,那下面咱们开始写这个前端,那前端怎么做,咱们一步一步进行实现。首先咱们看一下啊,在咱们项目这个环境中,我们来进行操作,首先大家想一下啊,我们的第一步应该干什么事情。大家想一下应该做什么,咱们看啊,在框架中给咱们是不是自带了很多功能,包括里边这些东西,那咱们要做的第一个事情,在我们这个框架中,咱是不是也要加上这么一个东西,这东西是不是叫路由啊,点击不同的路径,跳转到不同页面,显示不同内容,所以咱的第一部分就加上一个讲师管理这个路由,那我们来写一下咱们这个过程。
01:24
我小弟位置。首先,第一步。添加讲师管理的这个路由。把这个咱们给他加上,那路由怎么加,给各位做个介绍,大家看啊,在咱们这个框架中呢,有个文件夹叫SRCSRC里边有个目录叫root root中有个文件叫in internet.js所以咱们要做的话,那就是在in Internet的JS里边来添加上我们的路由,这就是它的第一步。然后把这个给各位截个图,然后咱们在里边加一下。
02:01
这个接过来,然后接过来之后我们看一下啊,在框架中呢,有个文件叫问点JS,就是它那个入口,然后在问点J里边,我们看到这个位置,当咱们启动项目,它把root目录是不是就引入进来,然后最后在E中加载上你的路由,所以咱们在里边改路由,那怎么改?咱们看一下啊,它这里边有一个结构,然后结构中呢,本身它自带了很多的事例,比如说大家看有个example,有form,有其他的路由,那咱们参考这些快速改成咱的效果就可以了,那我来改一下啊,咱们现在找到里边有一个example这个。然后我现在啊这么来做把example呢,我们来复制一份,我在上面直接复制。然后复制之后把里面的内容改一下,咱们看需要改什么,首先各位看第一个啊,有一个叫example。
03:03
这个内容,然后后面有它的其他内容,那大家看啊,比如现在你看咱看这个地方变上,注意我这个光标这里啊,比如你看我现在点这个吹,大家看变成什么,是不是example tree,我点table变成什么table啊,这功能咱没有写,所以现在变成这些内容,然后这些内容怎么变的,咱看路径中啊,它的上面叫example,有个children,代表第二层,第二层中是不是有table,当你点的话就显示example table example tree,这是它那个路径,就是在里边显示现在我们的第一部分,把路径改成我们目前的路径,那我来改一下路径啊,那我们来写一下。然后在里边进行实现,因为咱们做讲师管理这个功能,为了后面咱们做那个视频点播,就是点播课程做准备,所以咱们在路径中起个名字,这个名字我就叫vod。然后第二个叫layout layout什么意思呢?表示你的布局,就是布局成这个样子,这是第一层,这是第二层,这叫布局,第三个有个就是你的重定项地址,那这个什么意思,我强调啊。
04:15
比如大家看啊,我现在这么输入,我直接就输入一个一个example,然后回车,它跳转到是不是就table里面来,要就表示你直接输入里边这个vod到那个页面中去,那比如现在我写上一个vod,然后加上这么一个,比如叫这个cos。或者我直接就叫这个list。所以现在啊,写上这么一个结构,后面咱再改,然后下面有他的这个名字,这个名字我改一下,比如咱们叫那个就是。我们这个模块讲师管理啊,其实咱后面都是在点播中,虽然统一都叫这个点播管理,这个我就叫vod,下面有一个叫主要是这个啊,大家看是不是一个title title就是你最终这里边显示这个名字,那这名字我们就叫这个。
05:08
点播管理,然后后面是你的图标,比如说在咱们前面有这种一个图标,这个之后往下看啊,下面是它的第二层那种,那我写一下,比如说第一个路径,我就叫这个,就是讲师部分嘛,咱们起个名字我就叫这个teacher。告。利道。这是我们写的名字,然后下面起个名字,就叫这个teacher。List这位置什么意思呢?表示我点这个就是路径跳转到哪个页面,页面咱一块儿写,然后这个title里边我就写一个叫讲师列表。叫这位讲师列表,这是它那个图标,然后这位置我起个名字,我叫这个teacher。
06:05
呃啊,随便起名字,然后这位置我起个名字叫这个teacher,这名字可以随便保证跟别的路径不一样就可以了,这是页面,这位置我们叫讲师的添加,或者说添加讲师。所以以上呢,咱就把这个路由就加进来了,主要改的是里边这个pass路径,还有里边这个title,这个名字,这个完成完成之后咱们看一下啊,大家看我这个页面中,我重新刷新,你看这个位置有点播管理讲师列表添加讲师,现在我们是不是就加进来了,所以这是我们完成的这么一部分,就是讲师管理的路由添加,或者说啊,咱为了明确这个我先就改成讲师管理,为咱看的更明确。所以现在第一步路由咱们就完成添加,最终看到这个样子,而这个加很简单,各位到这个文件中仿照其他的直接改成笑可以了,改你的路径pass,改你的title名字就可以了。
07:12
这个咱就完成了,第一步添加路由。各位快速加上可以了,然后添加路由之后咱们继续往下来做,下面我们做第二步。第二步怎么做呢?我写一下啊,因为咱们第一步加了路由,当我点击讲师管理,是不是要到一个页面中去,点添加管理要到第二页面,所以第二步咱就写一下这个路由跳转的页面,把这个我们做一个创建,那咱们来写一下这个部分。我来写一下啊。首先我们看啊,页面是在这位置,Comment加上是你页面的路径。呃,这里我就改成teacher例这个啊,然后大家看这里,然后首先注意啊,在框架中约定页面都写到views里边,那我在views里边写上咱的页面,比如我写下啊,首先我见文件夹我们都叫VD。
08:13
然后在vod中呢,我在建文件夹,我们叫。Teacher。当然后面可能还有别的文件夹,咱为了看到方便啊,我再来一个叫cos,后面咱再用,现在用teacher teacher里边呢,我建两个文件,咱们看其他的文件我们看啊,其他文件是不是都是vuee的文件,所以咱们也这么创建,那我创建两个,第一个文件我就叫list.vouee。然后第二个文件,我再建一个作为那个添加的咱们叫form.vo就是表单的页面,所以现在两文件完成,完成之后把路径给它改一下啊,注意这个路径大家看啊,Views里边。我们有第二部分加上一个叫vod,就是里边的你看啊,这个位置这里,然后在vod中再加上一个叫teacher。
09:07
Teacher里边加上你最终那个页面,咱的第一个页面是这个list的,对他的写法啊,包括你可以参考其他的写法,咱看这个tree的写法,Waves tree是不是index,所以我的写法就是waves will teacher list,这是列表页面下面添加,跟它类似。添加页面的名字,咱们叫这个form,所以现在第二步就完成了,创建路由对应的这个页面,我们在这位置进行了一个创建啊,当然名字你可以起别的名字,只要路径能对上就可以了,但是这个步骤必须要做到,所以第二步完成,完成之后呢,下面咱做个简单测试,我在页面中呢加上一段内容,咱来试一下啊。这个内容呢,框架中已经约定好了,因为它基于voe加MUY,所以要求页面中呢必须写上,他们得加div,具体内容写到这里边,就是用那个I的UI进行实现,比如咱们写第一个叫做讲师列表。
10:15
然后我再写第二个叫讲师的表单,目前页面中加了内容,加完之后咱们试一下这个效果啊,大家注意啊,我点讲师列表。是不是列表点添加。是表单,所以你看现在啊,点击不同路由跳转到不同页面。然后他在这个位置。也给我们做了封装,显示不同的内容,所以现在我们的第一步和第二步就完成了,添加路由,并且创建了页面,这个就完成,这个各位能做到,然后做到之后我们继续往下做,下面咱看第三步。该怎么做?我强调啊,因为咱们最终目的是不是要在前端调用接口,所以第三步呢,咱就需要定义一下我们要调用那个接口,包括你接口的路径。
11:11
提交方式,还有参数等内容,咱们需要自我定义,那怎么定义我说明啊,框架中约定,注意这是框架的一个规范啊,在SC的A片里边建JS文件,然后在JS文件中我们来创建接口,或者定义接口信息,在这里边进行操作,那我来创建一下啊。比如我建个文件夹就叫vod。这个,然后在vod中我建一个JS文件,咱就叫teacher.JS名字随便起,只要能创建定义可以了,这是我们的第三步,在这里边建JS文件,然后定义你的接口。这各位知道,那下面我们来做个定义,这个定义呢,你可以参考其他的文件进行操作,因为跟其他的都差不多,那咱们来做个参考啊,我就以这个为例。
12:06
把这个先复制到teacher里面来,咱们看什么意思啊,首先第一步。引入了一个JS文件U中的request,咱找一下啊,这里面。Request。然后这里边呢,把阿贾克斯部分给我们做了封装啊,这里边已经封装好了,基于这个。AXLS做的封装,C把它进行引入,引入之后下面部分写上你的方法,然后方法这个写法isportt在说过,是不是那个我弱化开发,就是你可以这么写,或者写一个isportt defportult都可以啊,那我就这么做了啊,我加上一个叫。Ist default。把这么来写啊,然后在里边加上咱的方法,首先第一个方法,咱就写我们的第一个功能,就是讲师的条件查询分页的功能,我来写一下啊,起个名字,名字比如说我就叫这个配置。
13:08
List的,这是我们写的方法啊,当然可以叫别的名字,咱们做讲师条件查询带分页对照接口看一下啊,看一下这个接口。我们找到这个,然后你看啊,接口中咱是不是三个参数,当前页,每页记录数,还有你的条件对象,所以在方法中我们加上三个参数,第一个我们就叫current当前页,第二个limit,每页记录数,第三个条件对象,我们起个名字,比如叫search。这个OBD啊,这个名字当然可以叫别的名字,只要写上三个参数可以了,我加个注释给各位特别标注一下啊,第一个功能呢,咱们写的慢一点,后面再有这个功能我们就复制了。首先,Current代表。当前页。
14:00
厘米的代表就是每页显示的记录数。另外search o BG代表你那个条件的那个对象部分,这是咱们的条件,然后写完条件之后,在里边呢,写上这么一个结构,跟它保持一致,用它改一下啊,然后写完之后这个可以去掉了,因为咱不能两种方式都做,再用这种方式,Is portt default定义的方法,然后下面写这个结构啊,这结构是那个AX iOS里面的封装,那咱看怎么做啊,首先第一个加上你请求那个接口的路径。这接口路径中,各位看这个位置啊,就是在这里。这里什么意思呢?在咱之前有个文件,这个文件它取到的是你的这个值,就是你的IP和端口号,你看这个名字。跟这里边就是那个快的JS里边是不是一样把这取到,所以这里写的是以那个就是CTRL类上边和方法上边的路径,那咱们从里边复制一下,这个要求各位最好复制,不要手敲,很容易写错。
15:11
那我来复制一下啊,咱写这里。In vod teacher加上方法上面的这个就是find query配置加上当前页,每页记住数,把这个咱给它写过来。现在这就写出来了,然后写完之后里面有两个值,一个当前页,一个美的计数数,这两值呢,咱们第一种方式,你可以做个字符串拼接,但是咱之前曾经讲过这种写法。这各位记得啊,用这个叫什么。应该记得啊,它叫模板字符串,然后咱们通过表达式把这只取到一个当前页,一个每计数数,这名字不要写错啊,有同学可能写个配置肯定不对,因为你的名字叫current,跟他要保持一致,这个叫limit,这咱的写法,然后写完之后我们再来看啊方法提交方式是POS提交,这里咱们改成POS,最后有个参数色OG。
16:14
这怎么做?我来说明啊,给大家强调。因为咱接口中加的是不是叫body啊,表示用Jason传递,所以我强调啊,如果说啊,你使用的是Jason格式进行传递,那咱的写法怎么做?加上一个名字叫data冒号,加上你的参数,这是它的写法。然后再来写,如果说我们就是使用的是普通的格式传递,就不是Jason传递,那怎么写?它的写法就是你加上一个叫tro模。然后后面加上你的那个名字,咱们叫search OBD,就看你怎么做了,这date也好,Camera也好,是框架封装的,因为咱们现在是写了body,用这份传递,所以里边怎么做,加上一个叫date冒号,加上色V,这么写之后,它就会把这个对象转成Jason传递,然后咱在接口中得到这数据,请封装。
17:19
注意这个写法啊,是前端的做法,所以咱们现在把这接口就完成的定义,注意这些名字,这些路径不要写错,另外我们用到了模板字符串这个特点。这个完成完成之后呢,咱可以把代码再进一步完善一下啊,也为了用一下之前的知识,比如现在我这么做啊。大家看我CTRL上边类上边路径是不是都是固定的,不同的是你方法上边的路径不一样,所以咱这么做,我把类上面路径给它抽取出来。加上一个叫。比如API。
18:01
等于我们这个路径。然后我现在把这段路径给他拿过来啊,咱就加上这个路径放到上面。然后放完之后,呃,少一个引号啊,放完之后我把API name在这位置用表达式给它取到API,这么做是不是也可以啊,后面咱们统一用这个路径,因为你的类上面路径都是一样的,所以这是我们一个抽取。这各位要知道啊,用到还是咱之前说那个模板字符串,这个不要写错,模板字符串可以作为普通字符串使用,另外支持表达式取到你变量或者常量中的值,另外支持调用方法。所以现在我们的第三步就完成了,在JS文件中定义我们的接口。这各位给他知道啊,这是我们的第三步。然后这个完成之后,下面呢,我们进入到第四步,给各位写一下啊第四步。
19:03
我写到这里啊,现在我是一边写一边说它的过程,第四步怎么做呢?咱们在我们具体的功能的页面里边来调用咱们的接口,然后最终得到数据再进行显示,也是最后一部呢,咱就编写页面了,那页面部分呢,首先我先写里面这个就是list.voe也就这个页面咱们做列表。然后在里边怎么做,给各位说明啊,大家看它的特点。首先第一部分啊,你可以理解为在to div里边呢,咱是用那个element u进实现这段代码,不需要各位敲,因为都是UI提供出来的,咱直接复制用就可以了。然后在下面部分,咱们加上我们的script的标签,就是你写上那个Java SQ代码,比如说咱们在这里边做调用,咱们核心写的是这段代码,这各位注意,那下面咱就开始写这个部分。
20:03
以上啊,咱们就是目前完成了前三步,添加路由,创建页面,定义你的接口,然后最后在页面中调用得到数据,最终再显示,我们先写到这里,然后一会儿进一步往下完成。
我来说两句