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

就是在这个过程中，咱特别强调，咱们就是判断路径中有没有ID值，它的做法就是加这个this.root.para did，前面这写法是固定的，它就表示你看这个单词root.par是不是参数，得到路由中那个参数ID是你的具体的参数名字，这名字跟咱们这个相关，这可以随便写啊，只要你两个对上就可以了，然后咱们判断最后就会调用啊，这答案都分析出来了。啊，所以咱们刚才也看到效果，在这里边我一点列表可以做回签。然后回显完成了啊，回显完成之后，咱下面要做的肯定就是最终的修改了，也就是里边当我把数据给他改一下，这些都可以改，然后咱们点这个保存，那数据是不是要去改咱们数据库的内容啊，这就是最终那个修改，那咱把它最终完成啊，咱看这个怎么做到啊。

呃，这个图啊，我先保存一下啊，然后咱重新画一个，这个图已经画满了，咱再来一个啊。下一个还是讲师的修改功能，而咱们做的是最终的这个。修改实现，那咱们看怎么来做啊，在这个页面中呢，这些值咱都可以改，然后点保存，肯定会调接口去改咱们数据库的内容，那咱们写一下啊，首先我们做到。第一步操作。咱们还是在。API里面那个。teacher.JS里边先定一下那个修改的这个接口，把这个我们先做个定义啊，跟咱之前一样，那我来定一下哈，还是到这里边，咱们现在这些方法都有，就少最后一个修改。啊，这个我加个注释啊。根据ID。查询讲师，然后咱们写这个。

修改讲师，那修改我起个名字，比如我就叫update。Teacher。修改的时候呢，咱肯定要传的也是一个对象给他，把那都要传过来。然后在里边咱们写这个结构，结构我复制过来，把路径通过我们这里边咱给他改一下啊，注意逗号不能少啊。然后这个路径我们是这个名字，就叫update teacher。就是它啊后面没有ID，然后它里边提交方式，咱看一下是一个POS提交，它里边也是用快的body传这个值就是JC传递，我们改成叫。Post用这次传递咱写过至少两遍了，我们加一个就叫做。State，然后加这个teacher啊，里边有我们最终这些数据啊，就都有，这是一个修改的这么一个。接口定义啊，咱们把这个就定义出来了啊给大家。

复制到这边的啊。你知道这个特点啊。然后这个写完之后，咱往下来看啊，下面咱可能就要调用这个接口，然后最终实现啊，就是我们的第二步。在页面中进行调用修改的方法。那咱看怎么调用啊，来到页面中啊，这个页面在页面中呢，我们要做的是当我点保存是不是做修改啊，但是保存的时候大家注意啊，刚才咱们有这方法，这方法之前是不是做添加呀，现在咱做的应该是修改，我这里边保存就是这个按钮既能做添加也能做修改啊，它要做两功能，所以咱们一会儿肯定要做个判断，那我这么做啊，我先把修改方法咱先定义出来，然后在里边咱再判断。修改讲师的方法，这个方法比如我就叫update。

Teacher。就是他啊。然后在里边咱做个调用，就调这个里边的方法teacher A片。点上这个方法啊，这个方法也叫update teacher啊，比如为了区分我得改个名字啊，一样名字也可以啊，为了区分一下，我就叫update teacher info。在里边传入你那个teacher的对象。这个啊，传完之后加上这么一个。点赞。啊，点赞诶哪去了这里啊，点赞中加一个response箭头函数，这是一个修改。然后修改之后大家要知道啊，咱们就是在修改之后，就是我现在点保存肯定修改，那修改之后呢，咱是不是也是要回到咱的列表页面中，并且给它有一个提示，比如提示它修改成功，所以说这个跟添加应该一样。就这个过程啊，应该一模一样的，这我就复制了啊，咱就改一个地方，这个叫修改成功。

啊，就叫。修改成功，把这个咱给他就加上啊，写主要写这个。诶，这里报个错，好像少个东西啊，少于这个没有一个箭头函数给它删掉了啊，所以现在这个就完成了，当咱方法中修改成功，它就提示信息，然后另外回到咱的列表页面中去啊。主要做了这个事情，所以咱们做到了啊，但是做到之后这方法最终肯定要调用，咱们保存统一，就是这个方法叫save or update，那在里边咱最后给它做个判断啊。就是判断是修改还是添加。还是添加啊。这个咱看怎么做啊。首先给大家强调啊，这该怎么实现。咱们来分析一下啊，首先大家看第一个，如果说啊，我现在做添加，大家要知道啊，咱们在添加的时候，ID址咱不需要输入啊，因为ID址是会帮咱们生出来呀，所以添加的时候不需要ID，但是你看啊，我在做修改的时候，修改的时候是不是需要ID值啊，ID值是需要的，因为咱根据ID才能修改，所以咱们根据它就应该可以判断，判断你当前这个就是对象里边，你看添加修改都传对象，如果这里边有ID址，那我们就是做修改，如果里边没有ID址，那我们就是做添加，因为在修改的时候，这个teacher中，咱们通过这个查询里边值都有啊，它里边会包含ID所有值。

