在线教育项目十五：统计分析模块

最新推荐文章于 2023-03-15 16:48:10 发布

置顶 smilecb

最新推荐文章于 2023-03-15 16:48:10 发布

阅读量709

点赞数 1

分类专栏： java 文章标签： java

本文链接：https://blog.csdn.net/m0_45432976/article/details/121060771

版权

java 专栏收录该内容

72 篇文章 4 订阅

订阅专栏

1. 需求分析及准备工作

1.1 需求分析

统计在线项目的一系列数据，并用图表展示出来

1.2 创建存储统计数据表

CREATE TABLE `statistics_daily` (
  `id` char(19) NOT NULL COMMENT '主键',
  `date_calculated` varchar(20) NOT NULL COMMENT '统计日期',
  `register_num` int(11) NOT NULL DEFAULT '0' COMMENT '注册人数',
  `login_num` int(11) NOT NULL DEFAULT '0' COMMENT '登录人数',
  `video_view_num` int(11) NOT NULL DEFAULT '0' COMMENT '每日播放视频数',
  `course_num` int(11) NOT NULL DEFAULT '0' COMMENT '每日新增课程数',
  `gmt_create` datetime NOT NULL COMMENT '创建时间',
  `gmt_modified` datetime NOT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `statistics_day` (`date_calculated`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='网站统计日数据';

2. 写数据分析的接口

2.1 在service下创建一个名为service_statistic的模块

2.1 写properties文件

server.port=8008
spring.application.name=service-statistics

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/guli?serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=root
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8

mybatis-plus.mapper-locations=classpath:com/atguigu/edustatistic/mapper/xml/*.xml

mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

feign.hystrix.enabled=true
hystrix.command.default.execution.isolation.thread.timeoutInMilliseconds=3000

2.2 在service_ucenter中写查询某一天注册人数的接口

  //查询某一天注册的人数
    @GetMapping("/countRegister/{day}")
    public R countRegister(@PathVariable String day)
    {
        Integer count= memberService.countRegisterDay(day);
        return R.ok().data("countRegister",count);
    }

对应的mapper

    Integer countRegisterDay(String day);

对应的xml

    <select id="countRegisterDay" resultType="int">
        select count(*) from ucenter_member
        where DATE(gmt_create) =#{day}
    </select>

2.3 在service_static模块下用代码生成器生成相关的代码

 @Test
    public void run() {

        // 1、创建代码生成器
        AutoGenerator mpg = new AutoGenerator();

        // 2、全局配置
        GlobalConfig gc = new GlobalConfig();
        String projectPath = System.getProperty("user.dir");
        gc.setOutputDir("D:\\guli_parent\\service\\service_statistic" + "/src/main/java");

        gc.setAuthor("smile");
        gc.setOpen(false); //生成后是否打开资源管理器
        gc.setFileOverride(false); //重新生成时文件是否覆盖

        //UserServie
        gc.setServiceName("%sService");	//去掉Service接口的首字母I

        gc.setIdType(IdType.ID_WORKER_STR); //主键策略
        gc.setDateType(DateType.ONLY_DATE);//定义生成的实体类中日期类型
        gc.setSwagger2(true);//开启Swagger2模式

        mpg.setGlobalConfig(gc);

        // 3、数据源配置
        DataSourceConfig dsc = new DataSourceConfig();
        dsc.setUrl("jdbc:mysql://localhost:3306/guli?serverTimezone=GMT%2B8");
        dsc.setDriverName("com.mysql.cj.jdbc.Driver");
        dsc.setUsername("root");
        dsc.setPassword("root");
        dsc.setDbType(DbType.MYSQL);
        mpg.setDataSource(dsc);

        // 4、包配置
        PackageConfig pc = new PackageConfig();
        pc.setModuleName("edustatistic"); //模块名
        //包  com.atguigu.eduservice
        pc.setParent("com.atguigu");
        //包  com.atguigu.eduservice.controller
        pc.setController("controller");
        pc.setEntity("domain");
        pc.setService("service");
        pc.setMapper("mapper");
        mpg.setPackageInfo(pc);

        // 5、策略配置
        StrategyConfig strategy = new StrategyConfig();

        strategy.setInclude("statistics_daily");

        strategy.setNaming(NamingStrategy.underline_to_camel);//数据库表映射到实体的命名策略
        strategy.setTablePrefix(pc.getModuleName() + "_"); //生成实体时去掉表前缀

        strategy.setColumnNaming(NamingStrategy.underline_to_camel);//数据库表字段映射到实体的命名策略
        strategy.setEntityLombokModel(true); // lombok 模型 @Accessors(chain = true) setter链式操作

        strategy.setRestControllerStyle(true); //restful api风格控制器
        strategy.setControllerMappingHyphenStyle(true); //url中驼峰转连字符

        mpg.setStrategy(strategy);


        // 6、执行
        mpg.execute();
    }

2.4 写一个远程调用注册人数的接口

@Component
@FeignClient(name = "service-ucenter")
public interface UcenterClient {

    @GetMapping("/eudcenter/member/countRegister/{day}")
    public R countRegister(@PathVariable("day") String day);
}

2.5 controller层

@RestController
@RequestMapping("/edustatistic/sta")
@CrossOrigin
public class StatisticsDailyController {

   @Autowired
   private   StatisticsDailyService dailyService;

   //统计某一天的注册人数，生成统计数据
    @PostMapping("/registerCount/{day}")
    public R registerCount(@PathVariable String day)
    {
        dailyService.registerCount(day);
        return R.ok();
    }


}

2.6 sevice层

@Service
public class StatisticsDailyServiceImpl extends ServiceImpl<StatisticsDailyMapper, StatisticsDaily> implements StatisticsDailyService {

    @Autowired
    private UcenterClient ucenterClient;

    @Override
    public void registerCount(String day) {
        //添加记录之前删除表中先通过它的数据
        QueryWrapper<StatisticsDaily> wrapper = new QueryWrapper<>();
        wrapper.eq("date_calculated",day);
        baseMapper.delete(wrapper);

        R register= ucenterClient.countRegister(day);
        Integer countRegister =(Integer) register.getData().get("countRegister");

        //将获取的数据添加到统计分析表中
        StatisticsDaily statisticsDaily = new StatisticsDaily();
        //注册人数
        statisticsDaily.setRegisterNum(countRegister);
        //统计日期
        statisticsDaily.setGmtCreate(new Date());
        statisticsDaily.setVideoViewNum(RandomUtils.nextInt(100,200));
        statisticsDaily.setLoginNum(RandomUtils.nextInt(100,200));
        statisticsDaily.setCourseNum(RandomUtils.nextInt(100,200));
        statisticsDaily.setDateCalculated(day);
        baseMapper.insert(statisticsDaily);
    }
}

3.后台管理系统的编写

配置nginx的路由规则
在views下面创建一个名为statistic的文件夹，该文件夹下创建create.vue和show.vue两个文件
在页面中添加数据分析的路由


  {
    path: '/sta',
    component: Layout,
    redirect: '/sta/table',
    name: '统计分析',
    meta: { title: '统计分析', icon: 'example' },
    children: [
      {
        path: 'create',
        name: '生成数据',
        component: () => import('@/views/statistic/create'),
        meta: { title: '生成数据', icon: 'table' }
      },
      {
        path: 'show',
        name: '图表显示',
        component: () => import('@/views/statistic/show'),
        meta: { title: '图表显示', icon: 'tree' }
      }
    ]
  },

在api中创建statistic.js文件，定义接口方法

import request from '@/utils/request'
export default{
    //生成统计数据
    createStaData(day){
        return request({
            url:'/edustatistic/sta/registerCount/'+day,
            method: 'POST'
        })
    }
}

views/statistic/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 sta from '@/api/statistic'
export default {
    data(){
        return{
            day:'',
             btnDisabled: false
        }
    },
    created(){

    },
    methods:{
        create(){
            //  btnDisabled: true
           sta.createStaData(this.day)
            // btnDisabled: false
           .then(response=>{
               //提示信息
               this.$message({
                   type:"success",
                   message:"生成数据成功"
               })
               //跳转到视图显示页面
               this.$router.push({path:'/sta/show'})
           }) 
        }
    }
}
</script>

3. 定时任务

定时任务：执行固定时候自动执行程序

3.1 启动定时器任务

在启动类添加注解@EnableScheduling
创建定时器任务类
在这个类里面设置表达式什么时候去执行（corn表达式，设置执行规则）

@Component
public class ScheduleTask {

    @Scheduled(cron = "0/5 * * * * ?")
    public void task1()
    {
        System.out.println("---------------task1");
    }
}

corn表达式设置执行规则也称七子表达式（七域表达式）
网址：https://www.pppet.net

3.2 每天凌晨一点执行定时任务

添加工具类DataUtils

/**
 * 日期操作工具类
 *
 * @author qy
 * @since 1.0
 */
public class DateUtil {

    private static final String dateFormat = "yyyy-MM-dd";

    /**
     * 格式化日期
     *
     * @param date
     * @return
     */
    public static String formatDate(Date date) {
        SimpleDateFormat sdf = new SimpleDateFormat(dateFormat);
        return sdf.format(date);

    }

    /**
     * 在日期date上增加amount天 。
     *
     * @param date   处理的日期，非null
     * @param amount 要加的天数，可能为负数
     */
    public static Date addDays(Date date, int amount) {
        Calendar now =Calendar.getInstance();
        now.setTime(date);
        now.set(Calendar.DATE,now.get(Calendar.DATE)+amount);
        return now.getTime();
    }

    public static void main(String[] args) {
        System.out.println(DateUtil.formatDate(new Date()));
        System.out.println(DateUtil.formatDate(DateUtil.addDays(new Date(), -1)));
    }
}

实现更新任务

@Component
public class ScheduleTask {
    private StatisticsDailyService statisticsDailyService;

    //每天凌晨一点，把前一天的数据进行查询和添加
    @Scheduled(cron = "0 0 1 * * ?")
    public void task2()
    {
        statisticsDailyService.registerCount(DateUtil.formatDate(DateUtil.addDays(new Date(),-1)));
    }

}

4. 前端统计数据的图表显示

4.1 后台统计数据接口的编写

controller

   //图标显示 返回两部分的数据 日期json数组 数量json数组
    @GetMapping("/showData/{type}/{begin}/{end}")
    public R showData(@PathVariable String type,@PathVariable String begin,@PathVariable String end)
    {
       Map<String,Object> map= dailyService.getShowData(type,begin,end);
       return R.ok().data(map);
    }

service

        @Override
    public Map<String, Object> getShowData(String type, String begin, String end) {
        //根据条件查询对应的数据
        QueryWrapper<StatisticsDaily> wrapper = new QueryWrapper<>();
        wrapper.between("date_calculated",begin,end);
        wrapper.select("date_calculated",type);
        List<StatisticsDaily> selectList = baseMapper.selectList(wrapper);
        //因为前端要返回两部分数据 日期和日期对应的数量
        //前端要求返回数据的json格式，对应java后端的代码是list集合
        //创建两个list集合 一个日期list 一个数量list
        ArrayList<String> date_calculatedList = new ArrayList<>();
        ArrayList<Integer> numDataList = new ArrayList<>();
        //变量所有数据的list集合，进行封装
        for(StatisticsDaily statisticsDaily:selectList)
        {
            //封装list集合
            date_calculatedList.add(statisticsDaily.getDateCalculated());
            //封装对应的数量
            switch (type)
            {
                case "login_num":
                    numDataList.add(statisticsDaily.getLoginNum());
                    break;
                case "register_num":
                    numDataList.add(statisticsDaily.getRegisterNum());
                    break;
                case "video_view_num":
                    numDataList.add(statisticsDaily.getVideoViewNum());
                    break;
                case "course_num":
                    numDataList.add(statisticsDaily.getCourseNum());
                    break;
                default:
                    break;
            }
        }
        //把封装之后的list集合放入map集合
        HashMap<String, Object> map = new HashMap<>();
        map.put("date_calculatedList",date_calculatedList);
        map.put("numDataList",numDataList);
        return map;
    }

4.2 简介

ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
官网：https://echarts.apache.org

4.3 项目中整合Echarts

下载echarts依赖npm install --save echarts@4.1.0
在statistic.js中添加路由信息

//2. 获取统计数据
    getDataSta(searchObj){
        return request({
            url:`/edustatistic/sta/showData/${searchObj.type}/${searchObj.begin}/${searchObj.end}`,
            method:'get'
        })
    }

在views/statistic/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/statistic'
export default {
  data() {
    return {
      searchObj: {
        type: '',
        begin: '',
        end: ''
      },
      btnDisabled: false,
      chart: null,
      title: '',
      xData: [],
      yData: []
    }
  },

  methods: {
    showChart() {
      this.initChartData()
    //   this.setChart()
    },
    // 准备图表数据
    initChartData() {
        staApi.getDataSta(this.searchObj)
        .then(response=>{
            this.xData=response.data.date_calculatedList
            this.yData=response.data.numDataList
            // this.showChart()
            this.setChart()
        })
    },
    // 设置图标参数
    setChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById('chart'))
      // console.log(this.chart)
      // 指定图表的配置项和数据
      var option = {
        // x轴是类目轴（离散数据）,必须通过data设置类目数据
        title:{
            text:"数据统计"
        },
        tooltip: {

            trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.xData
        },
        // y轴是数据轴（连续数据）
        yAxis: {
          type: 'value'
        },
        dataZoom: [{
        show: true,
        height: 30,
        xAxisIndex: [
            0
        ],
        bottom: 30,
        start: 10,
        end: 80,
        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        handleSize: '110%',
        handleStyle: {
            color: '#d3dee5'
        },
        textStyle: {
            color: '#fff'
        },
        borderColor: '#90979c'
        },
        {
        type: 'inside',
        show: true,
        height: 15,
        start: 1,

        end: 35
        }],
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [{
          // 系列中的数据内容数组
          data: this.yData,
          // 折线图
          type: 'line'
        }]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

5. 网关

5.1 API网关介绍

API 网关出现的原因是微服务架构的出现，不同的微服务一般会有不同的网络地址，而外部客户端可能需要调用多个服务的接口才能完成一个业务需求，如果让客户端直接与各个微服务通信，会有以下的问题：

客户端会多次请求不同的微服务，增加了客户端的复杂性。
存在跨域请求，在一定场景下处理相对复杂。
认证复杂，每个服务都需要独立认证。
难以重构，随着项目的迭代，可能需要重新划分微服务。例如，可能将多个服务合并成一个或者将一个服务拆分成多个。如果客户端直接与微服务通信，那么重构将会很难实施。
某些微服务可能使用了防火墙 / 浏览器不友好的协议，直接访问会有一定的困难。
以上这些问题可以借助 API 网关解决。API 网关是介于客户端和服务器端之间的中间层，所有的外部请求都会先经过 API 网关这一层。也就是说，API 的实现方面更多的考虑业务逻辑，而安全、性能、监控可以交由 API 网关来做，这样既提高业务灵活性又不缺安全性
网关是客户端和服务端之间的一面墙，可以起到很多作用：比如请求转发、负载均衡、权限控制

5.2Spring Cloud Gateway核心概念

网关提供API全托管服务，丰富的API管理功能，辅助企业管理大规模的API，以降低管理成本和安全风险，包括协议适配、协议转发、安全策略、防刷、流量、监控日志等贡呢。一般来说网关对外暴露的URL或者接口信息，我们统称为路由信息。如果研发过网关中间件或者使用过Zuul的人，会知道网关的核心是Filter以及Filter Chain（Filter责任链）。Sprig Cloud Gateway也具有路由和Filter的概念。下面介绍一下Spring Cloud Gateway中几个重要的概念。

路由。路由是网关最基础的部分，路由信息有一个ID、一个目的URL、一组断言和一组Filter组成。如果断言路由为真，则说明请求的URL和配置匹配
断言。Java8中的断言函数。Spring Cloud Gateway中的断言函数输入类型是Spring5.0框架中的ServerWebExchange。Spring Cloud Gateway中的断言函数允许开发者去定义匹配来自于http request中的任何信息，比如请求头和参数等。
过滤器。一个标准的Spring webFilter。Spring cloud gateway中的filter分为两种类型的Filter，分别是Gateway Filter和Global Filter。过滤器Filter将会对请求和响应进行修改处理

5.3 Getway的具体使用

创建一个名为api_getway的module
添加依赖

   <dependency>
            <groupId>com.atguigu</groupId>
            <artifactId>common_utils</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-gateway</artifactId>
        </dependency>

        <!--gson-->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
        </dependency>

        <!--服务调用-->
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-openfeign</artifactId>
        </dependency>

properties配置

#端口号
server.port=8222
# 微服务名称
spring.application.name=service-getway
# nacos
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

#使用服务发现路由
spring.cloud.gateway.discovery.locator.enabled=true

#设置路由id
spring.cloud.gateway.routes[0].id=service-acl
#设置路由的uri url lb://nacos微服务名称
spring.cloud.gateway.routes[0].uri=lb://service-acl
#设置路由断言,代理servicerId为auth-service的/auth/路径
spring.cloud.gateway.routes[0].predicates= Path=/*/acl/**

# 设置msm微服务
spring.cloud.gateway.routes[1].id=service-msm
spring.cloud.gateway.routes[1].uri=lb://service-msm
spring.cloud.gateway.routes[1].predicates= Path=/edumsm/**

# 设置ucenter微服务
spring.cloud.gateway.routes[2].id=service-ucenter
spring.cloud.gateway.routes[2].uri=lb://service-ucenter
spring.cloud.gateway.routes[2].predicates= Path=/educenter/**

# 设置cms微服务
spring.cloud.gateway.routes[3].id=service-cms
spring.cloud.gateway.routes[3].uri=lb://service-cms
spring.cloud.gateway.routes[3].predicates= Path=/educms/**

# 设置edu微服务
spring.cloud.gateway.routes[4].id=service-edu
spring.cloud.gateway.routes[4].uri=lb://service-edu
spring.cloud.gateway.routes[4].predicates= Path=/eduservice/**

# 设置order微服务
spring.cloud.gateway.routes[5].id=service-order
spring.cloud.gateway.routes[5].uri=lb://service-order
spring.cloud.gateway.routes[5].predicates= Path=/eduorder/**

# 设置oss微服务
spring.cloud.gateway.routes[6].id=service-oss
spring.cloud.gateway.routes[6].uri=lb://service-oss
spring.cloud.gateway.routes[6].predicates= Path=/eduoss/**

# 设置statistic微服务
spring.cloud.gateway.routes[7].id=service-statistics
spring.cloud.gateway.routes[7].uri=lb://service-statistics
spring.cloud.gateway.routes[7].predicates= Path=/edustatistic/**

# 设置vod微服务
spring.cloud.gateway.routes[8].id=service-vod
spring.cloud.gateway.routes[8].uri=lb://service-vod
spring.cloud.gateway.routes[8].predicates= Path=/eduvod/**

主启动

@SpringBootApplication
@EnableDiscoveryClient
public class ApiGetwayApplication {

    public static void main(String[] args) {
        SpringApplication.run(ApiGetwayApplication.class, args);
    }

}

smilecb

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
在线教育项目十五：统计分析模块

文章目录1. 需求分析及准备工作1.1 需求分析1.2 创建存储统计数据表2. 写数据分析的接口2.1 在service下创建一个名为service_statistic的模块2.1 写properties文件2.2 在service_ucenter中写查询某一天注册人数的接口2.3 在service_static模块下用代码生成器生成相关的代码2.4 写一个远程调用注册人数的接口2.5 controller层2.6 sevice层3.后台管理系统的编写1. 需求分析及准备工作1.1 需求分析统计在线
复制链接

扫一扫