00:00
下面呢,我们继续实现讲师管理列表的前端的整合,咱继续往下来写,刚才呢,咱把这个基本结构完成了,我们提到上面部分用的是iman的UI,经完成下面编写Java代码,咱重点也是写下面部分,那我下面来写一下,咱看怎么做啊,我写的稍微慢一点啊,首先第一步,因为咱要调接口嘛,所以第一步怎么做,咱们先引入咱们定义接口的JS文件,把这个先引入,就刚才这个teachers文件先引入进来,那怎么引入呢?按照咱们之前学过那个写法,有ES5的写法,有S6的写法都可以,我们现在直接用ES6进行编写。那我来写一下啊。加上,然后咱起个名字,我叫 teacherA片,这名字随便起,加上from,然后加上你这个,注意它的路径写法啊,跟之前不太一样,这是框架中约定你需要加上一个艾特斜杠,跟咱之前说那个点杠有点类似,只是框架中呢,知识是艾特斜杠,然后加上你的文件夹A片,再加上vod,然后再加上我们这个teacher.JS,把这个引入,这单要写对,注意啊,艾特杠是框架中约定的固定写法。
01:25
另外在里边呢,还有一个细节,如果你的文件是JS文节,那点JS这个后缀名可以省略不写,直接这么写就可以了。APIVOD加上teacher,然后现在就把文件引入进来了,这是我们的这么一个写法,然后引入之后呢,里边会有一个错误,咱需要等一会儿,你看我现在这错误就没了,因为它要解析一会儿,目前可以可以之后在这个叫portt default里边加上咱们的具体结构,这是它的约定结构,那怎么加,我写一下啊,第一部分加个方法,咱们叫date。
02:04
然后date里边呢,加上一个退大括号,在这里边做什么,就定你当前这个就是需要用到的变量,还有一些初始值,比如咱定一个数组定义什么,其他值就是变量和初始值叫data里边,然后下面呢再加一个方法,这一方法咱也说过叫科的。各位应该记得啊,问各位created是干什么的?当时咱们讲voe的生命周期中提到过,他在我们这个叫页面渲染之前是会执行,里边一般是阿里克斯请求得到数据的最终显示,这叫,然后最后再加上一个叫methods method里边就写我们的具体方法。就是写我们的具体的这个方法。然后咱们发送阿贾的请求进行实现,比如说咱们写个方法,这方法我起个名字叫这个CH。
03:05
Date啊,当然你可以叫别的名字啊,这名字我随便起的,然后这里把方法定义,然后在create里边,咱们来调用这个方法,用this.fe date做个调用,所以以上是咱们一个最基本的结构,咱就完成了,完成之后咱们进一步写下这个特点啊,那我们来进一步实现啊,那怎么实现我说明啊。首先我们在date中呢,先定义变量和初始值,就是定一些变量初始值,为了后面使用,那这部分呢,我就从课件中直接复制的,因为就是一些变量和初始值的部分,我直接拿过来啊,咱先拿过来,有些呢可能暂时用不到,咱也先放到这里,咱们看一下啊,第一个就是例子代表,咱们查出那个例子集合,第二个总记录数透透,包括你的当前页每月居住数。
04:04
另外OBG是条件最后一个暂时用不到,咱先给它删掉。所以现在啊,我们就定义了变量和初始值,这是第一部分,然后定义之后,咱们下面你看啊,当我一进入页面,Create的方法是不是先执行它,在执行的时候调用date的方法进行实现,所以在fe date里边,咱就通过我们这个刚才定义的这个方法进行阿贾克斯的请求。那我们来请求一下啊,看怎么做,这个引入的文件名字叫teacher API,所以咱调用teacher API中的这个方法,这方法叫配置list,把它拿来。我说个小问题啊,这里边点的话,那方法是点不出来的,你需要手动复制一下这个方法配置例子,你要调它,然后在里边传入三个参数,我们写一下啊,就这三个参数,我强调的。
05:03
你要用当前voe中的属性和方法,需要加上一个Z,第一个当前页配置第二个。低密他。第三个条件对象search o BG这样的话,咱们调用的方法,然后调用之后加上一个叫点,在点赞里边呢,我们起个名字,我们叫response箭头函数,然后response就是你接口返回到数据,咱之前也写过,所以现在就完成了,然后这里边呢,还有一个叫开式,就是它如果有异常会怎么样,但是开呢咱是不需要写的。为什么不需要我们看个地方啊,找到引入的这个快的这文件中,咱把这个找到看里边啊,给咱们封装了一个地方,大家看就是这个位置。你看这个啊,叫拦截器,当你接口反应数据,先执行这个响应拦截器,然后在响拦截器中,我们这个位置做了一个判断,这个判断如果你的状态嘛,不是2万。
06:11
他就直接给咱们弹出错误信息,如果你是2万,那把它进行返回,所以现在。有错误的时候咱们不需要处理,因为框架中已经封装了它用到了IUI中的组件给咱会弹出这个irrow的错误信息,所以这里边不需要加开值,直接写个Z就可以了,然后写完then之后,里边有个咱们把这个response给它做个输出,然后咱们一会儿看一下效果怎么样。所以以上呢,是咱们编写的这么一个基本过程啊,咱们把这个就做到了,它就会调用接口得到数据,我这里边把数据也做了输出,另外还有一点刚才说过啊,你别忘记在CTRL上边加上这个CS的注解,它为了解决跨域,如果你不加注解,会存在跨域的问题。
07:09
所以现在这个就做到了啊,然后做到之后咱们把效果试一下,看一下什么效果,我们来做个测试啊。我们看一下啊,首先这个敷我给它重新启动一下。重启,最终咱们做个测试,然后看一下目前我的输出能不能得到接口最终版的数据啊,咱们做个测试。找它启动啊。啊,现在已经可以了啊,然后可以之后咱们现在F12点开大家看一下啊,我来到col里边点击讲师列表,各位看啊,在控制台中数据是不出来了,是咱的数据,而数据中真正得到应该是date里边是不是这个值,比如说你看啊,比如说现在我们想得到列表应该是里边这个,想得到总记录数应该是里边total,想得到页数应该是里边的其他值,所以这个应该都有了,那咱们现在就把这部分数据直接得到就可以了。
08:14
那我来写一下啊,咱看怎么做。我晓这位置,我们通过response点上这个名字叫date开,这里边是不是有个date,然后date中有一个叫records,那我写一下啊,点上SCDS,这得到是咱那个列表的那个那种。如果你怕写错,你可以把名字复制一下,因为这个很容易写错,然后列表得到之后咱做赋值,我用上面那个变量,这次点例子的等于这个值,另外咱再得到它里面那个就是总记录数,为了咱做到分页,这次点total。等于response.data点上里面那个名字,大家看,这个叫total,就是你一共有多少条记录,如果得到别的值跟它一样,所以现在啊,两分数据我们就最终得到了,通过response,就是接口反应数据最终得到。
09:16
然后得到之后呢,最后我们要在页面中进行显示,而页面显示部分咱们用的是element UI中的组件,这个不需要各位写,我把它就直接复制,然后咱看一下啊,这一部分到底是什么含义。我把这个拿到上面来。咱们给它复制过来,然后看一下啊,这个用的是element UI中的组件进行实现,不需要咱们敲一遍,你把这直接拿回来改一下就可以了,那咱们先看一遍啊,然后进行演示最终的效果。首先这个代码我们先看第一部分啊,叫EL table,就是element u中table,然后里边有一个叫冒号date date是不是叫数据啊,加上例子,注意啊,这个例子是什么意思呢?就是你查出来反应这个数据的集合,就是我们这个例子,你把例子传回来之后,它会把例子啊给我们进行遍历,进行显示,帮我们做到这个效果,就类似于我们之前写那个V-for下面是他那个基本的样式。
10:17
然后里边有一个叫selection change,这咱暂时用不到,就这里边会加上一个复选框,后面咱会说到,然后往下看啊,首先它有一个序号,按照规则生成,然后里边有它的名称、头衔、简介等等,然后大家看啊,这里边都是UI中封装的,它加了一个叫pro。加上你的属性名称进行显示,然后另外还有这个地方大家应该能看懂,因为我现在存到里面这个level级别是零和一,咱们不能显示零和一,所以我做了一个这么一个判断,加上V-if如果我们是一就显示高级讲师,是零就显示首席讲师,用它做判断,而判断过程中加了这么一个处理。
11:04
给各位说明什么意思啊?首先加了一个叫scope,代表欲或者范围,你理解为它就代表整个的表格,肉代表表格中的每一行,Level代表表格中每行中这个level值,就把每行中的level值取到,然后判断,如果值是一,高级讲师知是零,就是首席讲师,最终我们做了一个显示。所以现在啊,这部分是通过IUI做这个实验,那实验之后咱们到页面中我来刷新看一下。大家看效果是出来了啊,当然里边有一些小这么一些警告,这咱可以忽略,另外因为有些功能咱没有具体做到啊,所以这个可以显示忽略,咱直接看我们的功能,目前页面中效果就出来了,包括有里面这些具体的值,所以现在啊,咱们就完成了这么一个基本的显示,把这个讲师在里边就显出来了。
我来说两句