133.后台系统-直播管理-前端整合原创

各位同学大家好，咱们刚才完成了直播管理相关的接口，下面咱们开始整合前端，把最终的功能做个实现，那咱们按照课件中的过程把前端整合出来。首先第一部分呢，我们先加一个接口，因为一是要用的这个接口是什么呢？就是一个简单的查询所有课程，咱们在进行这个直播配置的时候，可以推荐课程，所以咱把所有课程做个查询，那下面我来快速写这个接口，这个接口呢，咱们在service vod里边的cos ctrl里边添加上这个接口，查询所有的课程。那我们来找到啊，Service vod模块中里边有一个叫cos controller，然后在里边呢，我们加上这个接口，这个接口做的事情就是查询所有的课程，为了一会儿直播配置中使用，然后这里边我们在service中把这方法进行创建。

创建之后来到实现类中，最终做一个实现。咱们快速来写一下这个方法。这个方法我们就直接调用base map中的方法select list，把所有课程咱们进行查询，然后查询之后在课程里边呢，有那个讲师的ID，还有课程的就是那个分类ID，咱把它做进一步的封装，这个咱之前都写过，那我直接调方法，我们做个实践。上一个式，然后调用我们里边这个应该有这个方法，Get and啊传入item，把这个做封装，最后把例做个返回，这一方法咱看一下之前写过，根据讲师ID得到讲师名称，根据分类ID得到课程分类名称，为了一会儿显示作准备，所以现在把这接口我们就快速完成了。

Cos ctrl中的接口完成之后，咱把服务给它重新启动一下，然后开始整合前端，来到service vod模块，把这服务我们重新启动，所以现在接口就加进去了，加进之后下面咱们开始做前端，因为这是后台管理系统中，所以第一步我们先添加上这个路由，那路由注意啊，不要改错项目，咱们来到我们的后台管理系统中就是这个项目。然后在里边，首先我们来到里这个S里边的里边，把由咱们先加上，我就加到这个位置。然后这个路由我们叫做直播管理，把它先加上，加上之后咱们的第二部分我们进来写在里边呢，按照路由里边的结构，我们先创建页面，包括定义它的这个接口，那咱们继续来写一下啊。

那下面我来写一下，我把页面我们先进行创建，按照课件中这个顺序啊，就是这个顺序中呢，我是先定义接口，那我先写接口啊，接口咱们在里边这个SRCAAPI中里边创建文件夹，这文件夹我们就叫live啊，这我提前创建过了，然后里边建一个文件叫这个live.cos JS把课件中这个接口在里边直接进行复制，这是咱们刚才写的各个接口，这里边我已经都定义出来了，这个直接复制可以了，然后下面还有一个部分在cos里边加上刚才这个查询所有课程的接口，咱把这个拿过来，然后写到这里。我加上一个注释查询所有课程，所以接口部分我们就完成了，完成之后下面咱们来创建页面，那页面呢，我们在s RC views里边建个文件夹，就叫这个live。

然后live里边再建文件夹，我们叫live。Cos这个做创建，创建之后看这里边描述level Co里边两个文件，一个叫list.voe一个叫conf.voe咱把这两文件创建出来list.voe。还有一个叫config。就是一个配置的一个列表部分，所以现在这个完成，完成之后我们看路由里边啊，后面还有一个观看记录，这个咱也建一下，建文件夹叫leave visitor，我们创建到这里边。做个创建，创建之后里边有个文件就是list.ve。所以咱们现在啊，把里边相关的文件，咱们就完成这么一个创建，这部分我们就完成了，然后完成之后呢，继续往下来做，下面写上页面中的内容，第一个咱们先复制list.voe里边内容，就是在我们的这个live cos里边list viewe中把内容复制过来，它就是查询，咱们这个就是直播课程的列表，包括里边的其他功能，这个拿过来。

然后下一个就是里边那个点voe，我把这个直播课程配置里面那种给它同样复制过来，所以咱们现在就完成了前端的一个基本整合，这个就做到了，然后做到之后我下面呢，把这个前端服务咱们重新启动一下，然后最终做个测试，咱们看一下最后这个直播管理的效果，它到底是怎么样的。党的先启动，然后最终我们来测试一下。咱们稍微等一下。

然后大家看啊，目前已经启动了，然后咱们进入到里边开始完成测试。我们找到呢，路由里边有一个直播管理，然后里边有直播列表，当我点击大家看到在我的页面中应该会显示我现在直播课程啊，这是我之前测试数据，就这些图片，所以大家看目前就都是显示，然后这里边我是十条数据，咱们应该没有那么多，那我们改一下啊，先看一下分页。呃，咱发现啊，我改成五，就是每页有五条记录，咱发现分页是不是好像没有做到呀，那咱看一下什么问题啊，咱来到接口中找到live这个里边大家注意啊，咱之前讲到分页呢，因为咱用的是my plus，里边是不是要配置一个分页的插件呀，而我现在在里边并没有配置分页插件，所以分页没有做到，那咱们找一个别的改一下就可以了。

我把这个配置类给它复制过来，然后咱给它改一下啊，改成当前这个叫live con，这些给它先去掉，然后里边配置了分页插件给它加上，加上之后咱把这个服务重新启动一下service live，然后看一下这个分页基本的效果，现在数据已经查询出来了，显示出来你这个直播课程的列表，咱把这个分页给它加上，刚才忘了加一个这个配置类啊，这各位自己写的时候注意一下，能快速找到这个问题。咱等他重新启动起来。我们稍等一下啊。啊，现在已经启动了，咱们到里边刷新。各位看啊，这里边报了一个503啊，我重新刷新一下，应该没有启动完整，咱重新进入啊。我点击这个直播列表这里边啊，没有找到，那我这样啊，我把服务器都充一下503什么意思，就是服务没有启动，或者服务有问题啊，就是服务没有正常启动，那能给他都重启一下腾就重试一下啊。

哇，这些。重启一下，然后这个前也。重启一下。最终我们再做个测试。比如咱们重新打开做个测试，为了防止有缓存，直接给它清清一下。等它集中起来，最终我们看一下最后的效果。刚才是少加了一个分页的配置类。现在这些服务都已经启动了，然后咱们重新进入，最终看一下效果，点击直播列表，大家看里面我们看一下啊。里边数据是不出来了，然后咱们改一下，每页显示五条记录，大家看到分页是不是也出来了，刚才就忘了加入里边这个就是插件的部分，然后这里边我们看啊，现在我可以进行添加填写信息，包括里边我可以修改做回显都有数据，另外在里边我可以删除，包括你看啊，我们可以查看这个配置信息，在里面进行配置，而配置中呢，有商品列表，咱们可以选择你的商品，就是我们这个图书在直播中未经行显示，这里边有功能，包括我可以查看账号信息等等，所以以上咱就把这个直播管理的后台系统部分给他完成了，包括接口，包括前端各位重点把接口能给它完成出来，然后后面咱们会在公众号中进行直播的收看，目前把后台管理系统中的直播管理的模块，我们最终就完成到这里。