day05【讲师管理模块前端开发】/11-尚硅谷-谷粒学院-讲师管理前端-讲师修改（1）

下面呢，给大家要做的功能，就是讲师的修改功能，把这个功能我们要做到，那这怎么做，咱们来详细说一下啊，它稍微要麻烦一点点，那咱看怎么做。首先第一个因为你要做修改，所以咱们的。第一步就是在每条记录后面，你看我这里边已经加过了。咱是不是加一个修改这么一个按钮啊，所以这是它的第一步操作。我写的这个位置啊，就是第一步。在我们的每条记录后面添加上一个修改的这么一个按钮啊，这是它的第一步操作，这按钮我这里边已经加上了啊，所以各位啊，这个给他知道，然后就是现在我们要做的话，大家要知道这个过程怎么样的啊，我觉得之前咱应该做过内存修改功能，大家要知道，比如说现在当我点这个修改按钮的时候。

他应该首先不是修改吧，因为你不是要改成数据，当我点修改他要干什么，是不是要到一个表单页面中，把咱数据是不是要做个回显呀？比如说我这个老师叫东方老师，当我点修改，那他会到表单中把你这些数据在里边，是不是都要给他显示出来呀？这是它的第一步，就是先做个数据回显，而这一过程做的肯定是根据ID查出来，然后回显之后咱们可以改这些值，当我改完之后点保存，是不是再去改数据库中内种，所以它里边两步先做数据回显，再做最终修改啊，所以这个过程你要明确点修改，做回写，再修改才去改数据库。我在里边写一下哈，就是我们说的第二步操作，当我们点击修改按钮，它会进入到一个表单页面。进行数据的推线。

啊，就是显示你原始的数据，这叫数据归线。这是啊，我们所说的第二步操作，那这步怎么做，给大家来写一下啊，其实这个回显呢，它就是啊，把你的数据查出来，比如说咱们之前使用那个接口，根据讲师ID查询出这个数据进行显示。啊，讲师ID查询数据进行显示，那这接口咱们看一下啊，之前写过的往下看就是这个接口，根据ID查出数据，然后返回这个基本内容啊，就是那个对象。那咱们看这个具体怎么做，咱先看一下前端中，因为接口都写过了啊，在前端的列表页面中到里边看到啊，这个按钮在已经加过了，但是这个加的话给大家换一种方式来加。换了什么方式呢？当然这个写法啊，跟之前不太一样。我这是这么写的。用了这么一个东西，叫route命。

这root link什么意思呢？他我现在让他通过路由方式跳转到咱的数据灰线页面，那什么叫路由方式，也就是说这里边用这个值变化跳转过去啊，那我说一下这怎么做啊，给大家说这过程啊。首先第一个你要这么来做，第一步需要在这个路由页面中再加上这么一个路由啊，需要再加一个，那这路由怎么加，给大家写一下啊。和小这位置啊，这是第二步，咱们做回显，然后咱说第三步。第三步做法就是因为咱要通过这个路由跳转进入到那个数据的。回显页面。啊页面，所以说我们在那个就是路由的。Index页面中需要再添加上一个路由，但是这个路由咱不需要显示，什么叫不需要显示呢？因为你看啊，我这里边有讲师列表，添加讲师，咱不需要再加一个叫修改讲师，因为修改是在这里加的，所以咱们加个路由，但路由不显示，这叫隐藏路由，那怎么加？给大家说一下啊，咱先看一下，然后一定要给他写完。

咱先大概浏览一遍啊，他加的方式90就是加这句话。主要大家看这行代码。叫还得等于它的值是处。Hidden是不是隐藏了true就表示它不显示，所以咱们加到就这段啊，那我现在把这个加到咱的路由中去，就是我这个列表和添加的下面加个逗号。然后加着它这名字改一下啊，比如说我叫C，然后页面还是用咱们之前这个添加页面，因为跟它是同一个页面。这叫修改讲师，或者说编辑讲师，当然这个路由hidden顿等于true，它不经显示啊，咱就这么来做。

就给大家啊接过来，然后咱具体解释啊，这什么意思。加上它，然后加完之后咱看一下这段的含义是什么，首先第一个这是页面，这是名称，这是不显示，这没得说，咱主要看第一行。第一行呢，因为我现在添加跟修改，我想用同样的这么一个页面，所以在里边呢，我给它换一个规则，它还叫C，或者你叫别人名字也可以，但是这个比如说叫E也可以啊，但是在后面咱加了这么一个东西叫做冒号ID加上它。这句话什么意思呢？给大家解释啊，它就相当于啊，比如说我们在早期写SQ语句的时候，咱有一个where条件，我来一个ID，等于一个叫问号。这问号不是，各位是否记得啊，问号是不是叫占位符，里边是要传参数，而现在这里边写这个冒号ID，就相当于是个占位符里边要传参数，而它的参数是在这里边传，就这位置我们叫E，然后加个斜杠传入你是讲师的ID值，现在是这么来做，就是你这里边传个参数，它就能过来啊E。

