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

就是课程信息添加前单部分，首先我们做的第一个肯定还是在这个页面地方加上一个路由，然后通过路由做这个过程，这是我们要做的第一步，那我来画一下啊。就是第一步。我们在这个页面中添加上一个课程管理这个路由部分，这个咱先做到，那怎么加，之前咱都说过了，我就直接来加一下啊，咱们现在找到我们这个页面中这些我先都关掉，然后找到一个叫s RC router里边一个叫index.js，把这个点开在里边我们加一个路由，仿照之前这些方式加一个就可以了，那现在比如说我用这个咱们做个添加。我加到这个位置。在里边改个名字，因为咱做的是课程相关的，所以我叫这个cos啊，报这个我们叫cos。

在里边的第一个咱做的这肯定叫课程管理。这是课程管理，在课程管理中，第一个功能叫做课程列表。就是这个例子，这路径咱一会改这个，然后第二个叫做添加课程，或者说叫课程发布，我们就叫添加课程，所以咱们把这个路由给它就快速加上了，这是第一部分。加完之后咱们到页面中，我们来看一下，就这位置课程管理有课程列表，还有这个叫添加课程。这是第一部分，添加上一个路由。咱们快速完成。然后完成之后，咱下面继续往下来做，那下面做什么呢？就是这个位置啊，我首先先把这个页面的流程给大家先弄出来，然后咱们再写功能，就是里边的点添加课程第一步到这页面，然后保存下一步，第二个页面，第三个页面，咱把流程先给他走通，那咱看这该怎么去做啊。

我这里边代码都有，但是咱们从零开始一去写下啊这个代码。这一部分咱就复制，但是要求各位能看懂这个结构，大家看怎么写啊。首先第一个就是当我点这个添加课程，他是不是要到我们这张图上的第一个页面，所以我们现在针对他，我们来创建相关的这么几个页面，包括第一步页面，第二步页面，还有第三部页面，咱们把页面先都创建出来。那我来创建一下啊，在这里边还是写到edu中，里边有一个subject teacher，咱们再创建一个叫cos，就是咱们课程相关的，在cos里边呢，我们来建三个页面，对应我们的三步，第一步是课程信息，比如说我就叫这个。info.voe这是第一个页面，然后第二个页面是那个课程的大纲或者课程的章节小节，我们叫capital。

第二页面，第三个页面是课程的最终发布，咱叫那个publish。点，这是咱们创建的DEMO页面，Info代表课程信息，Character课程大纲就章节小结，第三个publish课程最终发布，这个我们创建出来了，创建之后把这里边改一下啊，当然还有一个课程列表，我再写一个list这么一个页面。叫list.voe这是课程列表，那咱们改一下啊，第一个课程列表页面这个位置是edu，下面这个叫cos。啊，CEO。U SE cos里边叫list，这是第一个，第二个叫添加课程，就是我们点加课程，首先应该到这个info，所以里边啊这个页面就是这个音，咱们到这个页面。然后info这个啊，包括这个位置我也改成叫info，然后除了info之外，大家看啊，在我这张图上，咱是还有第二步和第三步页面，那这个页面我们要怎么过来呢？给大家先分享。

各位注意啊，第一步呢，咱是加课程信息，第二步是不是加章节小节呀，但是你的章节和小节是不是要在某个课程里边，你不可能单独存在，只有你先加完课程之后，是不是才能加章节小结，包括咱的课程确认，肯定是你加了这些内容之后才能确认，所以咱们第二步第三步都要依赖于第一步做到，就是你加完课程之后才能加章节小节才能够确认，所以咱们把这两部分的路由我们先写一下。那怎么做呢？那之前写过类似的这个我就复制了啊，咱看一下。我说各位是否记得啊，主要是这个几部分。我把它给大家录过来啊。就这部分我先复制过来，然后咱们具体看一下啊。

