77.后台系统-点播管理-课程统计前端原创

下面呢，咱们来整合课程统计前端的。部分，那咱们看怎么来做啊，首先第一个我们建一个JS文件，把刚才的接口我们先进行定义，那咱们在里边创建一下这个文件，我们起个名字就叫做video visitor.js。把接口定义一下，这接口我从里边直接复利下，然后咱们检查一下，跟咱的接口保持一致。咱们看一下啊，Find count课程ID开始和结束时间，注意参数名字顺序不要传错，然后这个写完之后，我们的第二部分，咱们因为要用E叉进行显示，所以E要用的话呢，首先需要做件事情，在你当前的前端里边需要把E下载进行安装，我这里边来下载一下，那咱们看一下啊。我在这个项目中先用终端打开，然后在里边用命令n PM in install加上ES把它下载进行安装。

我这里写的叫杠g save，它表示局部安装，就是当天项目可以使用就可以了，咱们等它下载下来，这一步肯定是必须的，如果你不下载E框架中默认是没有的，它肯定不能用，咱们给它先完成下载NPM，因此到进行实现，这个完成之后咱们下面积木实现，下面呢，咱们来到这个就是页面中，那页面我们看一下啊，首先咱们来到这个列表页面中，我把列表先打开，在列表中有个超链接叫课程统计，也就是这个。然后课程统计呢，按照路径咱就跳转到我们这里边有一个路径，之前创建过这个咱们看到啊，在我们的这个位置。这里它叫做chart.VE咱们到这里面来，然后在跳转过程中传入当前的课程ID，那最后我们在chart.voe中来编写咱们最终代码，我把这个代码复制过来，咱们来看一下最终的实现。

我们来看一下啊，首先引入JS文件路径不要写错，引入E叉组件，然后在里边大家看这个步骤，先得到路径中的ID值，因为咱们传入IDID就是课程ID得到之后调方法进行显示，用到了一叉中的这个效果，最终实现。啊，包括你看啊，最终这里边的值我们有两个，一个是X date，一个叫y date，这两个名字是接口中咱们设置的名字，比如这个X date，还有y date，然后在过程中呢，还有一个小细节，我这里边啊，大家看就是这个位置，比如说你现在啊，没有选择时间，那我就初始化显示最近十天数据，这是当前的日期，然后这是十天的数据啊，比如说我今天1月1号，然后他十天数据进行显示，做了一个日期的初始化，让他肯定能查到数据。

所以以上啊，就是咱们完成的里边的这么一个基本实现，咱就把这个课程统计的功能，我们最终做到了，然后做到之后，最后咱们把效果试一下，看一下它最终的结果怎么样，咱们做个测试。咱们看啊，刚才接口应该是已经重启了，然后别忘记跨域的注解，咱们来到页面中做一个技术实现。那咱看到啊，咱们找的有数据的就是18的这门课，咱们看啊，18的这门课是哪门课，因为别的课程可能没有数据，咱就找了有数据的这门课程，它叫Java精品课程，那咱根据它，我们来查询，看里面的图表的显示。咱们找一下啊，Java精品课程。或者说你到里边啊，直接搜索一下啊，咱就搜索一下，把这个用一下啊，Java精品课程就这门课程，然后这门课程里边我们点击课程统计大家看啊，他就来到这个界面，然后在界面中你看现在有一个默认的初始时间，这个时间咱给他改一下，为了能有数据。

我改一下啊。改成这个。2021年3月2号，这里改成202年，就是这个日期。然后现在啊，我在里边。给它改的长一点啊，我得有数据，现在在里边我点查询。大家看效果就出来了，你看啊，目前我有三个日期，12月1号，二号，三号，然后每天有不同的观看人数，所以现在咱就完成了课程统计功能，最终用图表方式完成了展现，这就是咱们完成了点播管理中的课程统计功能。