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);
}
}