day07【课程发布-添加课程信息】/03-尚硅谷-谷粒学院-课程分类管理-课程分类显示接口（1）

添加课程分类完成的，然后咱来看这个叫做。课程列表功能。把这个功能我们来做一个具体实现。那这个功能怎么实现，给各位来说一下啊，就是咱们现在呢，大家看在我的课程分类表中数据都有了，然后下面呢，我想把这数据在我们的页面中就来做这么一个显示，显示里面数据，但是这个数据有个特点。因为这个数据呢。是一个层级的关系，就是它有这个一级分类，还有下面的二级分类，有多个一分类，每个一分类中可能又会有多个二级分类，但是它可能也没有分类啊，这是我们一个结构，所以按照这种形式的话，如果说呢，我们还是用之前这种方式，就是表格形式显示也可以，但是这么看并不是特别清晰，所以咱们现在把这个分类列表，咱们换一种方式显示，我给它做成就是。

这种效果。也就是一种树形结构啊，这是我们要做的事情，就是咱们把课程列表用一种树形结构做个显示，做成类似于这种形式。我把它给各位截过来啊。用。树形结构。做个显示就是做成这种效果，那这个怎么做，给各位来说一下啊，第一个它的前端可是很固定的写法，咱们一会儿就参考它事例中的这个前端，把这个复制改就可以了，重点是后端，因为咱们后端要给它构建成这种结构，它才能做个显示，那咱们下面我们先来做一个前端，把前端先做一下。先有一个初步的效果啊。我把这个位写一下啊。那前端怎么做？

角这个位置啊，就是第一个。我们先参考一下啊，就是我们那个脆的那个模块，先把我们这个前端先给他。整合出来。这是我们做的第一个先整合前端，参考咱们的这个模块，那咱就来快速整合一下啊，咱来找一下。首先在这个路由里边，我们找到这个tree。就这个。然后咱看tree是在这个页面叫wheels tree in desk，咱找到啊，Wheels。Tree。Inex就这个页面，那这个页面中呢，有它的前端代码，我现在把这个代码直接给他叫复制。然后复制到我们现在这个课程分类中来，咱课程分类的页面应该是edu中的subject中的例子，我把这个代码我们就直接拿过来，就是对代码。那拿回来之后，我们先看一下这个代码，我直接复制过来之后，能不能有效果啊，有效果之后再来做个详细的分析。

咱们看一下啊。到里边，现在我点这个叫课程分类列表，然后各位来看。效果是不是有你直接复制过来就有这个效果，那咱们下面把这效果给各位来做个详细分析，来看这个前端怎么做到的，当然这个功能重点肯定是接口后端啊，前端是固定的。那咱看什么意思啊。咱们一行来看，首先第一行。最好。这一行是什么意思呢？这是一个叫EL input input是什么？是不是一个普通的输入项，那大家看页面中是不就这部分是它这部分啊，做了一个事情，给我们做了一个检索功能，比如说我们试一下啊，我写个二。包括我写个三，我写个一。大家看到效果是有四是没有数据三都可以啊，这是帮我们做了一个检索功能，这前三中都有了，所以第一个是你输入那个检索那个输像。

第一部分，然后第二部分是核心的这一部分叫e tree是咱们最终那个就是。塑形结构这部分叫yellow，在yellow吹里边有这么几个值，给大家都说一下啊。第一个纸这个东西。就理解为是我们那个ID那个属性唯一标识，第二个叫冒号date，冒号date什么意思呢？表示你要显示的数据，这个数据名字叫DATE2。大家往下看，你看这个位置啊。这个部分。是不是叫DATE2，你注意它是一个数组形式，是个DATE2，所以它里边就是把这个数据做的便历显示，但是便利不需要我们写它这个框架中给咱封装，咱只需要按这种格式把数据给他返回就可以了，这是第二个，就是咱一会儿这数据你看啊，目前是写固定的，咱一会儿通过接口给他返回来就可以了，这是第二个。

