开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：统计分析-生成统计数据前端整合】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11507
统计分析-生成统计数据前端整合
目录：
一,知识点
二,nginx配置
三,如何添加路由
四,创建页面：生成数据与图表显示。
五,在 api 创建 js 文件，定义接口的方法
六,在生成统计数据页面调用方法
一,知识点
(1) 将前端页面找出，在后台里。把统计分析的页面加个路由，然后加个添加，即生成数据，然后数据显示。先做好页面，然后整合页面后讲解。
(2) 定时任务。
举例说明，比如现在接收数据，只有调用接口，数据生成，假如现在想数据自动生成，如使用规则，让它在每天凌晨一点去追一次程序，他把前一天的数据自动查询做添加。这就叫做定时任务。
他可以设置在每天固定的时间去追我们的程序，这个叫一个任务，比较简单，主要是用了一个表达式，通过表达式使执行程序有规则。
(3) 把表中的数据用图表方式做显示。最终显示出来，在显示过程中，用到一个前端的图表工具：ECharts,用它做个展现，过程中涉及到包括几个接口做数据封装。
主要部分，第一把生成数据的前端完成，第二讲定时任务，第三把这个数据用图标显示。
包括用 ECharts 以及后端的接口开发，是马上会做的。先把生成数据的前端部分快速整合，这过程不是很复杂，跟之前写的一样。所以就快速整合怎么做。
之前写过类似的技术，都是之前用过的，只是说这次换了一个新的功能。
二,nginx 配置
location~/staservice/ {
proxy_pass http://localhost:8008;
}
因为 sta 是一个新的模块。我们需要再配置一个规则，现在来检查一下，这个规则之前我已经配置过了，直接查看配置文件，进行检查。因为现在的端口号是8008，地址里是 staservice，现在加入规则
location~/staservice/ {
proxy_pass http://localhost:8008;
}
需要加上，加上之后重启，才能看到效果。第一部分是配置 nginx，配置之后写页面部分，
在后台中如何操作：
1.配置 nginx 路径规则。
2.在页面中添加统计分析的路由。
三,如何添加路由
来到后台项目中，找到 src 的 router。在 rooter 里边，将代码复制，修改部分代码：
{
path: ‘/sta’，
component:Layout，
redirect: ‘/sta/table’，
name: ‘统计分析’，
meta: { title: ‘统计分析’，icon:’example’}，
children: [
{
path: ‘create’，
name:’生成数据’，
component：（） = > import(‘@/views/table/index’)，
meta: {title:’生成数据’,icon:’table’}
}，//生成数据部分
{
path:’show’，
name:’图表显示’，
component：（） = > import(‘@/views/table/index’)，
meta: {title:’图表显示’,icon:’table’}
}//图表显示部分
]
}
在 route r的 index 中添加路由。页面刷新后，统计分析有两部分：生成数据与图表显示。
四,创建页面：生成数据与图表显示。
在 views 新建文件 sta，在 sta 里创建两个 vue 文件：create.vue 和s how.vue,创建后修改代码为：
{
path: ‘/sta’，
component:Layout，
redirect: ‘/sta/table’，
name: ‘统计分析’，
meta: { title: ‘统计分析’，icon:’example’}，
children: [
{
path: ‘create’，
name:’生成数据’，
component：（） = > import(‘@/views/sta/create’)，
meta: {title:’生成数据’,icon:’table’}
}，//生成数据部分
{
path:’show’，
name:’图表显示’，
component：（） = > import(‘@/views/sta/show’)，
meta: {title:’图表显示’,icon:’table’}
}//图表显示部分
]
}
修改之后，按照之前一贯的流程，是 api 中创建文件定义的方法，然后在页面中引入调用它的方法。
五,在 api 创建 js 文件，定义接口的方法
在 api 中新建文件，将之前 edu 的 chapter.js 复制过去，名字改为 sta.js 修改代码内容。
第一部分引入 request,第二部分接口。
//生成统计数据
createStaData(day) { //因为生成数据，是根据某一天去生成，所以填 day
return request({
url:’/staservice/sta/registerCount/’+day，
//接口地址：staservice,
方法名字：registerCount，最后传入当前某一天
method: ‘post’
//提交方式是 post 提交
})
}
}
做到了在js里定义方法，在api 中做创建。
六,在生成统计数据页面调用方法
来到方法中，如何来实现功能？页面中如果点击生成数据要到达对应的页面中。那页面中该怎么显示？
如第一次验收数据，或者说要得到哪一天的数据，就是当点生成数据后，页面中会有一个输入框，输入框中可以输入当前日期或者要查询的日期。
然后输入日期之后，后面添加按钮，比如生成，当点击生成，它就根据这个日期查数据库，最终加到统计表中。
所以情况是：
有一个可以输入日期的输入框，点生成，把日期传到接口中，把数据查出来，加到统计表中，该页面，就是一个普通的输入框，因为是日期，可以用组件做到。
页面的部分复制，是一个普通的表单。el-data-picker 是一个日期选择框，即年月日的格式。
生成是个按钮，可以根据日期，最终提交到接口中的操作，这个结构就出来了。
下面写方法
import sta from’@/api/sta’
export default {
data() {
return {
day:’’ //当前日期，初始值
}
}，
created() {
}，
methods:{ //定义方法
}
}
点击生成数据可以查看效果，选择一个日期，比如说我现在选择3月9号，当我点生成，它就会调接口，把该日期的数据查出来。
点生成之后，它会跳转到图表显示页面，所以页面效果为：
把日期传过去后，当点生成，要触发一个事件。这个事件方法为 create.
methods:{ //定义方法
create() {
sta.createdStaData(this.day) //调用方法,day 做了 v-model 双向绑定
then(response => {
})
}
}
}
提醒数据生成成功，最终跳转到显示页面。添加提示：复制之前的 course 的 chapter.vue 到 sta,
修改代码：
message:’生成数据成功！’
}）
//跳转到图标显示页面
this.$router.push({path:’/sta/show’})
})
调用完成
细节：
：disabled=”btnDisabled” //表示按钮点完后是否可以再点，来一个初始值 false
data() {
return {
day:’’ //当前日期，初始值
btnDisabled:false
}
}，
前端整个完成了，看最终的结果是什么。
最后进行测试，现在接口都启动了，前端里面也都加了内容，现在看结果，先把记录删掉，统计表为空，刷新后点击统计分析中的生成数据到页面，在页面中选择日期，比如3月9号。
当我点生成，显示我们生成数据成功。然后它跳转到图表显示页面，这些图表还没有做，但是目前成功。成功之后到表中刷新，数据添加成功，前端完成。