加个逗号，下面有三部分，然后三部分是什么呢？然后这个写法中啊，下面三部分都加了一个地方，叫hidden等于true。Hi，等于true什么意思呢？表示这个路由是不是隐藏啊，就不显示，咱在之前做那个讲示修改应该用到过，然后里边怎么做到的，大家看啊，都是加个名字，然后传个是idd，就是咱咱传那个课程ID，因为你不管是加课程章节小节还是确认都需要课程ID，包括咱们后面做那个修改肯定也需要ID，所以咱们通过路由后面来跳转。让他到互动页面，这页面我们改一下啊，这是课程信息，叫cos info，这是capital啊，应该就是我的页面啊，这是那个publish，咱加上几个隐藏路由，为了后面方便，这个啊是我们写的这一步操作。然后在里边这个位置补充一下啊。

就是咱们添加上几个这个隐藏路由，为了我们做到那个就是页面的一个跳转，就是你从第一步到第二步，再到第三步，咱通过隐藏路由来做到。这是我们刚才写到的啊，然后写到之后，下面咱们把页面中的内容具体写一下，首先第一个就是当咱们点添加课程，他肯定到我们那个。Info页面，而info页面中写的就是咱们看到的。这个五分。首先有个步骤条，然后下面有个表单，那咱看怎么来写啊，先看这个步骤条，怎么来做这步骤条呢？咱通过element UI里边就有这个东西，那咱来找一下，比如我就直接复制，让咱看这里边怎么做到的，咱找到。这里边有一个叫步骤条，咱往下找。步骤条在这个位置。

你看这个steps步骤条，把这个点开，然后大家咱就看第一个啊，第一个里边呢，比如我点下一步，它选中这个选中，然后他又选中咱用的。就这种形式跟它类似，就是你点这个每步往下选中，这是一个步骤条，那怎么做的，咱看它的源码中。用这个来看一下啊，看看怎么写的。大家看啊，写法很简单，每次我点下一步触发事件到这个ne方法中，而ne怎么做的呢？就让这个叫active，每次加一就可以了，为什么加一呢？你看这位置一个叫冒号，Active是不是用到那个，咱之前说那个单项绑定里面一个值，当这个值等于一，那第一步就选中它等于二。第二步选中等于三，第三步就选中，我这里边加个默认值，然后你每次加一，最终就这个结果就是123，让每步都选中，它是一，第一步选中，比如咱看到的大家看啊，加一就是它二，是它三，它选中，所以咱们要做的话很简单，你也设置一个active，然后它的值是一是二是三，分别对应我们的不同步骤就可以做到啊，就这个代码。

那这个咱就快速给他复制过来啊，来到我的课件中，首先第一个info页面这个部分，我把它啊，咱就直接拿过来。把页面部分我直接复制到我们这个info页面，呃，其他的我先关掉，就先保留个info页面，然后info页面中我们看一下里面这个值。是吧，就这位置你看里边啊，Active等于一，那这里边第一个step就会选中，就是填写课程信息，第二个大纲啊，第三个我们不叫审核，咱最终发布。这是第一个，然后写完之后下面按钮叫保存，并下一步当咱点它之后会到我们的第二步，那咱把那个Java结构给它也写下，在结构中，还是咱之前一直那个结构。

加上这么一个叫。Date啊，这个我重新写一下页面我就复制了。然后第二部分是咱写那个叫。就是页面渲染之前执行，然后第三个叫那个methods，我们定义具体方法，然后在里边有几个值，首先这个值就是它是否是禁用啊，这个值咱默认先给来一个false，不让它报错，这是我们做的第一部分。那我们先看一下效果，然后咱再往下做，再到它的第二步第三步啊，咱先试一下啊。先看结果。大家看啊，我现在呢，点击添加课程，它就到了我们这个界面，在这个界面中，咱看到现在很明显。第一步是不是选中了？这是我们做的效果，然后表单来一会儿再来做，而这步做到之后，这里边有个按钮，当咱点这个叫保存，并下一步他要到的是不是咱们里边的第二步就是步骤调中，这步选中，那咱把这个先写一下，然后最后再写里面内容。

