day07【课程发布-添加课程信息】/02-尚硅谷-谷粒学院-课程分类管理-添加分类前端

再来实现添加课程分类的前端这个内容。那这怎么做，咱们一步一步来实现，我们来具体做一下啊，首先我们先做里边的第一步。第一步做什么呢？给大家介绍啊，咱之前一直在说，因为咱们啊之前做的是讲师管理模块，咱们这个课程分类是不是一个新的模块啊，所以按照咱的开发特点，咱们在这里边是不是要建个新的路由，这路由比如我们就叫课程分类管理，里边有添加课程分类和课程分列表，所以咱的第一步操作在我的页面中，我就给它加上一个路由啊，这就是第一步。我小的位置。添加课程分类的这么一个路由，里边有课程分类添加和课程分类列表，把这个做到，那路由怎么加？不说各位是否记得啊，我觉得各位应该都记得啊，咱们之前一直在做路由加的方式，怎么做呢？你找到src里边有一个叫router router中有一个叫in带JS，咱在里边按照之前的结构再复制一份就可以了啊，这就是第一步加一个路由，那我就直接用之前的改一下就可以了，因为跟这个差不多。

我把之前这个讲师这个咱给它复制一份，给它放到这个下边。这个位置，然后放完之后把里边这个内容改一下。因为咱们现在叫课程分类管理，这名字换一下我叫做subject。啊，这叫。就这个啊，一会我改成叫例啊。这个名字我们叫做课程分类管理。把这个改一下啊，课程分类。然后就是这里边有一个小问题啊，之前我提过，我再提一遍啊，各位在用这个就是外扣的时候，有时候你写代码发现你点键盘上的键，它没有不起作用，那就是这个工具卡住了，就是它里边出现了卡顿的情况，那你怎么做呢？你在点你键的之前再点个键，就点个shift键和你另外键，比如现在我退格，我点个shift加退格就可以了，或者你回车都加上一个shift键，要不然它可能会有卡顿的时候，你卡的话加个shift点就可以了。

那我们给他改一下啊，叫课程分类管理。然后这个名字我们叫课程分类管理，里边图标就用默认的了，第一个我们的功能就是课程分类列表。这个。这个路径咱一块儿改啊，课程分类列表，嗯。然后第二部分我们叫课程分类添加，或者说叫添加课程分类，这个名字我就叫C。

把这个。改一下，然后咱们应该没有这个修改，把这个给它去掉，所以现在这路由我们就加上了，就是在这个页面中再用之前的复制一份就可以了。这是里边的第一步添加路由啊，要求各位按照这个过程能给到快速做到，你之前写过讲师跟他应该是一模一样的。我们就完成了啊，完成之后把这个保存我们到页面中看一下。大家看里边课程分类管理课程分类列表和添加课程分类这两个路由我们做出来了，这是我们的第一步操作。给各位截个图。直接我放到这里啊。然后这个做到之后，第一步完成了，下面再来做里边的第二步操作，我们继续往下来做，那第二步怎么做呢？按照咱们参考讲述过程，因为咱在课程分类中，大家看这一行代码。

这一行代码要指定的是不是你的一个页面，比如说我点课程分类，让他到一个这个分类，比如这个列表页面，这是添加页面，所以咱要对应写两个页面，一个是列表页面，一个是添加页面，那咱们下面来写一下页面呢，按照这个步骤，咱们一般都是放到views里边，那我来到views中，在views里边呢，之前有个teacher。咱现在给他再去换一个这个目录，比如说换一个。这目录改个名字就叫。Subject，在subject里边我们写两个voe文件，一个叫list.voe还有一个叫save.voe就是一个列表，一个添加。这是两个页面，然后咱就改完了，改完之后把这个给他改一下，因为现在路径都变了，咱们的路径再看一下叫edu。

