day07【课程发布-添加课程信息】/12-尚硅谷-谷粒学院-课程管理-添加课程信息前端（2）

在添加新页面中写表单，表单的话之前咱都写过，包括咱在添加讲师的时候，表单就是这么一个东西，那我就仿照它，其实咱们可以完全改正的效果啊，这个我就从课件中直接拿过来，因为之前都说过类似的。那我们找到啊，接口部分写完了，然后表单，我这里边有一个简单的一个表单，当然里边很多数据没有写完，但后面慢慢完善。这个我之前说到过啊，土度它就表示代码需要完善，咱先写这么几个，先做个基础功能，然后往里边再慢慢去完善。包括咱们在实际开发中也都是这个过程啊，咱们就是不可能一步到位，就是一次性把所有功能都实现出来，这是不可能的，咱只是怎么做，先做个基础功能，然后在基础里边不断做完善，就是不让你的功能更加的丰富。我们做项目都是这么来做，不可能一步到位，都是依然去完善出来一个最完整的项目。

举个最简单例子啊。我说各位是否用过那个早期的那个微信啊，这个我没用过，曾经了解过啊，早期微信是特别简陋的，里边什么都没有，但是随着发展，你发现这个微信功能在不断的完善，后来加了比如说朋友圈，加了很多什么各种的这种功能，它都是在最早那个最简陋基础之上不断完善出来的，所以咱做项目肯定也是这么做，先有一个基础功能再完善。那现在啊，我就把这个页面复制到我这个。课程基本信息中，也就是info页面中，然后info页面中啊，我看一下啊，这里边。主要就是一个表单的部分，然后咱把这表单就放到这个位置，好就放到，嗯。这里边啊，就是我们的把这个yellow form部分给它替换掉，换成我们这个表单。这个啊，咱就拿过来了，然后拿回来之后我们来大家看一下这表单中内容啊，在里边首先第一个有你的课程的名称，或者说课程的标题，然后下面有分类讲师，咱先放到这里，后面再完善有个课时数，然后有价格等等啊，包括为了明显，我把这个简介咱也先加一个啊，未来咱能效果更明显，因为咱们像多张表加数据，如果这么写，但是简介目前没有值。

我先简单加一个，那咱一会儿更方便啊，这叫课程的。简介。这里边默认啊，它先没有内容啊，然后简介叫这个description。这个是我们加的基本表单，然后最后有一个保存，并下一步咱可以最终做提交，这个啊就写出来了，然后写完之后下面咱来写功能，那怎么做呢？既然咱都写到过，在这个表单中有一个叫v model，所以咱对应它在我们的date中定义这么一个对象，用于数据封装。

这个位置。写个对象，我们叫Co info，一个对象，在对象中呢，你可以写里面的属性，也可以不写，都可以，它都能实现啊，那咱就给它写出来吧，就为了更方便，它的属性呢，应该主要。就这么几个，我都给它写出来啊，咱后面更加方便，有几个咱暂时用不到，先放到这儿。主要这么几个啊，包括什么课程的名称啊，什么分类ID，讲师ID，课时数描述，封面价格等等，这是写的一个对象，用于封装这些值，然后这些都选之后，因为咱现在肯定要调我们的接口，所以我们把接口自定义。按照之前的过程在A片里边。是不是建个文件，然后做定义，那我们就创建一个啊。用它来改一下。这个文件改个名字就叫cos.js，然后在cos.js里边我们来写一下啊，咱做的第一个功能就是。

添加课程信息功能，在里边改个名字，我就叫这个A的code info。然后它里边呢，要传的，刚才咱们看到是一个叫Co info这个对象，我把对象拿过来。然后拿回来之后，下面写它那个地址，包括路径，包括它的参数。首先啊，地址咱先复制一下。在这个Co里边叫edu service cost，然后它叫a Co info，这是里边那个地址。我把它。复制过来。然后名字这个名字A的cos info，这是第一个啊，它的提交方式是一个。Post提交，而咱们这个对象在接口中用的是request body，也就是说用Jason传递，这咱写到过，咱是不是加上一个叫。

