56.后台系统-课程分类-列表前端原创

刚才呢，咱们完成了课程分类列表的接口，下面我们来整合课程分类列表的前端，咱们来快速整合一下。首先第一步我们先添加上课程分类管理的路由，路由我从里面复制，然后在前端找到routeor下边的in that jet文件在里边咱们把路由先复制进去。这是我们的第一部分，然后复制之后，我们的第二步创建它对应的这么一个页面，咱们把页面最后创建，但是大家看啊，目前我已保存，这里边是报错了。大家记住啊，以后你到这个错误说这个依赖没有发现，一般来讲都是你的路径写错了，他说让我们可以安装，但是其实这是页面没有创建，所以咱们下面把页面做创建，我来写一下啊，在Windows里边有个vod。Vod里边呢？我们建一个叫的这个文件夹。

然后在subject下边建个文件，文件叫做list.vouee所以现在咱们把这个完成了创建，完成创建之后，我们的下一步操作在API中建JS文件，把咱们课程分类列表的接口在里边做一个定义，那我们做个创建，先建JS文件。这次把接口进行定义，也就这个接口，我把这个复制过来，然后把路径对照我们那个路径给它改一下，我先加个注释。课程分类的列表的接口，这是我们刚才写到的，咱们对照看一下啊。首先我们看第一部分，注意这路径不要写错啊。Admin vod subject。然后你看里边这个名字，下面加上我们方法上名字get child subject ID，它是一个get，提交现在接口完成定义，完成定义之后，最后在页面中我们最后实现，我把这个直接复制过来，咱们在页面中写下。

这个部分。我们看一下啊，上面固定的，然后它里边用到懒加载。然后看下边第一个引入这次文件。给各位强调啊，咱们在复制前端的时候呢，一般来讲啊，I的UI部分一般没有问题，有问题都是下面扎死部分，扎部分问题一般是两个，第一个是路径可能没有写对，第二个是你这个response date后面的名字可能跟你的接口不一样，一般就是两问题，那当然检查一遍啊，先看径。API下边的vod subject没有问题，然后咱们定义一个数组下面create的调用，调这个方法方中传个零，就差第一层，然后最终得到我们的数据，就是这个list做赋值，咱们返回的数据就是这个集合，所以给他直接复制一下。另外里边有个漏方法，Load方法什么意思？就是显示下层数据，咱们根据它的ID再进一步查询。

所以以上啊，是咱们整合到前端部分，我们就最终快速完成了，这各位能给他快速做的啊。然后完成之后，我们把前端重新启动一下，我们最终做一个测试，看一下最终结果怎么样，另外各位不要忘记啊，在CTRL上边加上跨域的注解，如果不加跨域，它肯定不能反应到会报错，这个不要忘记。那现在我这里边已经启动起来了，然后咱们看效果啊，在启动中呢，里面有一个问题特别说明一下啊，你看这里边啊，有很多的警告，还有很多的iol，但是你看警告iol都是什么，大家看这描述啊，看这个。这是什么？

是不是四个这个空格，或者说回撤列值，因为我现在加了很多空格，就是这个用的是里边一个插件叫yes link，对我们的代码做一个规范的检查，但是其实这些错误我们可以忽略，那如果说咱们让他不出现这个iol或者这些警告怎么做呢？给各位说一下啊，你不改也可以，只是不改的话，每次有这些警告，咱总是以为报错了，其实这些错误可以忽略。那怎么做说明啊，咱们改个文件。找到项目中这个文件叫wee conf JS项目的核心文件，然后在文件中我们找到里面的这段话叫lit on SE，在你保存的时候会执行这个代码检查，那怎么做，把这值我们改成false，后面注掉，而这么注掉之后，下面你再启动它就没有那个警告或者这个错误了，这给呢可以加上，不加也能运行，也没有什么影响，只是里边有一些警告，把这值改成false，后面注掉可以了。

然后完成之后啊，咱给他再重新启动一下啊，我们再试一下。NPDV啊，咱们再重新启动一下，启动成功之后，最终我们再做一个完整的测试。等它启动啊。大家看啊，目前这里边没有哪些警告了啊，都可以了，你看下面这些是对了，然后咱们在页面中测试一下啊，我们看课程分类管理中，点击课程分类列表，大家看数据是不出来了，第一次只显示一层数据，比如现在我一点才显示第二层，我不点，每次只显示一层数据，这就叫懒加载效果，我们目前呢只有两层，如果你有更多层，它可以依次往下进行显示。所以以上啊，咱们就完成了课程分类管理中的列表功能，按照数型结构的懒加载进行这么一个实现。