例子，Edu subject把这个做修改，这是咱的第二步操作，创建你这个分类的页面，然后修改路由中对应的路径。这步完成了啊。创建课程分类页面，然后修改路由对应的那个页面的路径。所以咱们第二步我们就完成，主要就是这个内容。然后第二步完成之后，下面我们写第三步就来写这个具体的页面部分，因为咱要做的是添加课程分类，所以咱就写这个C页面，把这个做到。然后写一下第三步。我们就来在这个添加课程分类的页面，也就这个C页面来实现这个里边的这个效果。

那怎么做？给大家来做个分享。那各位也可以考虑一下我们怎么做啊。因为咱们之前做添加讲师，咱们进入到的是一个表单中啊，但是现在我们做添加课程分类，咱进入到的应该不是一个表单，因为在这里边我们要做的事情啊，它这个位置要上传嘛，所以咱们把这页面我们需要给他改一下。那怎么改给大家我这个位置来说一下啊，就是它的过程啊。咱先看接口中。我接口里边的这行代码。就是这个对象。不知道各位是否记得啊，之前问过各位，要各位记住啊，这个对象的含义，它是不是就表示得到你上传文件呀，而咱们根据上传文件再用这个easy Excel并行读取，所以咱的页面该怎么做呢？大家注意，也就说我现在点这个添加课程分类，咱的页面中是不是要有一个上传的一个按钮，就是咱要做一个上传的页面效果。

然一上传，把这个文件传到接口中去，在接口里边咱是不是能做到那个Excel读取，所以咱们啊，在页面中要给它加上这么一个就是。上传的一个组件，然后实现这个过程，这是我们第三步要做的事情，这各位要能想清楚，但接口中得到上传文件，这页面中你要来一个上传组件，那上传组件怎么做，咱看一下还是IUI中啊到里面看一下。把这个我提前点开了，然后咱找到在里边的这个位置叫阿lo的上传，这上传中呢，有很多的这种组件效果，其实用哪个都可以，比如说现在我就用它里边的，呃，就是用这个上传吧。这上传叫做手动上传。

什么叫手动上传呢？比如我现在选择本地的一个文件，然后我点这个上传到服务器，它才就上传，所以咱就用这个专组件，用它来实现我们的效果啊，包括这里边也给咱们提供了它这个源代码，咱把它复制改就可以了。这是我们要做的效果，加上一个上传组件，那这个组件我在课件中给大家都听出来了，各位从我的课件中直接复制就可以了，不需要你去挑选。那我们找一下啊，在我们这个课件中的第四个。前端页面。然后里边咱看一下啊，路由咱加过了，包括这个组件，就是这个组件，我现在把这组件给大家就先复制过来啊，然后咱们用它来改一下，改成我们的效果。那我来复制啊。把它就放到我们这个subject页面中。

就这个。然后复制之后，我下面先写一些初始值，咱先不让他报错，然后咱先看效果。这个结构希望各位记住啊，就这么一个这个结构，那我们来一个初始值，把结构写一下啊，先写个date。Date里边呢，加个这是第一个，然后第二个。我们要加一个是不是叫create，这表示在页面渲染之前执行，然后第三个再来一个叫。Methods里边就定义里头具体方法啊，所以现在写了这么几个，然后写完之后在这位置咱给它加上一些初始值，这初始值呢，我们到我这里边直接复制就可以了，我把这个这些单拿过来，然后各位解释一下这些都是什么意思，我就不敲遍了啊，因为是固定的几个初始值。那我们来看一下这些值都是什么？呃，咱一个看一下啊，首先我们看第一个叫贝斯A片。

这个结果今为咱写过，它表示呢，得到你这个就是con，这里边配置文件的这个路径，就是901N这个这个路径把这个得到，因为咱们上传嘛，他不能用二贾克斯，但是直接提表单，这咱一会改啊，这是第一个，然后第二个这里边还设一个地址，但是这个地址。这暂时我们没用到啊，我就把它去掉了，这地址什么意思呢？就是在这个位置，因为咱们在写这个时候呢，就是这个用户他要传什么格式文件，他肯定不知道，所以咱给他提供一个模板，让他可以下载啊，这位置你可以把这个东西啊传到我们那个osl中去，我就不这么传了，我就直接在本地写一个，咱看看效果就可以了。啊，那我就这么写啊，直接写一个，没有在本地，我就给它传到这个。K里边吧，在这个种啊。在D位，然后这个位置给它加上这么一个文件，比如叫01点叉LXX，把这个文件我给它就直接放过去啊，就这个01点这个文件放到我的本地的目录中去，或者咱方便，当然你也可以放到我们的OS中，都一样的啊。

