00:00
各位同学大家好,下面呢,咱来实现讲师的修改功能,那讲师修改功能怎么做,我们先做个分析,首先大家看啊,在列表页面中,每条记录后面是不是有一个修改按钮,当我点修改按钮,大家说应该怎么做?要做什么?首先是不是先查询呀,然后把查出数据咱们到一个表单中,是不是要做一个数据回显呀,这是第一步,显示之后咱们改值,最终进行数据库中内容修改,所以它里边修改是两步,第一步先进行数据回写,然后第二步完成真正的修改,那下面再来做一下这个功能。首先做第一个修改中的数据会写,那怎么做给各位说明啊,我们的做法呢,其实有多种方式,我们按照一种比较常用的方式,首先第一步我里边这么来实现,大家看啊,我点修改,咱们是不是要跳转到这个一文中学,比如现在我添加修改用同一个表单,然后到这个疑问中去,那怎么跳过来给大家说明我们的做法就是呢,咱这么来做。
01:11
写下啊,使用一个叫做隐藏路由,跳转到你的表单页面中去,就是咱们先这么来做,然后在跳转的路径中传递你的ID值。写下啊,传递我们那个ID值,因为要根据它进行查询。这是咱的第一步,然后这里面涉及到几个词。第一个叫隐藏路由,什么叫隐藏路由?就这路由啊,不像其他路由可以显示,它不显示,但是能实现跳转,那怎么做?给各位写一下啊,咱们来到我的课件里边,我把这个课件打开,然后打开之后在里边呢有个路由,我们复制一下,大家看里边的这段内容。我把这个复制复制到咱们那个路由的那个文件中去,那我找到。
02:06
Router中的indet.JS文件,然后各位看啊,里边有讲师列表,讲师添加,咱们加个逗号,加上里面那个叫编辑讲师,这也是一个路由,它也能做到跳转,然后页面跟咱们之前的页面一样,都是到这个vod中的。Form英文中去,这是我们写到的,然后写完之后大家仔细看这路由,我们看这个地方hidden等于true hidden是不是隐藏了,就当你写完之后,它这路由不显示,但是能做跳转,然后这里边有个路径,路径中大家看啊,有这么一个地方。冒号ID什么意思呢?就好比说咱们之前写C语中那个问号占位符,表示里边可以传参数,就最终我们的路径中会传递你那个ID值,就是写的这句话,路径中传递ID怎么传递冒号ID部分就会传递的参数值,这个叫隐藏路由,然后写完之后隐藏路由怎么用,咱们来到我的list页面中,这里已经写好了,咱们看一下啊,用这个叫root link加上你那个隐藏路由路径传递你的ID址,这路径不要写错,咱们看一下。
03:22
Vod里边的teacher e,然后传入ID。然后你点修改,它就会跳转到你那个表单页面,并且路径中会传递你的ID值,所以现在这就完成了隐藏路由,那咱来试一下这个效果啊,大家注意看啊,你一会儿注意看。表单的这个页面变化,包括你路径的变化,我现在点修改,大家看特点啊第一个。是不是来到别的页面,然后第二个路径中是不是有个二是你的ID值,那比如说我们再试一个,我点这个修改。里边是不是一个九,并且也已经过来了,所以现在咱就完成了页面跳转,通过隐藏路由进行实现,并且我们的路径中会传递你的ID值,这是咱们的第一步操作。
04:14
然后这个完成之后,咱们来做第二步操作,就是现在呢,在咱的表单页面中再进行实现。大家看啊,我已经调整过来了,并且里面是不是有ID值啊,那咱把ID值得到,然后根据ID查询做数据回显是不是可以了,所以第二部分在表单页面中先获取到路径中的ID值,然后根据ID值调用接口查询出数据,再进行数据回显。所以第二部分咱就来做这么一个过程,那下面我们来做个实现。咱们看怎么来做啊,首先咱们来到表单页面,就是咱们的phone页面,在页面中大家注意啊,我们现在的过程。
05:02
就是我现在啊,一进入页面是不是就要得到值查询做会显,那一进入页面咱要调哪个方法。这各位应该知道,一进入页面create是不会执行,所以我们在这里边做这个事情,那这位置我来写一下啊,咱该怎么做,我先写个注释,然后咱做个实现。我们的做法就是呢。获取你路径中的ID值,然后根据ID值我们进行查询,得到我们的数据进行回显,咱就来做这个过程,而这个过程中大家注意啊,因为咱的表单页面是到。这个页面中有添加,还有修改,就是添加修改都是用同一个界面,但是我添加的时候它是不需要去得到ID值,只有在修改的时候才需要得到,所以咱们可以做个判断,如果说路径中有ID址,那咱就调方法查询,如果路径中没有ID址,那咱就不查询,所以现在还要做这个过程,那我现在在里边写一下这个过程。
06:10
首先咱做个判断啊,我来判断一下啊,具体怎么判断获取路径中的ID值,那怎么获取,在VE中有一种写法,我写一下啊,这次点Dollar符号叫root。点上一个叫paramos,然后点上ID,这表示得到路径中的ID值,然后咱判断,如果路径中有ID值,就是里边有这个值存在,那有的话,那咱就调用方法,根据ID自我查询。那比如说我写下啊,我来一个ID,等于这个把它取到,然后咱们调方法做个查询,这方法我在下面先做个定义,一会再来实现,根据ID。查询讲师信息,我起个名字啊,我就叫这个fech。
07:06
被头。ID。然后在里边传入ID值,这方法咱们一会儿进行实现,而我在这里边我就做一个调用,这次点f date BYD传入ID值,所以现在这个过程就完成了,判断路径中有没有ID值,用这次点root.id判断,如果里边有的话,把值道调方法查询得到数据,最终进行。然后写的时候注意啊,前面三个部分是固定的,这个ID要跟路由中的名字保持一致,大家看我这是不是叫冒号ID啊,所里边写ID,如果比如说你叫冒号什么A,那这里就写上A,根据那个保持一致。所以现在这个过程就完成了,一进入页面咱们就得到ID值,然后进行查询,如果添加的时候,那咱就不需要查询,现在完成完成之后呢,下面咱们写这个接口,根据ID查询接口,那我首先在里边先做个定义。
08:15
就是根据ID查询,然后这个接口我用它快速改一下,因为结构应该说差不多啊,咱们快速改一下啊。我给他起个名字啊,这个名字我就叫get。YID传入ID值,下面加上它这个路径。这个路径我到这个里边复制一下get teacher传入ID是get提交。这里边改成get,现在这个完成完成之后,咱们在这个form里边,我们做一个调用,再来调一下啊。 teacherA片点上get teacher by ID。
09:01
传入ID值,加上一个Z,然后加上response。箭头函数通过response得到里面数据,就是response,点上你的名字,这名字跟接口中保持一致啊,就是得到这个名字。所以现在这个得到了,然后得到之后咱们做一个赋值,因为我上边有一个teacher这么一个对象,所以咱直接赋值就可以了。这次点teacher。啊,这单词不要写错啊,Teacher等于respond date,现在就把接口反映的数据给这个teacher,因为teacher呢,在上边有一个V-model的双向绑定,所以最终能进行数据会显,所以现在这个过程我们就完成了。我把这个啊给各位再重复一遍这个流程。我再说一遍啊,我们的做法就是呢,通过隐藏路由,在修改按钮中跳转到表单页面,并且路径中代理的这个ID值通过你看路由实现,然后实现之后在表单页面中得到路径中的ID值,根据ID进行查询,做数据回显,这里边做个判断,如果路径中有ID值查询没ID值,那就是添加,咱就不需要查询。
10:27
所以以上这个就完成了,完成之后咱们把效果试一下,看一下结果啊,比如第一个我点这个修改。大家看数据是会显了,比如说咱们再试一个,我就试这个欧阳老师点修改。大家看数据是不是也灰显了,所以咱目前就完成了修改中的第一步,进行数据灰显,这个咱就做到了,然后做到之后下一步就简单了,咱们可以改变里边的值点保存,最终是不是就改我们数据库中内容,那下面咱把后面过程我们进行实现,咱们来写一下啊,后面过程目前是数据回想过程。
我来说两句