day16【统计分析功能】/09-尚硅谷-谷粒学院-统计分析-生成统计数据前端整合

就是下午咱们这么几个内容，首先第一个内容，因为咱上午是把这个生成数据的接口部分写完了，然后咱们一会儿把它的前端页面找出来，也就是在咱们的后台里边，把这个统计分析的页面做到跟之前一样，咱也是加个路由，然后加个添加，就是生成数据，包括数据显示啊，所以咱们一会儿先整合这个页面。然后整合一遍之后，给各位来讲我们的第二个知识点，就是下午的第二个，第二知识点呢，给大家会讲到这么一个东西啊，这些东西比较简单，就是我这课件中写的，它叫定时任务，什么叫定时任务呢？简单说一下，用句来说，比如现在啊，我这里边生成数据，咱现在只有是调这个接口，数据生成生成，假如说我现在想要数据自动生成，比如我最用一个规则，让他在每天凌晨一点去追测这个程序，他把前一天的数据自动给我们查询，做添加，所以咱用一个东西就叫做定时任务，他还可以设置在每天的固定一个时间去支用的程序啊，这个叫定时任务，这咱一会儿继续说到。

这个比较简单，主要是用了一个表达式，通过表达式这里执行程序有规则，这个啊就是咱说的第二个，然后这个说完之后咱来做第三个，第三个呢，就把咱们表中这个数据用个图表方式做个显示，就咱们最终显示出来，在显示过程中咱要用到这么一个，就是前端的一个图表工具，叫做1AR，用这个我们做个展现。然后这个过程中呢，我们会涉及到啊，包括咱要写个接口，做这个数据封装给咱一块儿完成，所以下午主要这么几部分，第一个把生成数据的前端完成，第二个讲一个叫定时任务，然后第三个把这个数据用个图标显示，包括咱用的一个E叉，以及我们后端的这个接口开发这个啊是咱们马上做到的，各位把这个先知道啊。

然后这个介绍之后，咱们先来做我们下午的第一个内容，就把这个生成数据的前端部分，我们快速做整合，这个过程应该不是很复杂啊，跟咱之前写都一样，那我就快速整合一下，咱还怎么做啊。我就不在这里边画了啊，因为咱之前都写过类似的技术，都是之前用过的，只是说我们换了一个新的功能啊，那咱们一步步来做一下啊，我就按照我课件中的流程来做了，首先第一步呢，因为咱们现在这个sta是一个新的模块，所以新的模块呢，我们需要在N这个里面再配置一个规则，那我们来检查一下啊，这规则之前我应该配置过了啊，咱们直接看一下配置文件，咱们检查一遍。往下找啊，在这里边呢，因为咱们现在的端口号是8008，我们这个地址里边叫ta service，那看一下我的配置中应该是到这个位置sta service8008，咱现在加里有规则啊，这个各位需要给它加上，加上之后给它重启，然后咱能看到一个效果。

啊，第一部分配置NEX，然后配置NEX之后，下面咱开始写这个页面部分，就是在我们的后台中做这操作，那怎么做咱看一下哈，这个啊，我也再画一下哈，因为咱们有几天没写这个后台这部分了。那怎么做呢？一步来起啊，第一步。咱们先配置N这个里边那个路径的一个规则，这咱刚才配置过了啊，然后第二部分我们就是在我们的页面中，也是给他要添加上这么一个路由，就是添加那个课程啊，不是课程是统计分析的这么一个路由，也就是在这位置，咱按照这些方式给它也是加个路由，那我们给他快速加一下啊。这怎么加，不知各位是否是有印象啊，咱们来到我们的后台这个项目中，在这里边呢，怎么加呢？咱找到src中一个地方叫router，在root特里边，咱之前加的是在这边做到的，当时咱做法是改里面的气压值，现在跟它一样，那我也是把这一段咱复制一份，然后用它快速改出我们新的这个路由。

啊，那我给它复制，然后咱们改一下啊，这个路由我们叫做统计分析，那我给它改个名字，比如说叫这个sta。啊，这叫sta，然后这里边改个名字叫统计分析，这个位置叫统计分析，在统计分析下面咱们写这么两个部分，一个叫生成数据，一个叫图标显示，啊，那我来改一下啊，比如说这里边生成数据，咱给它起个名字，我就叫这个。这名字就叫生虫。数据。