所以咱们现在就会这么来做，我写一下哈，做法就是。根据你的teacher里边是否有ID进行判断，有ID就是添加啊，有ID就是修改，没ID就是添加。那我们来判断一下啊，咱写一下。

用这个来操作啊，写法很简单啊，咱就来一个叫做。这点teacher。点ID，这表示里边有ID啊，然后这么写啊，就是没ID啊，那我这么写啊都一样，如果说没有ID，那我们做的可能就是。添加这个操作啊，如果说里边有ID，那咱们做的就是修改。修改掉下面那个方法叫update提。这样的话。就可以做到啊，所以咱们就是最终做了这么一个判断，根据它的ID来判断它是做添加还是做修改，如果说里边有ID，那就是修改。没有ID就是添加。这个啊，我们就做到了，包括这个方法我们也最终定出来了，跟那个添加都一样的。包括啊，咱看我课件中跟我写的应该基本上是一样的。啊，就这个写法，你看啊，没有ID添加UID修改啊，是一模一样的，只是说名字写的不一样啊，结构没有什么区别。

所以这样的话，这个功能我们就最终完成了啊，这么一个效果，最后我再说一遍啊，然后最后咱测试。它的做法是怎么做到的呢？咱们在这个表单页面中先判断路径中有没有ID值，如果说有ID值，那我们调方法，根据ID做查询，做一个数据回显，就是teacher查出来，因为teacher有V杠、model绑定，它可以显示这些效果，咱看到是可以的。然后这个做到之后，下面咱最终就做修改，比如这些值我可以改，然后点保存修改，但是保存的时候它有两个操作，添加修改都是用这个保存，所以咱们在下面判断，如果说你这teacher的对象中有ID，那我们就是修改，没ID就是添加，因为不管你是添加修改都是传对象，只是添加的时候ID会帮咱生成，修改的时候需要我们来传ID，因为他要根据ID做修改。

主要啊这个过程，所以咱们把它就完成了，就是修改功能。那这些呢，都做到之后，咱们最后来试一下啊，看一下最终的这个效果是什么样的。我们来试一下啊，比如说我们为了明显就改第一条记录啊，咱们点修改。然后首先回想在这里边，比如说我把讲师名称改一下啊，比如他叫东方老师，再换一个啊，叫这个什么。上官老师啊，东方上官老师这些啊，就随便加个值，然后咱们现在我点这个保存，咱看结果啊，我点保存。大家看提示。是不是修改成功，你看里边这些数据是不是都改了啊，这个就是修改功能我们就做到了，比如说咱可以再试一个啊，把这个改一下。

1010，我就换个值什么，Up up。为了有效果就可以啊，Up up。然后咱们点保存。大家看。是不是就有了？这是什么字啊，就随便挑的一个字啊，这样的话，它也是做了修改啊，这个做到了啊，所以咱们的修改功能就没有问题了，然后改完之后添加咱试一下，不要说你改完修改添加不能用了，添加咱也试一下啊，我随便加一个数据就是，比如我写一个啊，就叫测试添加功能。这些啊，随便加个值。然后咱们点保存，大家看添加说明问题修改是不是也对，这样的话，咱就把里边这个修改功能最终就完成了，主要这么一个过程啊，也就是在里边做这种修改，只是在这过程中，咱需要给他做这么一个判断，包括你什么时候做添加，什么时候做修改。啊，这个咱需要给他做到。所以这是我们实现的这么一个基本功能啊。

我把这个代码给大家演示。截过来啊。就这部分。所以说呢，到这里为止啊，咱就把这个讲师管理的前端部分的增删改查功能，我们应该是都做到了，就主要就这几个功能。这张图保存一下啊。第九个讲师修改功能，所以现在这些基本功能我们就都做到了。然后都做到之后，咱最后快速来测试一下，就是里边这有个功能啊，自动产改革功能。首先我们看一下啊，第一个功能，我点这个讲师列表，进入到一个列表页面，在列表中咱可以做这个分页，包括上面有这个叫条件查询，比如咱们查一个我点查询，这都可以点清空查询全部。然后除了它之外，然后还有功能是删除，当我点删除它会弹个框，然后咱点取消什么都不做，点确定把记录可以删掉，这是第二个功能，第三个功能咱可以做一个添加，在里边可以加数据，比如说啊随便写一个这个。

零二啊，什么二八。来个值，然后咱们点保存，这数据可以加进去，包括咱们可以最后一个功能修改，我点修改先做数据回写，然后里边可以改值，改完值之后点保存数据就改入咱们数据库内容啊，这就是增删改查功能，咱把这个四个功能就都做到了啊，而这几个功能中也和各位要特别熟练这功能做的这个。就是写法，这个步骤就是每步应该做什么，要各位要特别熟练。因为咱后面写前端就是这个模式，按照这些来做到。这个啊，保。