day08【课程发布-课程大纲和课程发布】/12-尚硅谷-谷粒学院-课程管理-修改章节

就是下面我们进一步来测试，刚才把这问题咱应该都做了一个解决，然后咱们看一下最终效果能不能做到啊。咱们来到里边，我先CTRLF5先刷新。然后刷新之后呢，我们现在点击添加章节，在里边呢，填入章节名称，比如说我写个第一章就叫测试啊，随便写个值，把这个就写个一，然后写完之后，现在我点确定，大家看里边提示咱们。是不是成功了？同时弹框关掉了，另外你看页面中这些数据是不是也显示出来了，因为它刷新了整个页面，所以这是一个章节的添加，我们就加进去了。这个各位能给他做到啊，主要是咱说的里边的一个细节，然后加上之后，比如下面我们再来加个章节，但是这个过程中啊，会有一个小bug，再来演示一下啊，刚才我加了第一次，比如现在我再点添加章节。

大家看到问题了吗？你看啊，我点添加章节里边显示的是不是还是上次那个数据啊，而且表单数据是不是应该是清空效果，里边应该没有数据，所以现在有个小bug，那咱们把这个来解决一下。怎么解决呢？希望各位能想到啊，他的解决方案很简单，每次你弹框的时候把表单数据清空是不是就可以了。就是这么一种解决方式，那咱们给他写下啊。打开这个过程中啊，首先咱给他改一下。第一个啊，咱们刚才啊是在添加章节中啊，直接写上一个值，那我这么来做，因为他要清空表单，我把这个值咱给他写到一个方法中去，就我在添加章节里边加一个方法，我就叫这个open。这个dialo。加上这么一个方法啊，然后这个方法咱来下面写一下，通过方法咱来弹框保助力操作。

写到这个位置啊，就是我们的麦里边。咱们写的就是。弹出这个添加章节的这个页面，方法就是这个名字。然后在方法中，我们做的就是这么一个事情，让那个弹框弹出来，那怎么弹框呢？就是加上我们刚才写的这个值。等于这个处就可以弹框，这个做到了啊，然后弹框之后在里边呢，因为刚才我们看到一个bug，第一次加没有错，但是第二次再来加他还有上次的内容，所以咱们在弹框之后就把那个表单的数据给它做个清空，咱给他就清一下，那怎么清呢。给大家强调啊，这个清的时候呢，其实你可以把这对象清空啊，但是我这里边咱就单独清空那两个值了，一个title，一个叫so，把这个单给它清空一下啊。我写一个，这次点capital。

点上这个title。等于一个空，然后还有一个就是这个C点开，点上这个sot温值就来个零，咱把表单数据就会清空，我直接就这么来做了，这个实现了啊，然后实验之后，当我们点完之后，他可能做这个添加，但是添加呢，咱一会要写修改，最后把这方法咱给也改一下。我在外边写一个添加章节的方法，我就叫A的。Capital。为了后面方便，然后把这个代码咱就复制到这里面来给它直接。就是剪切过来啊，拿过来，然后这个拿过来之后，在这个C里边，咱先调这个叫z.a。Character啊做个调用，咱一会儿在里边肯定还要写一个修改，就根据ID做个判断，所以现在把这个我们就做到了，咱刚才改的地方就是第一个在这个添加章节按钮里边绑定一个事件里面加个方法，方法中就是弹框，并且清目表单，然后这做到之后，弹框里边咱一保存它就掉这个添加方法在里边就掉这个，咱把这方法给他踢出来了，为了后面咱那修改做准备，因为修改跟添加咱用的是同一个弹框。

这个啊，我们就改出来了，然后改完之后我们来试一下啊，比如现在我再加一个随便来一个啊，我就。第二章。就叫幺幺。啊，第二章点确定这个没有错，然后我再点添加，刚才有那bug，咱看现在。是不是就没有了表单清空了，比如写个第三张里边啊随便写个值，然后咱点确定现在就可以了，这样的话，咱把这个添加章节我们就做到了，主要这么一个功能，各位能给他快速实验出来，里边主要就是这个传值的时候，你要注意，因为咱需要手动来传一个课程ID，它后面做添加章节是需要这个值的，这值我们提前需要给他设置一下。

