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

接口写完了，下面整合课程分类的前端，按照咱的流程，第一个还是在API中，咱把接口地址是不是先做个定义啊，之前有个teacher，那我再创建一个啊，呃，我就用它改一下吧，因为都差不多。用这个我就复制一份。咱们只有一个方法，然后这里边给它改一个名字，这名字我叫。subject.js把subject打开，在里面有多个方法，咱就保留一个，因为目前应该只需要一个方法，这几个都去掉。这一个方法。改一下啊，我们现在要做的叫课程分类。他这个列表这个名字改一下。比如我叫这个get，这个subject。这个里边呢，不需要参数，因为咱们是查，所有把这去掉就叫get list下面写上这个接口的地址，接口地址我到这个。

里边复制一下啊。地址应该就是。这个地址啊，Edu service。Edu subject，然后后面呢，加上我们这个名字就叫get o subject。写到这位置啊，Get o subject，但是这位置啊，没有参数，你写飘的符号，写引号都可以啊，因为它没有那个表达式，不需要取参数，我就写个引号了，写飘也可以啊，这去掉了，然后写完之后下面看它的提交方式，是一个get提交，它里边没有参数啊，所以咱们把不需要的去掉，这是。Get这个。不需要这样的话就可以了啊，把方法定义出来了，然后定义之后，下面咱来到页面中肯定给它调用显示，比如说里边这个位置应该不需要这么做了啊，那我给他改一下啊，首先这个DATE2咱看是到。

这里啊，这二，然后把这二这个数据我先给它删掉，就建这么一个空的一个数组。几个注释啊，这是表示我们返回的那个所有分类的这么一个。数据。第一个空的啊。因为咱们现在要查出来，然后这写完之后，下面呢，我们在这个麦里边把这个方法写下，就是得到这个所有的分类。这个集合这是一个方法，方法里边呢，咱要调一下，刚才我们那个就是定义的那里边的内容啊，那我们来调一下啊，这内容在subject里边，咱把这个文件先引进来，加个import。Subject from，然后加一个叫at斜杠啊，咱看地址是这个APIEDU。

That。这么一个地址，然后咱们调盖中的方法，把这个给他实验一下啊，我们调一下。点上这个方法，这个方法。Get这个例子。然后写完之后下面怎么写，我觉得各位应该都知道，咱之前写过很多次了，格式都是固定的，你加个点赞点开再加点赞就可以了，加个response。箭头函数通过response.date。点上你接口中你起的名字，我这叫list，把这个得到了，然后得到之后复制给上面这个DATE2。啊，我就写一个叫这点。这套。这样的话，这数据可以得到，这DATE2你可以改啊，我就不改就叫DATE2，你要改的话，这里边都需要给他改一下也可以做到啊，但是这么做的话呢，这方法我就是在里边定义它是不是目前是调不到的，但让他要做个调用，所以在这位置最后写一个叫。

可对体的让你页面一加载它就调用啊，因为页面一加载这数据肯定就要查出来，这是咱们最终这个调用这点应该是呃，这个啊get o subject例啊，注意别调错啊。我再说一个细节啊，这次调的是你当前页面中的方法和属性，你不能去调这个属性，这调不调，你调当前的页面，当前页面的方法叫get o service，意思啊咱调这个，所以这样的话，这个过程我们应该就完成了，主要实现了一个逻辑啊，在页面中咱看一遍，最后来测试啊，先把DATA2里边的值线去掉，咱定义一个空的一个这么一个数据，因为咱往里边要通过接口返回，然后定义之后在DS里边把方法接口定义出来，在页面中先引入，然后下面做调用。调用之后呢，数据做了赋值，但是你的方法需要在可里边给它掉下，要不然它会执行，都做完之后这过程就可以了，然后都做完之后呢，还有一个地方啊，还咱还需要改个地方啊，就是里边的。

这个地方。这是什么意思呢？我强调啊，它表示啊，群体里边那个就是数据中的分类的名称的那个T的名字。因为他之前那名字叫label，咱们改的名字是不是叫title，你把这个需要改一下，这里边改成叫title，不改title它不显示，因为咱的名字改成title头，然后改完之后还有最后一个地方，这个地方就做那个检索，这里边也叫开头。就是把里边的label都改成title，或者说你不改的话，你把你后端接口中这地方。就是我们刚才说的这个地方。都改成叫label也可以啊，我就改前端了，后端的就不改了，这样的话功能应该就做到了，就是这么一个快速的整合，主要就是写了一个接口，然后一调用，最终。