那咱看怎么做啊。来到页面中点保存并下一步触发事件，里面有个方法叫nice方法，那我在method中就写这方法，方法就叫。Nice。而nice中怎么做呢？咱就是跳转到。第二步中。怎么跳过去呢？咱们刚才写过里边这个路由用这种方式可以跳过去，就是你加上这个路径就可以了啊，那我来跳一下啊，咱就来一个叫这点，这个叫入头点push。里边加个pass pass里边的加上你那个路径，路径怎么写呢？加你这个。

这里边的叫杠Co，再加上下面这个叫杠capital，然后传盖地值就可以了啊，杠开。ID值我先固定写个一，后面咱肯定传的是那个课程ID，这是一个跳转代码，就是咱们之前写那个路由跳转这个啊，就是第一个页面我们就写出来了，就是把这个。处做到了，然后写完之后，咱写第二个页面，就是我们这个章节小页面，在第二页面中要写的话，肯定是第二步选中，也就是里边的这个值应该是等于二，第二步选中，那这个页面我也到里边复制一下。就是这个。把它直接复制过来。把这个页面呢，放到我们那个叫开里边来。这位置。复制之后啊，这名字改一下，我们这个叫最终发布。然后大家看啊，目前这X是等于二的，所以这个就会选中。

就是这个结构啊，然后下面还是有那个基本一个结构。我把这个咱就复制改一下啊，结构都一样。给它改一下啊，然后里边首先啊，这里面要写什么呢？在我们的第二个页面中啊，它里边有两个按钮，一个叫上一步，一个叫下一步，上一步呢会到第一个页面，下一步到后面页面，那呢，把两方法都写一下，先看上一步是这个方法。这个啊，就是上一步的方法。就是他啊。这个写一下啊，然后上一步咱也是做路由跳转，跟这个应该是一样的，上一步呢，应该是到我们的第一步，咱的第一步就是这个inform后面要传一个ID。给他到前面，然后还有一个下一步叫next的，下一步呢，应该到咱那个最终的第三步就是这个public页面。

这个改一下啊。Publish，所以这时候我们写的就是开页面，这页面做到了啊，然后做到之后咱们把第三个写完，最终在测试啊，第三个页面是PU页面，在第三个页面中，这值应该等于三，就它是选中。这个啊，直接把它也是我就直接复制过来了啊，就是这么一个页面啊。直接拿过来哈页面，然后咱看一下啊，就是三选中在里边有一个叫返回修改，就是回到上一步。然后还有一个就是到下一步就最终发布啊，那路径改一下，我们应该是没有edu，但只有这个。这个啊。Co Co，然后到这里边。所以这样的话，咱们这个页面我们就构建出来了，也就是说一会咱们点添加课程，先到我们的第一个页面，在第一个页面中点保存，下一步到第二页面。

在第二页面中，再点上一步，回去点下一步到我们的这个页面啊，这是页面的构建，咱把它先做到了。那我们来看一下啊，页面的效果。那最终试一下啊。点添加课程信息，就是第一步到这里，然后我点保存并下一步。大家看是不是第二步，在第二步的时候呢，我点上一步。是不是要回去？这里边啊，又回来，然后我再点下一步，它是不是就到第三步，在第三步的时候，咱可以继续再回去修改，如果说都没有问题，我点最终的发布课程，课程就发布了，发布之后会跳转到我们的列表页面啊，咱没有写到，但是现在这个流程走通了，就是里边的下一步，下一步比如到第三步最终做一个最终发布，所以咱们就按照这个过程把这个课程发布，按照三步我们做到啊，这是我们写的一个简单的页面效果，通过这个页面效果，大家对这个过程应该有一个更深入的一个认识啊，就是这么一个。

基本过程，添加课程信息，然后加这个。课程大纲最终确认之后无误最终发布，主要这么一个流程啊。这个名字改一下啊，咱这个叫最终发布。所以咱们页面我们就做到了啊，主要这个三步，而咱今天呢，主要把里边的就是第一步做到，也就是添加课程的基本信息，把这个完成啊，那咱们马上要做到啊，就各位知道目前这个。页面的流程。