直接放到这个位置。就是这个啊。这单给他拿过来，然后里边直接我用本地的文件，然后写完之后，这位置是我们上传那个具体的组件部分。在组件里边主要就这么些值，然后值里边啊，这咱一会具体说咱先看里边就是有这个地方。这个地方呢，用差值表示，就是取这个值啊，其实可以不这么写，你把这文字直接给他写过来就可以了。就是你可以直接这么写是一样的啊，或者你下面用表达式取也一样，我就直接这么写了，这个值就不加了啊。这给它去掉。

就是这个啊，所以现在这里边咱们把这个最基本的初始值先给它弄出来，然后弄出来之后我们来看一下目前的效果是什么样的，然后咱再往下继续给各位解释这些具体的含义。啊，现在有一个初步效果。我们来看一下啊这个结果。那这里边，比如现在我来到这个页面。咱现在我点添加课程分类，进入到就这个界面，这就是我们要做出来一个效果啊，就这个样子。这各位截过来啊，咱先看到页面上的一个效果，就是这个效果，然后这个效果什么意思呢？我们来说一下啊。首先各位来看啊，就是现在的第一部分，这部分它叫做Excel模板，说明这一部分什么意思呢？强调啊，这部分其实跟我们实际功能无关，它主要是给用户一个提示，就是我刚才提到的，比如说现在我这位置让用户是不是要上传一个Excel文件，但是用户要传的文件，文件中写什么内容，这用户肯定是不知道的，所以咱给他怎么样提供一个模板，让他可以下载。

他下载这个模板，就按照模板去写内容，然后再做上传，这是第一个。下载模板，这个模板你可以传到OS中去，我这个位置直接刚才大家看到我是放到了本地的这个目录，那这个我用本地直接我们点这个。大家看他可以把这内容下载到我的本地啊，然后你可以按照这个来填内容，这是第一个就给用户做一个友好提示，然后第二部分当我们选择本地的一个Excel文件。啊，比如说我们选本地一个Excel文件。啊，选一个所有文件咱就选它，然后选完之后这个位置我点上传到服务器，这个文件就会传到接口中去，咱在接口中读取那种来加到数据库中啊，咱现在就可以这么来做，这是里边的这么一个页面部分。

各位给他知道啊，所以咱把它效果就做到了，然后做到之后在页面中呢，有一些具体内容给大家解释一下啊，这部分是咱看那个模板啊，就是下载一个，然后下面老是这里这个叫EL阿lo的，呃，刚才我好像去多了啊，Ello的这是一个上传组件，然后在里边有这么几个值，我给各位都做个解释，说一下这些都是什么意思啊。首先咱们看第一个。叫ref，这是什么意思呢？它就表示我这个组建一个唯一标识，就类似于你HT标签中那个ID属性值啊，这是第一个唯标识，然后第二个叫凹凸upload。这什么意思啊，凹凸是不是有自动的意思啊，就这个单词自动的意思，这就表示啊，我们现在是否需要自动上传，什么叫自动上传，给各位举个例子啊，你看我这里边，我选择文件之后，我点这个上传到服务器，是不是要上传，这叫手动上传。

那什么叫自动，咱看这个啊，比如现在我直接选择文件，它就能够马上上传，不需要再点个按钮才上传，这叫自动，而我现在给它改成fo，让它实现一个手动上传，这是第二个啊，再让他手动，就是我点按钮才能上传。然后这几个就这两个是方法，这好理解，上传成功调这方法，上传失败要这方法，然后这里边有一个按钮，是否就是隐藏，就是否可以被点，比如你点完之后，然后按钮不能再点第二次加这个值。然后这个不是特别重要啊，咱看这个值。叫厘米。Limit什么意思？