包括下面这个title改一下啊，这是第一个生成数据，然后这个写完之后，下一部分我们叫图表显示，图标显示，我改个名字，比如叫这个受啊，就是显示。图表显示这个位置叫。图表显示，所以现在咱们把这路由就快速做了一个修改，就是按照这里边统计分析里边的生成数据和图表显示啊，这个咱快速加上了，各位把这个也能给它回想起来啊，咱之前一直在写在rootr的index里边加上一个路由。就是第一步啊，我们快速做到了啊，然后做到之后我们看一下页面，把页面中刷新，我们看到啊，在里边有一个叫统计分析两部分，一个是生成数据，一个是图片显示，这是我们做的第二部分添加路由。然后路由加完之后，第三部分咱肯定是根据路由来创建它对应的页面啊，那咱把页面做创建，第三步创建我们这个应该是两个vuee这个页面。

啊，两个页面，一个是生成数据的，一个是图表显示的，那我在里边啊，咱就快速创建一下页面呢，咱都放到这个views里边。那我为了跟其他的区分，我在里边呢，就是再来创建啊，这么一个文件夹，就这位置啊，假如我写文件夹，呃，我就写到。还是写到edu里面吧，啊，就写到这个位置了。或者写外边都一样啊，啊，那我就在外，因为它不是课程，它是新的一个模块啊，那我这个名字我就叫sta，然后在sta里边我们创建两个vuee文件，第一个是生成数据的，我就叫create.vue这是第一个，然后第二个是图标显示的，我叫受点vuee，就是显示的这个我们做创建，然后创建之后在这里边咱给它改一下。

改成我们这个地址，第一个sta，然后它的名字叫create。第一个啊，第二个图标显示sta这个值叫做受，这样的话我们就改完了啊，这是我们做的页面，包括路径修改，然后这个做到之后，按照咱们之前一贯的流程，那肯定还是API中创建文件定义的方法，然后在页面中引入调用咱的方法，把这个不用做到啊，那咱就把这个快速完成一下，我们写第三步啊啊第三步啊，就创业页面我们写第四步。在API中创建JS文件定义接口里边那个方法，那咱们写一下啊，找到API。这个位置在API中呢，现在我来创建一个JS文件，我就写外边啊这文件，比如用之前的咱就快速改一下，因为都差不多用它咱们快速改出来。

我给他。复制过来啊，然后这个名字改一下，叫Sta.JS这个文件改完之后，把里面内容咱改一下啊，第一个引入这个request，然后第二部分写咱的接口，这些我先删掉，保留一个。然后这个接口就是。商城统计数据。这个啊，下面咱写的方法，比如这个方法我就叫。Create date。因为咱们生成数据，我们是根据某一天去生成，所以在里边传上你这个天，我们就写一个D啊，就是某一天，然后出完之后，下面写一下咱那个接口的地址，我把这地址咱复制一下叫sta service。这个啊，这个名字。这个拿过来后面加上那个方法，名字叫count啊，其实名字可以改个名字啊，我就叫这个啊，用这个名字。

最后就是传入当前某一天就写一个D。这个是咱写的方法，然后咱再看提交方式是个post提交，把这改成叫post，所以这一步我们就做到了，在JS里边啊，我们定义它这个方法就是API中做个创建。也是咱们之前啊，一直的这么一个写法。然后这个做到之后，咱们第五步就在页面中做这个最终调用了啊，那我们写一下最后一步啊，第五步在我们这个生成统计数据的页面中调用方法，然后实现我们这个过程，那咱们来做一个就用调用啊，咱看怎么做啊，我们现在来到咱这个方法中，那我说一下怎么来写这个功能啊。各位注意啊，咱说一下这个页面，比如说我现在啊，点击生成数据是不是要到咱的页面中，那大家说这页面中该怎么显示呢？因为你第一次点升数据，咱要查，或者说我要得到哪一天的这个数据，是不是肯定不知道这些单怎么做呢？就是当我点升数据在我们的页面中应该怎么做，就页面中啊，应该是有这么一个输入框，比如说有。

是不是一个框，然后这个框中的咱可以输入我们当前这个日期，或者你要查询的日期，然后输入日期之后，后面咱将按钮，比如我们叫生成，当我一点生成，它就根据这个日期把这数据查我们的数据库，然后最终加到统计表中，所以咱们在页面中应该就是一个情况，咱有一个可以输入日期，一个输入框点生成，把日期传到接口中，把这数据查出来，加到统计表中啊这个是咱做的页面。就是一个普通的竖框，但是这里边呢，因为是个日期嘛，所以这个日期呢，咱就可以用那个IUI中那个组件把这做到啊。那咱们把这写一下啊，就是页面这部分我就复制了，然后扎锁部分我们从零去写一下啊，这部分直接我就复过来。