把这数据得到上边，它会帮我们便利，因为咱用的框架，然后你把里面的label改成叫title。咱们完成啊，完成之后呢，最后把效果我们就最终来试一下，看一下最终的这个结果是什么样的啊，咱试一下最终结果，现在我再点啊课程分类列表我一点。大家看结果，各位仔细看啊。这数据是不是可以了，前端后端数据库是一级分类，然后在它下面有二级分类，包括里边自带一些什么折叠的效果，你可以往上往下这数据都存在这个可以了啊，包括他给咱们自带了一个这个检索功能，咱也试一下，比如说来一个Java。啊，Java想看啊，是不是不好使啊。Java你看啊，Java没有出来，其实这Java没有出来，对的，它里边是区分大小，写一会咱先改一下啊，Java是不是可以，比如说来一个中文，中文咱就来一个叫数据库。

是没有问题，但是现在我稍微改一下啊，因为现在它这检索功能中呢，是不能区分大小写，大小写是不一样的，比如我写一个大写的第一个字母，Java没有错，但我都写小写，都写大写，它是不对的，那我现在稍微完善一下，让它就是不区分大小写。那怎么做呢？希望各位能想到啊，举个例子啊。咱在网上，比如我们在登录或者注册的时候，经常见过一个验证码，这个东西各位应该都见过，验证码应该是不区分大小写的，那它是怎么实现的呢？其实它的实验方式很简单，要么把你这些值都变成小写比较，要么都变成大写比较，它是这么来做的，都变成小写比较，不需大小写，不管你输入什么，它成小写，输入大写你就变成小写。或者说你都变成大写也一样的，所以咱们把这个给它完善一下啊，完善方式呢很简单，在里边呢，就给它加一个方法就可以了，就这个方法。

我就直接复制了啊，这一方法不知道各位是否见过啊，咱们在Java代码中也有类似的方法，只是这是Java中的方法，它就表示把你这个就是输的值和本身的值都给它变成小写，然后再做个比较啊，表示加上这个东西。那给大家直接复制啊，最后咱看结果。在里边加这个方法。然后这个值也是加这个方法，它就表示把这个变成小写，然后做一个比较。然后这里边有一个叫in of，就表它们的值是否一样，如果一样的话，等于处啊，包括这个不一样啊，它里边这么返回啊。然后咱们完善出来啊，最后。最终试一下啊。现在我都输入小写的Java，大家看是没有错，我输入都是大写的voe，是不是也对啊？

这个就是最终的一个完善。所以咱们啊，现在把这个课程分类功能我们就完成了，主要两个功能，一个是添加课程分类，一个叫课程分列表，主要两个内容我们做到了啊，然后做到之后在添加中还有一个地方啊，咱需要完善一下，刚才没有完善，现在给他最终完善就是在这个位置。上节课提到了，在你加成功之后，咱是不是要跳转到课程力保中去，那怎么跳转？不知各位是否记得啊，咱之前都写过一个词，这个词。叫做路由跳转，咱就来一个叫C点，这个叫UR。点上一个叫push，然后里边加一个pass，后面加上你的路径，它的路径呢，咱也说过就是里边的。就这个路径subject list，你把这个拿过来，当我们添加之后，它就会给我们跳转到列表中去啊，就这么一个路由跳转，这些咱也写到过啊，所以现在两功能我们就最终完成了一个添加一个列表。

在两个功能中我强调啊，重点都是咱的接口添加坑分类，大家要掌握用那个easy Excel怎么去读取Excel，然后怎么加咱们这个一级二级分类，第一个接口，第二接口就是刚才写这个，在课程分类中，咱们怎么按照要求构建成它要求这种数据格式，就刚才我写这个循环和封装过程。这两个接口各位要给他重点掌握啊，咱这个功能中重点就说这两个接口前端不复杂，前端按照我的课件。把这过程快速改就可以了。重点各位。把这个接口给他好好去写一写啊，这是我们课程分类这个模块咱就完成了啊，因为后面咱做到课程中这课程分类的数据我们肯定要需要的，所以咱们先有一个课程分类管理，包括后面做课程中讲师数据需要的啊，这两个算是咱们。

两个前置模块是为了后面做准备，所以现在课程分类我们就完成了。