然后第三个叫purpose，就是属性，它叫default purpose，那这是什么意思？大家看这里。它就表示取到你那个节点和子节点的一个名称。比如说你看啊，在我这个level one1下边有一个叫children children下边是不是叫level to，这里边的节点叫children准label，就是你的节点的名称，你看每个都叫label啊，这是它的定部分。然后下面有一个内容，这个内容，这个内容是什么呢？它是一个叫node method，是个方法，在方法中主要做的功能就是咱们刚才看那个检索功能，比如我在里边输入一个一，他把一相关的检测出来，输入一个三，把三、四相关的监测出来，这是一个检索功能，就是用到了这个方法。

然后这是里边的相关的一些样式class，包括一些布局，一些样式的东西，这是我们看到页面，而我们现在需要干什么呢？咱做的其实就是这个事情，AT2目前是写固定的，然后咱做法就是写个接口，返回这个数据，把数据在里边给他便利就可以了，咱就是写个接口，按照要求反映数据就可以了。啊，这是咱一个分析。但这数据我强调，你如果说写接口反应数据，数据格式跟这个格式必须要一样，如果说你反应别的格式，那这个框架不认识，所以说你自己遍历，你要不自己遍历，用它框架本身格式跟这个必须要一样，别的格式它不认。这是我们要做的事情。所以咱们啊，现在把这个前端部分我们就整出来了。最终小这位置啊，就是我们现在需要做的事情是什么呢。

创建一个接口，然后把你的这个分类。按照他。要求的那个格式返回数据就可以了，而他要求格式就是里边咱看到这个DATE2中的这个数据，这个啊是咱们要做的事情，所以这里边的重点也就是写接口，它的复杂地方也是接口要复杂一些，所以咱们剩下时间就来具体写这个接口部分。啊，这是各位做的一个分析这么一个过程。然后这个接口刚才提到它要反映数据，那这数据格式，咱先仔细来分析一下这个数据什么样的格式，然后再来分析出我们的代码，咱该怎么去写。那这里边啊，来分析一下啊，我把这个呢，给各位放到一个一个TT文件中来，用它来看一下这个格式。是这个格式啊，那这格式呢，为了明显，我先把格式稍微调整一下，因为这么看有点乱啊，咱稍微调整一下。

这个格式中呢，它是有一级二级多级分类，咱现在应该只有两级分类，那我把它给大家改一下啊，咱先我先改一下啊，然后咱再看效果。这部分啊，我先改一下，因为咱没有三级，咱应该只有两级。这个啊，我先去掉。这是里边的一个值，比如说我再给它加上一个。加上这么一个值。来个五啊，这来一个五，然后下面是一样的啊，就是里边的。这部分有ID有children准这个我就去掉了啊。所以现在这个数据我们给它大概来修改一下，然后咱看一下这个格式是怎么样的啊，大家仔细看啊，首先第一个呢，它的最外层是一个中括号，也就是咱之前说到的是一个Jason的数组，在数组里边是不是有多个对象，就这部分还有这一部分，然后在对象中咱仔细看啊，首先看第一个。

这一部分是什么呢？大家注意在咱分类中。咱是不是有一级和二级分类啊，所以说里边的。这一部分。就是咱说那个一级分类。这是一级分类的地方，然后你看啊，在一级分类里边有一个叫秋准，秋准中是什么呢？代表它那个二级分类，比如写一下啊，这是二级分类一。比如这个叫二级分类二。啊，这个改个值，这是它的二级分类，它这么来表示的，一级分类中用了一个children，准是个数组，里边又有多个二级分类，用这个来表示，包括下面一样，这个是一级分类。

然后下面这些都是里边对应那个二级分类啊，这是二级，这也是他那个二级。这是一个基本结构，所以大家把结构要能看懂，最外边是数组，里面有多个对象，在对象中有一一分类，每个意义中有嵌套，这个二级分类包括每个都一样，它有多个一分类，每个一分类中又可以有多个二级分类啊，当然每个二一级分类中也可以没有二级分类。主要。这么一个结构，所以咱们要做的事情就是把我们的接口数据就返回成这么一种格式，只有你返回这个格式，那我们这个就是前端的框架才认识，如果你是别的格式框架它不认识，所以你自己来写，你用框架格式，比如说这种结构。这个啊，我们做了一个分析，所以各位把这格式给大家知道，然后咱们马上写接口，就来返回这个内容。

这个啊，我们做了一个说明，就把这过程给各位做了一个分析。