这个啊，我们写到的。然后这个写完之后，咱把添加章节就做到了，添加章节做完之后，章节肯定有它的修改和删除这个功能，那咱下面来做一个修改功能，把修改我们都实现。咱看这该怎么去做啊，我们先分析一下啊，怎么实现。这些都是章节，那咱要做修改，按照咱们之前的这种开发方式，咱们在每条记录的后面。是不是加个修改按钮啊，就这位置我们加一个修改按钮，当我们点这个按钮的时候，在我页面中咱要怎么做，是不是要做回显呀？那怎么回显呢？因为咱添加是弹框，那我修改是不是也可以弹克框在里边，就是回显你里边那个数据，当我们改完之后，一点确定，它就去改咱数据库内容，所以这个叫修改，所以咱们往上来实现，在这位置加上一个修改按钮，当单一点弹购框做数据回显，最终去改我们数据库中内容。

啊，这是我们要实验的，那咱们把这按钮给它就加一下啊，我们来实现啊。那这加的话，我就从里边复制了啊，因为这里边都有，我就不再敲这个按钮这地方了。就把这个列表中有。这个地方。就是这里啊，把这个咱先复制过来，是那个章节部分，然后复制之后咱就给它放到我们这个开的页面中来。就是这个位置。草放里边来里边啊，咱就加上这个按钮，这课时先去掉，咱暂时还没用到啊。这个咱就加上了啊，然后加上之后咱看一下页面中，大家看后面有个编辑和删除，或者说修改跟删除，当咱们点这个编辑，他肯定要弹个框做数据回显，然后咱们改数据，点确定就改咱数据库内容在这个是一个按钮，咱加上。

然后加上之后，下面咱实现当点编辑就来做这个数据回显，把这个功能我们做个实现。那咱写一下啊，掀开这个编辑的按钮，然后在里边呢，咱肯定也是给它绑定一个事件，那事件我起个名字这个方法啊，就叫open这个。呃，E啊，改个名字。然后叫这个。Capital啊，这是编辑。但是这里边啊，有一个特点大家知道，咱去修改这个数据，首先是不是要根据ID先查询做回显呀，所以说咱写编辑的时候，咱就需要把这个就是章节的ID的要传过来，那咱传个ID，那ID怎么传呢？大家看啊，这是在Li这个V-four里边，里边有一个叫开，那咱的做法就是根据这个叫开点ID。

把这值我们是不是可以得到，就是得到这个章节ID，然后咱们再做修改啊，这是它里边的这么一个写法，这各位要能看懂啊，V-four里面有capital，我们写个KID就做这个。根据ID把ID传过去，然后在里边我们做了一个修改啊，这是一个方法，那咱下面把这个方法我们创建一下。小这个位置啊。它就是修改章节那个弹框做数据。回显的这么一个问题啊，在里边咱写的方法。然后方法中呢，有一个叫章节ID，比如我叫这个起个名字啊，叫开ID。这个方法，然后在里边这开ID，就得到你那个章节ID，那咱根据ID调咱们刚才那个接口，最终做个回写就可以做到，那咱们来调一下啊。这个咱已经注入过来了，那我们调那个接口。

接口应该就是开。点上刚才这个方法，这个方法叫get capital，然后在里边呢传入一个capital ID。我们加上这么一个叫做点赞。然后加上一个叫response。箭头函数，这样的话就可以查询，然后查询之后我们来一个response.date点上那个接口中，我们起那个名字，这名字我们给它找到。在开里边我们就叫做capital。这个得到啊，然后得到之后咱做个赋值，就是这次点开。等于我们这个数据，因为开是咱们V-for中写的那个对象啊，这做到了，包括咱那个弹框肯定要弹出来。写一个这点。就这个弹框，这个值等于一个处。