State，然后加这个cos info，它会按照A形式给你传过来啊，这个啊是我们的。这个接口定义咱就写出来了，注意这些别写错，然后都写完之后，最后在页面中我们做个调用，首先把这个先引进来，加个import code from，加你那个地址，再加一个at-API。这叫。我们看一下啊，应该叫edu。这叫cos啊，然后加完之后，下面咱就来调一下这个方法，就用做个实现这方法叫nice，咱给他改个名字啊，或者后面方便不要这个吧。Co update，因为后面这里边还要做修改，用这个方法名字。然后改完之后，这里边改一下，在里边我们就来调用这个方法，最终做个实现。再来调一下啊。

就调这个。里边这个。然后它里边那个名字叫A的in for。这个名字。然后调完之后里边传入我们的对象叫this点。扣子一凤。这个调之后，如果他成功肯定是点咱加一个response。箭头函数这个结构如果说添加成功之后呢，那我们的做法就是第一个可以给他来一个提示信息，然后第二个就是跳转到我们的第二步，就是第二步来加那个章节和小节部分啊这个是我们要。做到的这一过程，那提示信息之前都写过的，我到之前里边咱随便复制过来啊，用那个改一下就可以了，就是提示成功或者失败。提示信息之前应该就是这个，我把它复制啊，到我们的这里边。

给他调一下格式，我们叫做。添加课程信息成功，最后做个跳转。这样的话，咱把这个页面我们就快速给它弄出来了，这么一个最基础的页面，包括里边啊，咱现在加的是课程名称，课时数描述价格。等等这些内容啊，后面咱再完善，包括完善出什么封面分类讲师等等，咱先做一个最基础功能。这个啊，页面做到了啊，然后做到之后，下面咱们用页面来做个测试，看目前的效果什么样的，先看页面能不能做到，咱再往下完善啊。那咱为了明显先检查一下啊，看里边的值别写错啊。就这值是否对应idt ID啊，包括title price这些值，然后看我的页面中啊，应该也是这些值啊，这些值跟大家要对上啊。

应该没错啊，然后这些应该都没有问题，最后再来做测试啊。首先点击课程管理，然后点添加课程，它就到我们这个页面，在页面中目前有这么一个表单，有一些基础值，那我们来输入一下，比如说咱们第一个输入一个课程标题，有一个课程名称，我随便写一个啊，就叫这个0302，比如说Java。啊，这个。课程什么入门教程啊，随便写个名字，这是第一个，第二个课时数就来一个。60课时第三个减地给这个入门课程第四个价格来个二啊两块钱，这样的话把这个数据都填完了，填完之后咱点保存，并下一步我们看提示咱们是不是成功，同时跳转到是不是第二步，这过程应该就正确了，到表里边咱看一下啊。

描述里边入门课程这个叫5985，这没有错，再看咱课程里边那个值。刚才我们加的啊，咱根据时间排下序。找到应该是这个是这个值。咱们家的0302这个课程这些都可以了啊，这些纸咱没有做的，污染纤维空后面咱会加上。所以现在大家看到啊，我们这里边的课程的基本信息，我们就做了一个初步实现，把这过程我们就做到了啊，这是一个页面的一个基本部分。所以大家把这流程能快速做到，没有什么难点啊，就是一个固定的这么一个过程。这个啊，咱就做出来了，然后做出来之后呢，在这里边啊，有这么一个问题，需要我们把代码做个完善，什么问题呢，大家看，比如说我现在呃，随便加一个啊。为了看这个问题，再加个值，然后我点保存并下一步。