把它啊复制到我们这个页面中，然后咱看一下这部分啊，又是一个普通的表单，然后在表单里边呢，我们是写了这么一个，就是叫yellow date，是一个日期选择框，咱能选择日期，就是年月日这种格式，最后我们点个生成是按钮，咱可以根据这个日期，然后最终。提交到接口中做做操作啊，这个结构写出来了，然后下面咱写这个方法。在方法里边，首先肯定先引入。Importta啊，然后from加上咱那个结构at API sta啊，之前一直这么做，然后下面写这个，就是我们一直写这个结构啊，Date。退。啊，然后下面有一个叫created，还有一个method。

啊，但是现在create的应该用不到啊，Method咱要用到，因为咱要定义方法。写一下啊，Methods。这个是我们这么一个基本结构，咱们把它写出来了，然后在里边呢，我们有一个初始值，就这个叫D啊，是我们那个当前日期，所以把这个D在里边，我做一个初始值的这么一个定义。这个咱就写完了啊，一个页面，那我们先看一下页面，然后把它调用，咱们快速完成，咱看页面啊，现在我点生成数据，大家看是不是这个效果，而在这里边我能选择一个日期，比如说我现在选择就是里边这个。3月9号当我点生成，它就会调接口，把这个日期的数据给他查出来，调到表中，然后点生成之后，他肯定要跳转到咱的图表显示页面啊，这咱一会儿完成，所以它的页面就这个效果，把这个日期传过去就可以做到，那咱往下写啊，点生成咱们要触发一个事件，这个事件里边我这里有个方法就叫create。

那我在下面写的方法啊叫。在create里边呢，咱就要调这个接口，就是sta点上这个方法。啊，就是里边的这个方法create。Sta date里边传入你那个T就是z.date因为这个D我们做了微杠model双向绑定，就是之前说到的，然后下面我们就加了这么一个。点阵，然后第二个。Response。箭头函数这样的话就能生出来，如果生成之后，我们可以用出一个提示，比如说提示它什么数据生成成功，或者数据添加成功，最终跳转到咱那个显示页面啊，那咱最后啊，给他加上这么一段提示。这个提示我就到之前的里边，咱们找一个复制过来，就是这个简单的提示啊，就是这种形式啊。

做一个提示给他拿过来，比如提示他说这个。生成数据成功，然后生成成功之后，咱就可以让它跳转到。啊，跳转到咱那个图表的显示页面，那我写一个C点，这个叫router。点push。里边加上咱那个结构就来一个pass，然后加上你那个路径啊，这路径啊，到这里边咱给他。复制过来啊，就是我们的这个路径sta能加上一个瘦。这个啊，写过来，Sta说。这样的话，咱现在把这个调用就完成了，就是这么一个结构啊，这应该很简单，比咱之前写的应该都简单啊，用它可以快速做到，所以咱们把这个就完成了啊，当然里边就还有一个细节，就这个地方啊，就表示你按钮点完之后，是否它可以再点就加一个，就来一个初始值的啊，让他来一个false。

做到了啊，然后做到之后前端整合完成了，咱最后把这效果咱试一下啊，就看一下它最终的结果是什么样啊，我们最终给他试一下啊。那咱们最后测试啊。我现在接口应该都启动了啊，就不需要再启动了，N这个词也启动了，然后前端里边也都加那种，那我们看结果啊，我现在把这记录先删掉，就现在统计表中没有内容啊，但是会空，那我来试这个效果。我重新测试啊，咱们刷新。然后点击统计分析中的生成数据到咱们这个页面，在页面中选择日期，比如我们3月9号这个日期有数据，当我点生成来看结果我一点。大家看啊，在里边是不是提示我们生成数据成功，然后它跳转到了图标显示页面啊，这些图表咱没有做到，但是目前已经成功了，然后成功之后到表中咱们刷新。

大家看数据是不是有了，所以这样的话，前端我们就做到了啊，就是这么一个基本实现，各位按照这个过程把这个能给他快速做到就可以实现啊。我们就完成了啊，关于前端的一个最基本的一个整合。这个图我保存一下啊。第四个。我们刚才做到就是生成数据前端的这么一个整合。所以咱们把它就完成了。