这是它的一个隐藏路由写法，通过ID给他跳转过来，这个答案就写出来了啊，然后写完之后，咱们把这个给它改一下，改成我们那个地址啊，地址不能改错啊，咱叫杠teacher。他没有edu啊，叫杠teacher，后面加这个叫做杠E，我把这复制啊，各位最好也复制，很容易写错，最后加上你的讲师ID，讲师ID跟删除一样，用此扣点肉点ID可以得到，而你这么做，它在里边就会通过这个。Teacher加你ID值就能到你的这个页面中啊。所以这个是路由的写法，我们现在就这么来做的。

啊，大家把这个知道啊。咱是这么个写法啊，通过这个跳过来。啊，这个比较特殊一点啊，各位给他记住啊，因为后面咱再写类似的功能，基本上都会这么来做的啊，用这个来跳过去。所以这是我们说的第三步，咱就这么来实现出来啊。然后这一步做到之后，咱现在通过路由应该就能跳转到你这个页面中来，那我们现在按照现在的一个写法，咱先试一下啊目前的结果，咱一会儿再做那个查询啊，咱先试一下目前的结果。我们来试一下啊。我先呃，先去掉啊，重新刷新。然后点列表，点完列表之后点修改，点修改它要进入到是在那个表单页面，那我现在一点。大家看。页面输过来了，但是你发现啊，在进入页面的时候，咱看上面这个变化啊，你看上面变成teacher是不是E，然后后面这个值是不是就是咱们每个你要改的讲师ID，比如这是5617，大家换一个。

这是3378，每个值都不一样，因为每个奖ID都不同啊，这个值我们就有了，但是还没有回显，咱马上做到，你先知道目前咱的跳转方式，通过隐藏路由，然后传你的讲师ID，把这值传过来，最终咱做到。啊，这个啊是我们写的第三步啊，这稍微麻烦这么一点点啊，就是它需要加很多地方，第一个加一个隐藏路由，然后第二个这个页面中加你这个路由跳转写的时候注意这地址别写错，要根据这个路由对上路由里边叫teacher e did啊这里边也是teacher ID加上ID，这不能写错啊。所以这个第三步完成了啊，然后完成之后咱们往下来做做第四步。

第四步呢，就是做它那个数据回线。就这位置啊第四步。在表单页面中。实现。数据。回显把这个我们做到啊，那这怎么做，咱们来说一下啊，首先第一个因为它数据回显肯定要调我们的接口，所以第一步呢，咱们还是在这个teacher点。DS里边先定一下那个就是。根据ID查询的接口，把这个咱先定出来，为了咱一会儿肯定要调这个接口啊，所以这是第一个啊，我在这里边做个定义。根据它一样啊，然后往下写。下面这个方法，比如我就叫get。Teacher info里边传入一个讲师ID，然后传完之后下面有它那个结构啊，就还是这个结构。结构拿过来咱改一下啊，第一个加上它那个接口的路径，路径我们叫这个就是get teacher后面传个值。

啊，这个复制过来啊，然后这个值呢，因为咱是ID嘛，所以咱用这个符号加上表达式把这取到。就这个啊啊，既然刚才起到一个东西，我觉得这个各位应该认识啊。要说这你不认识啊，这个符号是不是标注成人民币的符号，人民币是这符号嘛，因为大家很多地方应该都见过，特别在超市中经常有这个符号吗？然后咱们写的这个符号。其实是一个美元的符号啊，这个不要说你不认识啊，然后再往下看看重点啊，这是我们写的地址，这是ID，然后咱看它的提交方式是个get提交啊，他就没有别的参数了，这里边是一个叫。Get下面这个他没有只有一个ID，这样的话，这接口就定出来了啊，就是这部分。我把它啊给大家。接过来啊，咱们定义了这么一个。

接口。啊，就这部分啊。然后这个定义之后，咱往下看啊，再看第二部分，第二部分呢，咱肯定要做一个调用啊，就是在我们的页面中。去调用这个接口，然后实现数据的灰线。下面做这个事情，那怎么调，给大家说一下啊，首先来说这过程啊，就是我现在呢，当我点修改按钮，你注意啊，我修改按钮是不是在列表页面中了，但是我点修改之后，它是不是就到了这个表单页面，而咱现在要做数据回显，咱肯定不是在列表页面中调，因为这里边不需要显示，在哪里显示就在哪里调，那咱是在列表页面中做调，做就做这个跳转，然后在表单中显示，所以咱就要在表单页面中做调用。这个要明确啊，因为表单中才显示，列表中不显示，在哪里显示就在哪里调用，咱再表单中就会调用啊，那当然来到表单页面，就是咱们这个，呃，C5这个页面。

那我们打开啊，那怎么调咱也不着急，咱先往下写一下啊。比如这个位置，我先写这个方法。就是根据。奖晒地。查询方法为了咱一会儿调用啊，咱为了方便我先写出来啊。比如就叫这个。Get，呃，就叫get info了啊，就要这个名字了，Get info。然后在get info中有那个讲师的ID啊，咱先写个方法，或者一会儿调用，在这里边调用咱刚才定的方法，这个已经引入了，把这个写过来啊，然后引入之后咱们调里面那个方法，他的方法就这个。Get teacher info？咱们把这个ID传进去啊，就是它，然后写完之后，我们加上这么一个。点份加一个response。

