54.后台系统-课程分类-列表接口（1）原创

各位同学大家好，下面呢，我们来实现下一个功能模块，咱们来实现的模块叫做课程分类管理模块那类模块，首先我们先介绍一下模块的需求是怎么样的。咱们在添加课程的时候选择讲师，另外要选择课程的分类，比如说我现在加一门课程，这门课程比如说叫Java基础开发，那这门课程属于哪个分类，是不是要属于后端开发中的Java分类里边。比如说我现在再加一门课程，这门课程叫。Java入门操作，那这个课程是不是要属于前端开发里边的Java这个分类中去，所以这里边我们来实现课程分类管理，为了后面添加课程做准备，这是他一个基本需求。然后在课程分类管理模块中，咱们主要完成三个功能，我在里边给各位同学写一下课程分类。

管理模块三个功能，首先第一个功能就是课程分类的列表功能，列表功能咱们怎么做呢？大家看图里面，我们按照树形结构做个显示，这是咱们一会儿要完成的第一部分。在里边写一下树形结构的这么一个显示。然后这个之后，我们课程分类管理中的第二部分，再来实现课程分类的导出功能，也就把我们数据库中的数据最终导出到一个Excel里面去。我写到这里，导出到Excel里面去，这是第二个功能，也就是说我们在页面中有个按钮叫导出，当我点导出，把数据导出到一个Excel里面去，这是咱们的第二个功能，然后这个之后我们的第三个功能来实现课程分类的导入功能。

什么叫导入功能？就是把Excel里边的数据给它添加到数据库表里面去，也就是我课件中的这个效果，咱们点击上传，选择本地的某个Excel文件，然后把文件中内容读取主宰，最终加到数据库中，这是我们要实现的三个功能，课程分类的导入，包括导出功能，这各位知道，然后这个过程中呢，我们会讲到一个新的技术点，这个技术的名字它叫做。Easy Excel，咱用这个技术来实现Excel操作，包括它的读操作，包括写操作，所以以上是咱们针对这个课程分类管理一个基本的说明，这各位先知道。然后这个说完之后，下面呢，我们先来做里边的第一个功能，就是课程分类管理的列表功能，做这之前咱们把这个课程分类这个表我们做一个介绍。

我小这里。课程分类的表的一个介绍，那这表我们来看一下啊，这个表的特点，首先各位同学看一下我这张图里边。这张图中表示分类的列表，然后列表呢，咱们用的是一个数形显示，而数形显示中大家看到啊，比如咱以这个为例，在我这里边它的第一层是不是叫后端开发，在后端开发下面是不是有Java，这里边的第一层叫前端开发，它下面是不是有javascript？所以咱的数据有一个特点，数据按照层级结构进行存储的，那这个存储咱们怎么存到数据库表里边，给各位做个说明。我们看一下啊。之前给大家共享过那个词后语句在咱们的。Vod的数据库里边一个表叫这个表就是咱们那个课程分类表，然后在表里边的有很多的字段，那这个怎么来进行存储的，并且表示它的层级关系，在这里边给各位说一下啊，我写到这里。

咱的表里边要表示它这个叫层级的这么关系，比如说第一层后端开发，第二层Java，第一层是前端开发，第二层是javascript，这叫层级关系，那怎么表示给大家写一下啊，我就画这么几个数据，咱做个说明。比如说我现在啊，有第一条数据，在第一条数据中呢，咱目前有这么三个字段，我在里边写一下啊，就是三个字段。三个字段中的第一个字段是咱们这个数据，这个ID。然后第二个字段是什么呢？是这个就是叫做parent ID。大家看这名字是不是叫父ID，另外还有一个就是这个数据本身这个名称咱们叫name，这是三个基本字段。

比如说我现在啊，我这里边表示我的第一层，他的ID假如说是一，然后它的名字，比如说我们是这个叫后端这个名字，然后这里边比如说它是第一层，那它的party值我们就表示零，零就代表它是第一层，也就是它是一个顶层的这么一个数据，就是它上面没有数据的，它是最顶的数据，这是我们的第一条数据。然后这个之后我们进一步来描述。比如现在啊，我们有第二层就是在这个。后端下边咱们有一层数据，这个数据比如说我们叫Java，那咱来把它的关系做个表示，怎么表示我写下啊，首先还是三个字段。比如说啊，我现在ID是幺幺名字，咱们叫Java，那大家想一下啊，我怎么表示Java属于后端下一层的数据，你说这该怎么表示，大家想一下怎么表示。

是这么来做，它的part ID跟这个后端的ID值是不是要保持一致，就是这两值是不是要对应关系，这就表示它的下层数据，如果你还要下层数据，以此类推，也就是里边的这么一个表示，我写一下啊。ID和。Parent ID的这么一个对应的一个关系。用它来表示它们之间这个层级的关系，这各位知道，而咱们的表里边按照这种结构表示第一层，第二层，如果有更多层，它都是这么来表示，所以各位把这个记住啊，在表里边怎么存储带层级关系数据，用ID和ID表示他们的关系，这个咱做个说明。包括大家看表里边，你看啊，有ID，有title名称，有判断ID，用这个表示他们之间的层级关系，所以这个我们做一个介绍。

