00:00
下面呢,咱们继续来实现讲师的添加功能,按照流程我们快速做整合,首先啊,我们的第一步同样在teacher里边,把讲师添加的接口咱们先定出来,那我来最后定义。这个定义跟这个结构应该说差不多,所以用它咱们快速改一下,这个效果我在里边改一下,第一个我先给这个讲师添加方法,咱们起个名字,这个名字我就叫。然后在里边呢,咱们传入的应该是一个讲师,这个对象咱们叫teacher。传入之后下面呢,加上接口的路径,那我从里边复制一下讲师添加的路径,它叫c teacher,然后post提交,并且加上了request body,那我来写一下。把这个路径写过来,Post提交,因为它用的是request body,所以咱用Jason传递,在里边加上date,加上名字,这咱之前曾经说过这个写法,所以现在把讲师添加的接口我们就完成了,完成之后咱们进一步来写一下,看看下面怎么做啊,大家注意。
01:21
我现在做假上添加。咱的做法就是点击添加讲师的路由,咱们是不是要到一个表单页面中去啊,所以现在我在这个讲师添加这个页面中添加上一个表单,这个表单呢,咱们还是用IUI中这个表单组件进行实现,那咱们直接复制一下啊,这个组件我这里写好了,我把这个复制一下。然后复制到咱这个里边去,就是在我这里边有一个views中的form.view是咱们之前写过的,这个直接拿过来。这是写到一个表单组件,包括大家看啊,这里边用的都是V-model咱们做一个双向的绑定,所以现在这一部分我们就完成了。
02:12
表单完成之后呢,下面呢,我们进行调用,那怎么调用我们来写一下啊,首先把结构我再来写一遍,就咱之前写过,咱再复习一遍,加上一个死块标签。然后在里边呢,首先引入JS文件,我们加上port API from,加上路径。A片,然后里边的名字看一下,不要写错啊,Vod里的。现在咱们就完成的引入,注意路径斜杠不要写错,然后写完之后在it putt defat里边加上咱们的结构,这结构我写一下第一部分加上一个date。
03:01
然后我们加上一个退,定义你的变量和初始值。写完之后,下面咱们加上一个方法,就这个叫created created表示在页面渲染之前执行,然后最后我们再加上一个叫methods,定义你的具体这个方法。所以现在这个结构我们就完成了,完成之后呢,下面我们在里边写一下我们的具体代码,那我们来做一下啊,首先第一部分在date中对你的电量和初始值,因为咱们现在要做到是咱们这个讲师的这个添加,所以讲师添加里面都有VGA model,我在里面就加这个teacher的这个内容,那我来一个teacher。写上这么一个,这一项里边接收我们传来这些数据,这个各位知道啊,然后这个完成之后呢,咱看一下我的课件里面啊,课件中呢,找到这位置,我写了两个初始值,比如说现在有一个叫salt,一个叫level,表示level,比如你现在啊,没有选择讲是这个级别默认级别就用一没有选择sot,那sot默认值就是零,如果你选的话,用你选的值,所以咱也是加上两个初始值。
04:21
这是写的第一部分,然后这个写完之后我们再来看啊,就是现在,因为它是一个表单的部分,咱们看一下页面里边就是长这个样子,在里边我能填写不同内容,最后点保存,就把数据加到数据库中。那咱来看一下啊,在这里边我们来做这个添加,然后添加的时候呢,我这里边注意它的特点啊,这个添加呢,是我点保存按钮的时候调方法是不是添加,所以它并不是在create中执行,所以咱们在。Method里边就这方法叫save update,然后里边做这么一个添加。
05:02
我强调啊,这个方法你就不要在create里边调用了,因为这个方法是我点按钮的时候才进行触发调用,然后在添加里边,我们写一下这个基本过程,这个过程呢,咱就直接调用接口中的方法进行实现,加上 teacherA片,点上这个添加方法叫teacher。传入我们的对象。这次点。然后加上这么一个Z。在里边加上response箭头函数,这是一个基本结构,然后这里完成添加之后,大家想一下啊,就是当我添加之后应该干什么事情。做什么?首先第一步是不是可以来一个提示信息啊,就告诉比如用户说你添加成功,那第一个我来一个提示,提示呢,把之前咱们写过提示,咱们复制过来改一下。
06:02
提示添加成功。然后提示之后,下面还要干什么。大家想还要做什么,比如现在我在里面添加,添加之后咱们是不是要回到列表页面中进行显示,就是你要还要回到列表中来,那咱做一下啊,看这怎么做。来写一下。就是要跳转回到你的列表页面中去,那怎么回去呢?这里边有一个特点啊,大家看目前添加咱们是在这个路由中,我要回到是不是一个list中去,所以这里边有一种方式,在VE中有一种叫路由跳转方式,可以回到列表中去,那怎么做我写一下啊,这次点这个叫router。点上push。然后里边加上我们的值,加上一个pass,然后加上你那个跳转的路径,路径的就这个路径。Vod list。
07:00
把这个拿过来,或者说你到它那个路由的文件中找到这路径,大家看啊杠vod list,这就可以回到我们的列表一文中去,所以现在这个过程就完成了,咱们就实现了讲师的添加操作。然后实现之后,下面呢,咱们把效果试一下,看一下最终结果怎么样,我们来做个测试。来到添加讲师的表单,在里边我们做个添加,比如说咱们的第一个讲师,我随便起个名字,就这个东方讲师。然后他有一个入住时间,咱们选择一个时间,包括有这个头衔,高级或者首席有一个简介啊,我就随便写一些值,然后另外有个资历是咱这个高级什么特级的这个内容啊,然后最后点保存大家看啊,提示成功是回到列表页面中去,然后列表中它的数据应该在这里,东方讲师是不是就加进来了,所以现在咱们就完成了讲师的添加功能。
08:10
当然在添加之后呢,在列表中,其实你可以做个排序,根据你这个ID做个排序,让你最后加的在第一个显示,或者根据你的时间做后排序,我现在啊,直接就给它显示出来了,但是现在我们添加之后也完成了添加,并且也跳转到了列表因为中来,所以现在咱就完成这个功能,比如说以上咱们完成了这么三个功能,讲师的条件查询,分页列表功能,讲师的删除功能,包括讲师的添加功能,这三个功能的前端部分我们都完成整合。
我来说两句