大家看这个位置。当我们添加之后，它是不是要到第二步中去，但是你看到第二步的时候，前面是路径，后面是不是有一个值啊，这个值呢，我刚才写的是固定值，就写个一，这一应该是什么呢？给大家强调啊。因为咱们的第一步是加课程的基本信息，第二步是不是加课程的章节和小节，也就是说啊，你在加章节小节的时候，它是不是应该是需要课程ID，包括咱在上午说过，刚才也提到过，咱们的章节跟课程是一对多的关系，所以你的章节添加需要课程ID，大家看表里边啊，章节表里边有这字段就课程ID，所以咱们这里边需要做个完善，当我们加完课程之后，这里边传的值肯定不是固定的一那要把什么添加之后的课程ID是不是要传过来了啊，为了我们后面加章节小结这过程我们要给它完善出来。

这各位给他要注意啊，那咱们给它完善一下啊，就是加路由啊，包括第二步实现这个过程。就是第二步，我们就是编写这个表单页面。然后实现接口的一个调用啊，这就不去写了，因为之前咱都做过类似的，然后主要咱看第三步。第三步呢，我们要做的适应就是。咱需要让我们那个添加之后。就添加之后那个操作中，咱要返回课程的一个ID，为了后面的加章节小节做准备，所以咱们需要把这接口给它完善一下，这需要做到。大家看啊，刚才接口咱写的时候，我这后面是不是没有返回值，大家要加个返回值。加深返回值呢？返回你添加之后的课程ID，就是为了。

后面添加那个课程的大纲。使用这个需要返回，那再把方法完善一下哈，然后来一个返回值，我就来一个string，比如叫ID。这方法一会咱写啊，然后下面加上一个date给他返回一下，我叫cos ID，这是ID，咱需要做这个完善，然后这个做到之后，咱们把思维中的方法给他就改一下。改了这个方法，这些方法返回一个课程ID啊，这是service的一个interface，找它的实现类。就这里边。然后在实现类中把ID返回，而ID是什么呢？大家看到啊，ID是不是就是它呀，咱把这个返回就可以了啊，那我直接就re吞一个CAD把课程ID，咱需要给他做个返回，这步咱需要完善，如果你不这么做，那后面的章节小节，包括确认，那没法做到，因为他没有课程ID，不知道你要向哪里边加了一个内容。

啊，这是我们的第三步。需要做这个事情。那现在啊，把这个接口完善了，然后接口完善之后，咱们来到我们的页面中，页面咱肯定需要给他改一下。啊，这个给它重启一下啊，这都返回了课程ID。这叫扣才地。然后咱们来到页面中啊，在页面中怎么做到呢。就是主要就是改志愿代码就可以了，在这里边呢，刚才我们写的时候response没有取值，而现在response里边咱可以把它那个课程ID给他取到，然后再做操作啊，那咱给他就我就直接取下了啊。呃，比如说我就这么写了，直接写到这个位置啊，或者你写到外边一样，我这里面直接加上一个叫。response.data点上cos ID，这就是得到接口返回的课程ID，然后给它传到你的这个路由中去，就是咱后面这个位置就不是一了，而是你加完之后那个课程ID会给它传过来。

这个啊是我们做到的，然后后面咱取了一个值，再做课程大纲的这个相关操作。我们一个完善啊。我把这个给各位也是截个图啊。这个地方。主要是得到这个值，然后给它做一个最终一个传递。这咱们就完成了啊。然后完成之后，咱们下面再来做一下这个测试，看一下目前的一个最终结果。我们再试一下啊，咱现在添加课程信息随便写一个啊。为了有值就可以。然后洗完之后我点保存并下一步，大家就注意观察路径中的变化，点保存并下一步。

我们来看啊，大家清晰的看到这位置是不是就是课程ID，咱们把它就传过来了，所以这样的话，这个就可以了啊，咱们把这个基本功能就做到了，主要。这么一个过程啊。这个写一下啊。就是第七个添加课程基本信息，它这个前端的这么一部分。