大家把这个特点记住，然后这个之后呢，下面我们先来做第一个功能，课程分类列表的功能，这个功能我们要用树形结构做个显示，也就是最终呢做成这么一个效果，然后这个怎么做这个过程呢？我们主要基于element UI中的组件进行实现，那大家找一下啊，找到IUI中组件，这里边有个地址，这地址我们打开看一下，我这里边已经填打开了，然后打开之后呢，咱找到这个地方。叫数形数据与懒加载，在这里边用它来实现，就是咱通过懒加载方式进行显示。那什么叫懒加载？说明一下啊，因为这种思想很多地方都要用到，什么叫懒加载？说的简单点，就是咱们每次只显示一层数据，比如说我现在啊，咱就举个例子。

比如现在呢，我的数据库里边这么存的。我的第一层我叫后端，叫前端，包括数据库，这是一层数据，那咱第一次只显示一层数据，比如我现在点击后端在显示后端数据，比如后端中有个Java，不点击不显示，当我点击前端在显示前端里面数据，这个叫懒加载，每次点的话才显示下一层，不点的话只显示一层数据，所以我们现在这么来做，通过懒加载方式进行实现。这是咱们的实验过程啊，那怎么做IVUI中呢？把这过程给咱们都封装了，咱们看一下啊，它是怎么做到的。首先大家看啊，上面这个图里边就这段数据不是在加载，它是一次性把数据都显示出来，而下面是加载，大家看这个箭头，你看啊，我一点。

是不是才有下层数据，你不点只显示一层数据，所以咱就用它进行这么一个实现，那怎么实现，咱们看它的源码中一个描述啊，我把这段代码给个复制出来，再用它看一下IVUI中是怎么封装的，然后一会儿用这个改成我们的效果。那咱们来看一下啊，我把这段数据呢，就是放到一个TXT文件中，然后在文件中我们来做这么一个查看。咱们放进去啊，看一下啊。首先它里边有两部分，上面不是懒加载，我先去掉，咱就保留那个懒加载的过程，就是下面这个。然后这里边用的数据叫table date1。咱就把这个table date保留，其他数据也给它删掉，然后咱们看一下这个特点是怎么样的啊，首先各位看。EL table data是咱们的这一段数据，然后在里边懒加载，它有一个叫lazy，是不是懒惰啊，另外里面有它的其他的值，然后这个特点咱说的具体点啊，大家看这数据里边。

这个数据是一个Jason的数组格式。在数组里边有很多的对象，然后在对象的数据中啊，大家仔细看啊，数据中有这么一个值，各位看这段话。叫has children只是处什么意思，就是它有子节点，或者说它有下一层数据，那这句话什么意思呢？给大家说的具体点啊，比如说各位看。我这一行是不是有四行数据，而第三行数据中是不是一个箭头啊，箭头就表示它有下层数据，而这个过程中U中做了一个封装，怎么封装它就看你数据中啊是否有has children，如果has children值是true，那它就显示箭头，然后有下头数据，如果你had children值没有或者说是false，它就不显示箭头，表示没有下头数据，当咱们点建成的时候，它会掉里面，这个叫漏的方法。

然后漏的方法中就来加载相同数据，所以它的做法就是根据has的丘振执事处做过判断，如果它的执示处，它就有箭头有相的数据，如果不是处，那它就补景显示，这是里边的这么一个特点。所以咱们要怎么做，咱们按照IUI中的要求返回相同的数据，然后有下层节点，这个值是处没有的话，那这值就是false可以了，它是根据这个。做的一个判断，这各位要清楚啊，那这里边给各位啊，我在图上再进一步画一下这个特点。然后啊，咱们来看啊。这个图里边，首先我把刚才的数据，我先结构图就这个。然后在数据中呢，有个值叫做has children，值是true I的UI中是根据它做的一个判断。

那这个啊，呃，我再重新画个图啊，因为这里画不下了啊，在这里边写一下，然后它根据这个判断，如果说你的值是处，那他怎么做呢？在你数据位置，它就给你显示出这么一个箭头，表示它有下一层数据，它就是这么做的，如果说你的值呢不是处，那它就补径显示，所以MMU中根据这个做处理，我们要做什么？咱就是返回相同格式数据，如果有下一层让这值等于处，没有的话，让这值等于false。就可以了，所以这个啊，是咱们对于它的一个分析，这个过程IUI中给咱们都做到了，按照它咱直接实现就可以了，这是我们看到这么一个分析。那这个分析之后，下面呢，咱就开始来编写它的接口，然后最终在整个前端做个实现，这个前端很简单，就是这个结构，主要是接口，咱们要好好去写写，那下面咱们开始编写课程分类，懒加载这个接口。