day08【课程发布-课程大纲和课程发布】/07-尚硅谷-谷粒学院-课程管理-修改课程信息（前端）

咱来实现修改的前端，按照咱的过程，第一部分还是在API中，把这个方法咱先定一下，然后再做操作，那方法中咱找这个cos之前有两个，咱下面去往下加，加下面一个。根据课程ID查询课程的。基本信息是咱写到的，然后除了这之外，还有最后一个修改课程信息的这个方法，所以咱下面把这两方法先给它定出来。那我用它，咱就快速改一下，与结构都一样，这方法起个名字，于是课程基本信息我就叫get Co info，根据ID。里边咱传一个。课程ID，这是我们的一个方法啊，然后写完之后下面写上它那个接口，就咱刚才这个接口，它叫做get course info。这个拿过来啊，然后写完之后，后面加上它那个ID值，这写法多种方式，你可以写我们之前那种加表达式飘的形式，或者说加个字串拼接都可以，但是各位在加拼接的时候有一点特别注意啊。

这斜杠不能省略，省略肯定不对，你要省略的话，这个后面直接是这么写了，他把这作为方法了，所以你写的时候注意啊，所以我建议各位，如果你这个怕写错，还是写咱们之前这个写法就是这么来做。但是两种写法都一样啊，都能做到，我们效果没有什么区别啊，只是不同的做法而已，我现在就这么写了，这是一个接口，然后下面是get提交，这是一个ID查询接口，然后写完之后咱再写下一个修改的这个接口的方法定义，那修改改个名字，我叫update Co。在这里边，因为修改咱要传的是一个对象，根据对象做到，那对象我就传一个，比如起个名字就叫COO。咱们把那个接口复制一下这个接口update cos。

后面没有ID，这个咱们去掉，它的提交方式是一个POS提交，因为咱用的是快的body，用de传递，最后加一个date，再加上这个叫Co，这样的话，这两个接口递出来了，一个ID查询，一个修改啊各位能给他快速做到，然后做到之后咱们来到页面中，我们把这过程。好改一下啊，首先第一部分，因为咱要实现点上一步的时候，他要回到我们那个页面中做修改，所以上一步的方法咱先改一下，在这个里边呢，之前这上一步中的这位主是写成了一，但现在肯定不是写一，咱需要传一个课程ID，那课程ID刚才咱都获取到了，就是里边的。这个值咱把它直接就传过来可以了，就是这次点cosd，包括这个下一步后面咱肯定也是传ID，这个我给它先直接都改一下啊。

这个我们就做到了啊，然后这个我在提点啊，之前也提到过啊。因为这个cos ID咱是在date中做了一个定义这么一个变量，那这个变量你在date中定义，在你当前页面中都可以使用到，比如你看我这里定义cos ID，你在这里能用，在下面能用都可以用到，咱加一个这次点cos ID就得到当前你得到这个CID。把它就传过来，这是咱做的第一部分，把这个我给它做到了啊。可以给大家截个图啊，咱放到我们那个。课件中啊。就这位置啊，接口咱们刚才已经做到了，然后下面我们来开发这个前端。啊，开发前端。然后前端中呢，首先第一步就是咱们在API里边的那个叫cos.js里边定义咱们接口的两个方法，这是第一步啊，这代码就不复制了，咱刚写过了。

这是第一步，然后第二步操作。咱就需要。修改我们的开页面啊，它那个跳转的那个路径，把路径里边的带上咱那个课程ID，把这个需要给他传过来。这是课程ID，这个各位特别注意啊，这是我们写的第二步操作，然后这个做好之后，下面我们做第三步，第三步呢，就是在咱们那个真正的数据回显页面中做一个数据回显。在这个位置第三步。在我们那个数据灰显页面，也就是info页面来实现数据的灰显。那这个啊，我们来看一下怎么做啊。咱们来到这个页面啊，当我点上一步，它要回到info页面，然后通过路由把这职能传过去，那咱来到info页面中，在info页面中咱要干什么事情呢？