这单词咱应该都见过啊，不管咱学my circle还是什么地方都有这个单词。limit是不是有限制意思，它就表示目前我限制每次只能传一个文件。就是这位置每次只能传一个文件，这叫限制你的文件数量，然后下面这个东西就是我们那个后端接口的地址，那这地址我给他改一下啊。改成我们这个地址，咱的地址是这个地址。我把它背过来啊。Edu service subject，然后后面的名字叫a subject。这个咱拿过来啊，这是我们的地址，下面有一个内幕five，就是你的input type，等于file中的内幕值啊，之前咱说过，然后还有最后一个。这个希望各位知道啊。这个句话什么意思呢？咱来看这单词accept。是不是有接受的意思，它就表示啊，我们目前这个上传，你只能传个一个sales文件，你传别的类型文件，它不接受，它不支持，而后面就是你传文件这个类型，它这类型中咱就看一个地方，各位能看懂这个地方。

叫MX Excel。MS什么意思？就是咱通常说那个微软Microsoft，微软的Excel啊，你只能接受这种格式，别的格式它不认识，就设置你上传的格式，这是上传组件这部分，然后最后一个按钮，就是咱说那个上道服务器啊，里边有一个事件，就咱一会儿来完成。所以这个啊，上传组件主要这部分不需要各位去敲，但是要求能看懂，而咱需要改的也就这么几个地方，第一个你的地址啊，包括你的方法咱就要实现，其实其他地方不需要做什么变化啊，用这个我们能实现。这是上传组件，然后这个组件写完之后，咱下面在里边来写一下里边这些具体的方法，那我们写什么方法，主要再看里边啊，有三个方法。

这是第一个方法，也就是说你点这个，然后这里边点上传到服务器，它把这个文件要传到记录中去，这是第一个方法，然后第二个方法上传成功，第三个方法上传失败，然后写三个方法。那我来写一下哈，第一个方法。角D位置。就是我们现在。点击这个按钮，要上传到就上传文件到我们的。接口里边这是第一个方法啊，我先定出来，然后咱们写那种，然后里边呢，还有第二个方法是我们那个上传成功之后做的事情。上传成功就是它阿lo。Fairload success。啊，这是第二个方法。

然后还有第三个方法，就是我们上传失败的那个方法。然后上传失败，我这里边也做了定义，就是它fivelo的AR。把这几个方法咱们都给它定出来啊，就是目前需要的就是这么几个方法。这个啊，我们就写出来了，然后写出来之后在里边写内容，首先第一个方法就这个方法，当我们现在大家看页面中，我把文件上传过来了一点，它是不是要上传到你的服务器中啊，要做这个，那这个要怎么写呢？给大家说明啊，因为他现在这个过程并不是做阿贾克斯提交，而是做一个普通的表单提交，也就是说咱们写这个用它的时候要做的是一个表单提交，你把这个过程做个提交，就用它实现一个提交方式，那怎么提交这里边啊有我们voe中的一种写法。

要各位记住啊，这写法啊，我就直接复制过来了啊，咱应该不需要它，应该下面就够了啊，我把这个直接拿过来给各位解释一下啊，这是什么意思。直接我就复制过来，然后这句话就表示啊，我们做那个表单的一个提交，而提交呢，这是用到vuee的写法，主要这行代码。大家看这代码啊，叫这点RS点阿load.sum然后这阿load是什么？就是里边的这个值，根据它做个提交啊，这是我们目前写法，而这写法中呢，如果说啊，你写那个就是JS那个原生的代码，它是这么来写。就你加一个叫document get。Element by ID里边加上你那个ID值，就是一个upload。点上一个submit啊，它的原声是这么来写，这一代码各位应该见过，而现在在我们这个框架中，我们是这种写法，两种写法是一样的，只是在不同的里边用啊现在框架这么来做，咱要写最原始javascript肯定是这么来写。