箭头函数，然后通过response得到数据，就是点data，点上你的名字啊，咱就不输出了啊，这个名字怎么找呢？你到接口中看你的名字叫什么。我这名字叫teacher，所以这里边我就写一个点teacher，如果说你接口中，比如你叫什么，什么edu teacher，什么teacher，那你写你的名字，这是我的名字啊，Teacher。然后写完之后，咱把这个值赋值给咱这个对象，我就写一个叫s.T等于这个值。这个是我们写的这么一个要用的一个方法，而方法中就是最终把值给teacher，因为teacher呢，在上边有这个双向绑定，当里边有值，上面值也会显示啊，所以咱们写了这么一个代码，在页面中做一个调用啊，就在这个位置啊。我把这个代码给大家截过来。这个咱写出来了啊，但是这个写完之后呢，咱的功能其实目前并没有做到，咱们只是并义了方法，但是你仔细看啊，我这个方法好像没有地方调吧，没有地方调这个方法，所以它肯定不会执行，你只有执行之后才能显示，那在下面来看一下这方法该怎么去调，目前它肯定是没有效果的，因为这方法没有被调用。

啊，这要明确啊，这个首先大概画一下啊，这是第一个咱A这个API中定义这个接口方法，然后第二个在里边实现了这么一个创新方法，但是这个方法我们还没有调用到，所以我们要写第三部分。就是咱们要啊，调用这个根据ID查询的方法，咱要做它，那怎么调用给大家，我先分析一下啊，这过程啊，稍微要麻烦一点点。啊，给大家强调。我说一下怎么做啊，因为各位注意啊，我现在呢，修改的时候要到这个表单页面中来，他要这么来做，但是我现在添加的时候，是不是也要到这个表页面中来，就是两个操作都要到同一个页面中来，他们都是这个C页面。

这个要明确啊，修改添加是同一个页面，但是你注意啊，目前咱的操作中，大家说我添加的时候这方法需要调用的。是不是肯定不需要，因为添加的时候你不需要做回显，咱直接有个表单数值是不是可以了，而我做修改的时候，那这个方法是不是才需要调到，所以咱首要区分什么时候调，什么不调，添加的时候不需要调用，修改的时候才需要调用啊有这个特点，但是咱们怎么圈中添加和修改呢，这怎么区分？给大家强调啊，这里边方法有很多，有一种最直接的方式，咱们看啊，修改的时候路径中是不是有ID址哦，添加的时候是没有值啊，那咱就判断，如果说我路径中有讲是ID值，那咱就调用会显，如果说没有ID值，那咱就不调用，直接做添加，所以咱就根据这个路径中有没有ID值做个判断就可以了，这是咱们的这的一个思路。

啊，那我给大家写一下啊，小弟位置。就是咱们该怎么去做啊，就是第一个，因为咱们的添加和修改都使用啊，都去使用那个save这个页面是同一个页面，所以咱们要区分你是添加还是修改，因为咱们只有修改的时候才需要去查询你那个数据回显。添加的时候是不需要的，那咱怎么判断添加和修改呢？里边的方法就是咱判断路径里边。是否有那个讲师的ID址啊，是否有讲师的ID址，如果说有ID址，那我们就做修改，如果说没有ID址，那我们就直接做添加，所以咱就根据里边有没有ID值做判断，也就是这里边你看啊，现在是修改有这个纸，那我们就调用，如果是添加没有纸，咱就不调用啊，这是咱们要做的这么一种分析，我们就这么来做到。

啊，所以大家现在知道这种思路啊，判断有没有ID址，如果路径中有，那就修改，没有的话就添加。那怎么判断啊，咱先大概看一下啊，下一课我来写啊，就是做法有一个写法啊，咱先大概看一下啊，呃，在我的这里面。这个位置啊，往下找。在这个位置中呢，有这么一段代码，也算是一段比较固定代码啊，就是在那个create里边，咱要加上这么一个写法，就这位置。大家看啊，其实主要是它咱通过一个叫this.route.p.ID这就表示得到你路由中的参数，前面是这点入点P得到参数，因为咱们写那个参数，我在这里边写的名字叫ID，它就表示得到里边这个ID值，这位置加一判断就是里边如果有ID参数，那我们就调用，没有参数咱就不调用啊，就用这个写法做到，这个是voe中一个固定写法，表示得到路由里边那个参数值。

this.root.para root是路由，Para是参数嘛，ID是你的参数名称啊，所以咱们一会儿就这么来做到啊，用这段代码来实出来。给大家啊，把这个先给他知道啊。我先把这个给各位截过来啊，然后一会儿咱来实验出来啊。我先截到这里面来。啊，这么一个解法啊，所以咱们就是先说到这里啊。