希望各位能想到啊，过程跟之前都差不多，没有太大区别，也就是说呢，在这页面中，咱回来之后，路径后面应该会有这个课程的ID值，会有这个值，那我们怎么做呢？这值咱是不是先得到，然后得到之后就调用我们那个接口，根据ID把数据查出来，做个回写是不是就可以了？这就是我们要做的过程啊，咱就是这么来做的。然后写一下啊，在页面中我们怎么做呢。首先第一个。啊，直接写啊，先获取到路由里边那个课程的ID，然后调用咱那个根据ID查询的接口，最终实现数据的这么一个显示，主要就是这个过程。那咱们在里边，我们就来写一下啊。

那咱们来做到来到可以的中，因为它是在这里边，首先第一部分。先获取到路由中的ID值，怎么获取都写过了啊，我就不再写了，写了很多遍了啊，直接把这个就复制了，就这个代码。通过它得到里边的路由中的课程ID值，那ID为了明显，我在上面的写个变量就叫cos ID，或者咱们后面方便用。然后咱们得到之后就赋值给这个cosd，这次点cos ID等于我们的。这个值。把这个我们得到啊，这是得到课程ID，然后得到之后呢，下面怎么做呢，咱就调用我们接口中的方法，根据ID做查询，那这个方法刚才已经定出来了，我在method中直接我们来写这个方法。根据课程ID。查询信息。

写这个啊，我就叫get。阴啊。就要这个名字了啊。然后在里边呢，我们调用刚才那个方法。咱们写上这个叫cos啊，这都引入过了，就是。点上里边的方法，这方法叫做get cost info ID。在这里边传入咱们刚才取到的那个ID叫cos ID，然后得到之后下面加一个。点，通过response箭头函数把里边值我们最终给它取出来，就是response.date点上咱那个名字。看一下名字，我们叫这个course info view。最后啊，做个赋值就给这个cos就可以了。加一个叫这点。Info等于你最终数据这位置加个逗号。这样的话，这方法定出来了，这方法就是根据你路由中的ID值，然后得到你那个课程信息，复制给这个cos info，因为cos info上面有这个V-model，它能做到一个数据回显。

另外啊，这个方法这么写，它没有调到，但在里边呢，需要做个调用，就这位置。调用。我们那个根据ID查询课程的方法啊，咱就来一个叫这点get info。就可以了，所以这个是我们写的一个基本的过程啊，咱就初步做到了。我们再说一遍啊，最后咱看效果啊，它的做法是呢，在我这个页面中，首先先取到你路由中的ID值，因为咱们要根据CID查询，而路由里边的咱们通过第二步已经给它传过来了，那我在info中把它取到，就是cos ID上面定一个变量，然后取到之后咱们调用我刚才写这个方法。就调用咱的接口，根据课程ID，把那个课程信息给他查出来，在页面中做回写，就复制给这个cos info，因为cos info上面写到了叫V-model，它就能做到这个数据危险在这个啊，是我们写的前端中的一个最基本过程啊，咱们就初步做到了这么一个效果。

给大家把这个给他知道啊，就主要这个写法。我把核心的截过来啊。就是第一个路由中取这个值，然后取到之后咱们在下面调这个方法，方法中就是根据ID做个查询，得到我们最终的数据。就是里边的。这个地方啊。所以咱们初步做到了啊，然后做到之后，下面咱们把效果我们来试一下啊，看目前是什么样一个效果，咱们先试一下啊。接口先启动，然后咱们再看前端。咱们啊，稍等一会儿看他先请起来。

啊，这个啊，应该已经启动了啊，然后咱们下面来到我们的前端中，我们来看一下最终的这个一个结果啊，那怎么看，咱们从头开始演示，我就新加一条数据，然后再演示，比如现在我点这个添加课程，咱们重新加一个数据，这数据我随便加一个值啊，比如说10100303。啊，这个test，这是课程分类，我选个前端开发，再选个javascript，这是讲师选一个网五，然后课时数啊，这些随便写一些值封面就默认的了，然后这个价格写个十，这是我们要加的数据，然后现在我点保存并下一步这数据肯定可以加到数据库，现在到了第二步，第二步的时候呢，第一次没有大纲加完之后才有，那我们现在点上一步再看效果啊，点上一步的时候呢，他要回到第一步把数据回写，但是这个值应该会传过来传回去，因为它是课程ID。