啊，但是目前他不认是这个啊，他目前用框架中咱们需要这么来做，这是第一个提交，然后下面有成功和失败，成功之后呢，大家注意啊，我现在比如说上传成功之后，那咱做什么。咱是不是给用户一个提示，然后回到列表中了，如果失败的话，那咱给他一个提示，然后停留在当天页面，把它重新上传啊，就是一个提示一个返回，主要就是这么一个基本代码啊，那咱就给他写一下啊。这个我就把这段话咱就。拿过来啊，就这个代码。那我在里边写一下啊，如果说你上传成功，那我们给他来一个提示信息，就提示他这个上传成功，这提示信息咱之前都写过，我就直接啊写个值了。

就写一下啊，这个值我们就叫做啊添加。课程分类成功，然后成功之后再让他就是跳转到。我们那个就是课程分类的列表页面列表咱没有写到啊，当然后面咱会跳转，跳转方式用咱之前说那个路由跳转事件，如果失败的话，那我们也是给他来一个失败信息，就贴着他说这个。导入失败，或者说添加课程信息失败啊，就来这么一个值，也给他来一个提示。比如写一下啊，就叫。添加课程分类失败，主要就这么一个部分，所以按照这个过程，咱们把前端的部分我们就快速整出来了，主要就是这个代码啊，然后整合之后把过程给大家再来说一遍，最后我们来做个测试。

直接看我的具体代码中，首先第一步咱们加了一个路由课程分类，包括列表，包括添加，添加的时候到这个私有页面，在私有页面中呢，我们先加上一个上传的。这么一个部分上传里边，你可以传递Excel文件包里边设置值，然后都做到之后，最后我们点按钮上传，咱给他做一个表单提交，把你文件提交到接口中去，然后提交之后，上传之后有成功还有失败，当咱们是成功的话，那我就提示他添加成功，如果失败的话，就提示他失败。但是成功之后，你可以跳转到列表页面中，后面再再完善啊，但是目前这个过程我们就做到了，主要就这么一个逻辑，用这个过程我们最终就实现。所以各位啊，把这个知道当然在咱们成功之后呢，其实里边呢，你可以用个参数，比如我们写一个response，它能得到接口反数据，但是在接口中返回的就是成功和失败啊，就这不写也可以，你写上能把那个返回值得到啊，我现在就直接写个固定的添加成功。

这个咱就完成了啊，添加课程分类部分，主要就这个代码。咱做到了啊，然后做到之后呢，最后咱把这效果我们给他试一下啊，因为刚才已经是启动状态了啊，是启动状态，咱最后试一下结果。那这试的过程中呢，有几点各位注意啊，第一个这个端口号要改成咱那个N这个端口号上一个都说过了，N这个咱也做了配置，N这个我这里也启动了啊，当然启动中可能有那问题我也都提到了啊，不再重复了啊，然后另外就是你在写这个接口的时候，上面需要加上这么一个跨域的注解，就是cross的注解，要不然会有问题。这各位注意啊，这些都要加上，现在这些应该都可以了，咱这个都启动了，然后咱们最后就来试一下，看一下我们最终的结果啊，最后来测试，为了明显这里边的数据，我先给它删掉。

啊，直接我删一下啊。Delete from edu。Subject这个。先给它删除掉。这里边现在没有数据，然后咱们通过页面我们来最终实验一下。我重新刷新，点击添加课程分类，在里边呢，选择本地的这么一个文件就是本地的。呃，这个文件01点叉LSX，然后写完之后我们点上传，大家看里边最终它的位置。提示咱们是不是成功就可以了啊，但是这个位置你读完之后应该会跳转到这个页面中，后面咱再完善，但是目前提示都成功了，到表里边咱们刷新。各位看到数据是不是可以了，所以这就是前端的这么一个整合啊，咱们把它就最终做到了。

主要这么一个过程啊。我把这个图给各位保存一下啊，第二张图。添加课程分类。前端的一个实现就是这个过程中，前端代码不需要各位去敲一遍，你按照我的课件把这过程给它快速改出来可以了，因为这个代码咱用的都是IUI，中立部分是一个固定的结构，按照里边三个方法提交，成功失败，这过程我们就最终做到了。主要这么一个流程啊。