包括下面是咱们。调用这个接口，所以这样的话，这个我们就完成了，点编辑，弹个框，做数据回写，咱们就是把这个章节ID先传过来，用开ID，然后传之后在方法里边得到你的ID，把弹框弹出来，根据ID调接口查询返回这个开这个对象，开对象在上面有V-model，咱做了双向绑定，里边值就可以显示出来。所以这是修改的这么第一部分啊，咱们把它就整出来了啊，包括看一下我的课件中啊，跟我写应该是一样的啊，咱简单看一下添加，就这个写法，然后包括里边一个添加过程，然后这个修改里边就传一个ID，包括最终弹框做回线。做到了啊，然后做到之后咱们把效果我们来试一下啊，看一下这个结果。展示一下。我先。刷新。然后刷新之后，现在我点这个编辑，咱看结果啊，现在我一点。

大家看数据是不会显了，这是第一章，包括一，比如说咱再试一个是这个，第二张这个我点编辑。是不是可以这个也可以做回显，所以咱把回显做到了，然后回显做到之后呢，咱在里边可以改它这些内容都改完之后，一点确定是不是就改咱们数据库中内容，大家把这个最终做一下啊，就最终这个修改。还是来到我们的代码中。咱看到啊，当我点确定掉的是这个叫save or update，之前咱都是添加在里边应该有一个修改，那这位置我们写一个。修改章节的方法，咱写个名字啊，我就叫update capital。这是修改。然后这个修改跟添加，因为都是点按钮时候调用，所以咱们在这个位置需要给他做个判断，这一判断上节课咱应该刚写过。

是怎么判断呢？就是判断你章节里边啊有没有ID，如果说里边有ID，咱做的肯定是修改，如果说没有ID，那做的就是添加，因为你添加的时候MP会生成ID，但是修改的时候咱需要传ID，就这个啊，咱最终给他判断就可以了。我给他判断一下啊。小这位置就写一个叫这点开。点ID。这么写啊，如果里边没有ID，那我们做的就是一个添加操作。然后加一个else，如果说里边呢有ID，那我们做的就是修改操作，这次点update capital。这个啊是咱们调一个方法，然后最后咱们把修改这个最终完成，修改写法应该跟添加差不多啊，咱就给它最终写一下啊。我想这位置。

Capital点上。修改方法，Update capital。然后在里边传入那个开这么一个对象，就是date点开，然后传完之后我们加上一个。点赞。加一个response。箭头函数在修改之后，咱做的肯定也是这个步骤，关弹框提示信息，刷新页面跟添加一样，这个我就复制过来，然后这个名字改一下啊，就是修改。章节成功，所以这样的话，咱的修改章节功能我们就完成了啊，就是这么一个步骤啊，最后咱再看一遍，然后再测试啊，它的第一步就是你点章节后面的编辑按钮，它首先会弹个框，然后根据咱传到章节ID做个查询，这是第一部分，咱刚才写过了。然后做到之后，咱们来改变你的弹框里面的数据，一点确定它调这个叫CORV的方法，在里边咱做的判断，如果说capital中没有ID，我们做的就是添加，有ID做就是修改，包括修改咱就调我们定义那个接口给它做到也就是里边的。

这个过程把这个就做实现，所以咱们啊修改功能就最终实现出来了，那咱们把效果咱就最终试一下，看一下最终结果什么样的，咱试一下啊。现在添加没有错，比如说现在我就点第一个，咱做个修改，我点编辑。弹购框，在弹框里边，我把值给它就改一下，改一个叫up up随便改个值，然后改完之后，现在我一点确定，大家看提示咱们是不是成功。这值是不是也改了，就是F25刚才我改的值，所以这是关于修改的一个实现，把这个我们就完成了。各位啊，把这些功能能给到快速做到关于这个章节的添加和修改功能。