Day6 谷粒学院统计分析总结

77 阅读 0 评论 51 点赞

我是靠谱客的博主听话老鼠，最近开发中收集的这篇文章主要介绍Day6 谷粒学院统计分析总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Day6 谷粒学院统计分析总结

统计分析与定时任务

思路：
①创建对应的微服务service-sta
②创建后端接口接收参数type（数据类型），begin（开始日期），end（结束日期），最后就是在sta表中获取对应的数据。type这里需要做判断，可以采用switch case方式来选择的。
③写好前端路由和api。
④前端点击获取数据数组生成对应的图。这里的从后端返回的数据是数组，所以要分开list装日期和数量数组。最后放到map返回到前端。
⑤计时任务其实相对来说比较简单。在主启动类上面开启@EnableScheduling，然后就是创建一个任务类加入到spring容器。给任务方法加上@Schedule（cron=“时间表达式”）来指定要执行的时间。

遇到的问题：
①同步不成功
我的问题就是hostname没有设置到etc/hosts里面去。我发现这个问题是在canal的logs下面的example/example.log下找到问题的。如果你发现没有同步成功可以查看一下日志寻找准确的问题，这样子解决起来会更高效。

StaController

@RestController
@RequestMapping("/edusta/sta")
@CrossOrigin
@Slf4j
public class StatisticsDailyController {
@Autowired
StatisticsDailyService statisticsDailyService;
@GetMapping("ok")
public R ok(){
return R.ok();
}
@PostMapping("registerCount/{day}")
public R registerCount(@PathVariable("day")String day){
statisticsDailyService.saveRegisterCount(day);
return R.ok();
}
@GetMapping("showData/{type}/{begin}/{end}")
public R getData(
@PathVariable("type")String type,
@PathVariable("begin")String begin,
@PathVariable("end")String end
){
Map<String,Object> map=statisticsDailyService.showData(type,begin,end);
log.info(String.valueOf(map));
return R.ok().data(map);
}
}

StaService

@Override
public Map<String, Object> showData(String type, String begin, String end) {
//1.根据条件查询对应的数据
QueryWrapper<StatisticsDaily> queryWrapper=new QueryWrapper<>();
queryWrapper.between("date_calculated",begin,end);
queryWrapper.select("date_calculated",type);
List<StatisticsDaily> list = baseMapper.selectList(queryWrapper);
//2.封装到日期list和数量list里面去.
List<String> date_calculatedList =new ArrayList<>();
List<Integer> numDataList=new ArrayList<>();
for(int i=0;i<list.size();i++){
StatisticsDaily statisticsDaily = list.get(i);
date_calculatedList.add(statisticsDaily.getDateCalculated());
switch (type){
case "register_num":
numDataList.add(statisticsDaily.getRegisterNum());
break;
case "login_num":
numDataList.add(statisticsDaily.getLoginNum());
break;
case "video_view_num":
numDataList.add(statisticsDaily.getVideoViewNum());
break;
case "course_num":
numDataList.add(statisticsDaily.getCourseNum());
break;
default:
break;
}
}
//3.把数据封装到map里面去
Map<String,Object> map=new HashMap<>();
map.put("xlist",date_calculatedList);
map.put("ylist",numDataList);
return map;
}

create.vue

<template>
<div class="app-container">
<!--表单-->
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="日期">
<el-date-picker
v-model="day"
type="date"
placeholder="选择要统计的日期"
value-format="yyyy-MM-dd"
/>
</el-form-item>
<el-button :disabled="btnDisabled" type="primary" @click="create()"
>生成</el-button
>
</el-form>
</div>
</template>
<script>
import staApi from "@/api/sta"
export default {
data(){
return {
day:"",
btnDisabled:false
}
},
created(){
},
methods:{
create(){
staApi.registerCount(this.day)
.then(response=>{
this.btnDisabled=false;
//1.提示
this.$message({
type:"success",
message:"成功注册"
})
//2.路由
this.$router.push({path:"/sta/show"})
})
}
}
}
</script>

show.vue

<template>
<div class="app-container">
<!--表单-->
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-select v-model="searchObj.type" clearable placeholder="请选择">
<el-option label="学员登录数统计" value="login_num" />
<el-option label="学员注册数统计" value="register_num" />
<el-option label="课程播放数统计" value="video_view_num" />
<el-option label="每日课程数统计" value="course_num" />
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="searchObj.begin"
type="date"
placeholder="选择开始日期"
value-format="yyyy-MM-dd"
/>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="searchObj.end"
type="date"
placeholder="选择截止日期"
value-format="yyyy-MM-dd"
/>
</el-form-item>
<el-button
:disabled="btnDisabled"
type="primary"
icon="el-icon-search"
@click="showChart()"
>查询</el-button
>
</el-form>
<div class="chart-container">
<div id="chart" class="chart" style="height: 500px; width: 100%" />
</div>
</div>
</template>
<script>
import echarts from "echarts";
import staApi from "@/api/sta"
export default {
data() {
return {
searchObj: {},
btnDisabled: false,
xData:[],
yData:[]
};
},
created() {},
methods: {
showChart() {
staApi.getData(this.searchObj)
.then(response=>{
//1.给数据赋值
this.xData=response.data.xlist;
this.yData=response.data.ylist;
alert(this.xData)
//2.展示图
this.setChart();
})
},
setChart() {
// 基于准备好的dom，初始化echarts实例
this.chart = echarts.init(document.getElementById("chart"));
// console.log(this.chart)
// 指定图表的配置项和数据
var option = {
// x轴是类目轴（离散数据）,必须通过data设置类目数据
xAxis: {
type: "category",
data: this.xData,
},
// y轴是数据轴（连续数据）
yAxis: {
type: "value",
},
// 系列列表。每个系列通过 type 决定自己的图表类型
series: [
{
// 系列中的数据内容数组
data: this.yData,
// 折线图
type: "line",
},
],
};
this.chart.setOption(option);
},
},
};
</script>

Schedule

@Component
public class ScheduleTask {
@Autowired
StatisticsDailyService statisticsDailyService;
@Scheduled(cron = "0 0 1 * * ?")
public void task2(){
//把前一天的内容添加到表中
statisticsDailyService.saveRegisterCount(DateUtil.formatDate(DateUtil.addDays(new Date(),-1)));
}
}