那咱看啊，点上一步。大家看里边现在报了一个错误叫net啊，那咱看目前什么错误啊，我之前说过啊，当我们发现net iol一般是你的接口可能有问题，那我们看一下啊，因为刚才接口咱没测试。啊，那这问题怎么看呢？首先呢，咱点F12看里边啊报了什么错。这里边啊，他就报了这么一个错误啊，然后这个错误啊，包括咱再看这个啊。这里边他报的是说叫这个错误。大家看有一个状态码叫什么。看这个它叫403啊，包括上面有这些什么各种问题啊，那这里边我给他先清掉，咱重新试一下啊，就是刚才看一个状态码叫403，我再演示一下啊，咱重新测试。

我先，呃，重新回来啊，咱们把这个问题最终给他排查出来，就是各位在开发中这种问题可能也会遇到，那你要学会怎么把这问题找到，那咱们从头开始再演出来，然后咱们一步把问题排查出来。现在啊，我重新回来。把这个先清空，这里边随便加一个数据啊，随便加一些。那就为了看到那个错误啊，然后这个位置随便写一些值。啊，这些都随便写一些，我们点保存，并下一步到了咱们的第二步，这个添加肯定没有错，这过程是对的，然后这没有问题，下面咱要点上一步是不是要回去做数据回显，那我们看目前他报什么错啊，点上一步。这里边回来了，报了一个network，大家看啊，这里边报了一个错，它叫这个403的错误，那403是什么错误呢？给大家强调啊，这问题我特别说明这个问题啊。给各位。截过来啊。

角的位置。写到下面啊。把这图截过来，就是我们刚才看到问题，就是咱们代码一测试。就是上面代码一测试，咱发现出现了一个问题，他其实一个状态码叫做403。这个状态吧。那403是什么意思呢？给大家要说明啊，403咱们见到的一般来讲是这么一个错误啊，啊咱们慢慢排查，就是现在谁也不好定位到大理，到底他的错跟这个没关系。B肯定没有错啊，它是什么问题呢？403，咱看到一般来讲是两种错误，给大家强调啊，首先第一个错误403，第一个就是要做跨域，一般会出现403错误，另外还有第二个问题，什么问题呢？就是你的路径写错了，也会出现403，这是它的两种问题，但是咱现在咱一个排查。

注意403应该目前没有其他问题，要么你跨域，要么路径写错了，他应该没有别的问题，那咱看跨域，跨域问题呢，咱应该都解决掉了，都加了注解，应该没有错，这是没有问题的，那咱就看路径是不是写错了，那咱检查一下啊，这个检查呢，咱们接口应该都没有问题，咱就看前端我是不是哪里写的不对啊，找这个路径。咱看啊。路径，我说各位是否能看到啊，应该很明显这路径就是写错。你看我这里。我是不是写teacher了，我这课程是大家看这个接口地址，课程是不是叫cos，我这里边刚才复制就顺手复制上面这个是不是复制成teacher了，包括你看这里边的路径，他请的叫做001E丢three teacher，然后里面加这方法，最终他报了403，因为现在这个接口肯定是没有的，你路径是不是写错了，他是报了这个问题。

所以各位也能看到啊，就是以后你再遇到这个问题，你发现出现了这个403，或者说出现这个提示，因为有的时候没有这个403，它是这个提示，咱就看到第一个是不是跨域，第二个是不是路径写错了，我现在问题就是路径写错了没有别的问题啊，刚才同学说什么这个没有，跟这没有关系啊，这是我们那个章节小节那部分，它是没有值，但是它就不显示。不是这个错，这没有问题，那咱给他改一下啊，就是这里写错了，叫edu service这个course。包括这是cos这一改，咱再测试应该就没有错了啊，那咱们下一课把这最终测试出来，这个我特别演示这个四行三的问题，各位记住，要么跨域，要么路径错了，我刚才问题就是路径写错了，改过来之后应该就好了。啊，这个咱就讲到这里啊，下一课咱在最终。