9-点击流数据分析项目-前后端展示

9-点击流数据分析项目-前端展示

为了与前面的部分解耦，这里描述数据库加载部分，本文可以独立运行

数据库配置

在mysql中创建数据库，数据库名为weblogs

执行sql文件

选择weblogs数据库，执行如下sql文件
https://download.csdn.net/download/m0_38139250/75208266
上述SQL文件内容如下

/*
 Navicat Premium Data Transfer

 Source Server         : localhost
 Source Server Type    : MySQL
 Source Server Version : 50723
 Source Host           : localhost:3306
 Source Schema         : weblogs

 Target Server Type    : MySQL
 Target Server Version : 50723
 File Encoding         : 65001

 Date: 10/01/2022 08:05:58
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for dw_pvs_everyday
-- ----------------------------
DROP TABLE IF EXISTS `dw_pvs_everyday`;
CREATE TABLE `dw_pvs_everyday`  (
  `pvs` int(11) NULL DEFAULT NULL COMMENT '每天浏览量',
  `month` char(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '月份',
  `day` char(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '日期'
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of dw_pvs_everyday
-- ----------------------------
INSERT INTO `dw_pvs_everyday` VALUES (63, '09', '18');
INSERT INTO `dw_pvs_everyday` VALUES (13, '09', '19');

-- ----------------------------
-- Table structure for dw_pvs_everyhour_oneday
-- ----------------------------
DROP TABLE IF EXISTS `dw_pvs_everyhour_oneday`;
CREATE TABLE `dw_pvs_everyhour_oneday`  (
  `month` char(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '月份',
  `day` char(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '日期',
  `hour` char(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '小时',
  `pvs` int(11) NULL DEFAULT NULL COMMENT '每天浏览量'
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of dw_pvs_everyhour_oneday
-- ----------------------------
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 07', 13);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 08', 11);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 09', 14);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 10', 3);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 11', 2);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 12', 4);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 13', 5);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 14', 1);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 15', 2);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 16', 1);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 17', 4);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 19', 1);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 22', 1);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '18', ' 23', 1);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '19', ' 00', 4);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '19', ' 02', 2);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '19', ' 03', 5);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '19', ' 04', 1);
INSERT INTO `dw_pvs_everyhour_oneday` VALUES ('09', '19', ' 05', 1);


-- ----------------------------
-- Table structure for dw_pvs_request_page
-- ----------------------------
DROP TABLE IF EXISTS `dw_pvs_request_page`;
CREATE TABLE `dw_pvs_request_page`  (
  `pvs` int(11) NULL DEFAULT NULL COMMENT '每天浏览量',
  `month` char(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '月份',
  `day` char(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '日期',
  `request` char(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '请求'
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of dw_pvs_request_page
-- ----------------------------
INSERT INTO `dw_pvs_request_page` VALUES (4, '09', '18', '/about');
INSERT INTO `dw_pvs_request_page` VALUES (2, '09', '18', '/black-ip-list/');
INSERT INTO `dw_pvs_request_page` VALUES (3, '09', '18', '/cassandra-clustor/');
INSERT INTO `dw_pvs_request_page` VALUES (12, '09', '18', '/finance-rhive-repurchase/');
INSERT INTO `dw_pvs_request_page` VALUES (12, '09', '18', '/hadoop-family-roadmap/');
INSERT INTO `dw_pvs_request_page` VALUES (10, '09', '18', '/hadoop-hive-intro/');
INSERT INTO `dw_pvs_request_page` VALUES (15, '09', '18', '/hadoop-mahout-roadmap/');
INSERT INTO `dw_pvs_request_page` VALUES (5, '09', '18', '/hadoop-zookeeper-intro/');
INSERT INTO `dw_pvs_request_page` VALUES (1, '09', '19', '/about');
INSERT INTO `dw_pvs_request_page` VALUES (1, '09', '19', '/finance-rhive-repurchase/');
INSERT INTO `dw_pvs_request_page` VALUES (1, '09', '19', '/hadoop-family-roadmap/');
INSERT INTO `dw_pvs_request_page` VALUES (4, '09', '19', '/hadoop-hive-intro/');
INSERT INTO `dw_pvs_request_page` VALUES (5, '09', '19', '/hadoop-mahout-roadmap/');
INSERT INTO `dw_pvs_request_page` VALUES (1, '09', '19', '/hadoop-zookeeper-intro/');

SET FOREIGN_KEY_CHECKS = 1;

创建maven项目

配置pom文件

<properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <mysql-connector-java.version>5.1.38</mysql-connector-java.version>
        <druid.version>1.1.6</druid.version>
    </properties>


    <!--继承springboot的声明starter的父项目-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.4.RELEASE</version>
    </parent>



    <dependencies>

        <!--web 的starter-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- mysql driver -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql-connector-java.version}</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>${druid.version}</version>
        </dependency>


        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!--视图组件：thymeleaf-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>


        <!--配置springboot mybatisplus starter-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.1</version>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.4.1</version>
        </dependency>

        <!--
        配置freemarker，它就是根据freemarker模板引擎生成代码
        -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>

    </dependencies>

创建包，配置文件和主类

application.yml:

spring:
  datasource:
    url: jdbc:mysql://192.168.10.250:3306/weblogs
    username: root
    password: 1111
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.jdbc.Driver
logging:
  level:
    com.gec.weblog.mapper: debug

主类：WebLogsMainApp

package edu.sx.logweb;


import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("edu.sx.logweb.mapper")
public class WebLogsMainApp {
    public static void main(String[] args) {
        SpringApplication.run(WebLogsMainApp.class,args);
    }
}

创建包：

controller
entity
mapper
service

编辑工具类生成代码

edu.sx.logweb.MysqlGenerator
代码如下：

package edu.sx.logweb;

import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
import com.baomidou.mybatisplus.core.toolkit.StringPool;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.InjectionConfig;
import com.baomidou.mybatisplus.generator.config.*;
import com.baomidou.mybatisplus.generator.config.po.TableFill;
import com.baomidou.mybatisplus.generator.config.po.TableInfo;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;
import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;

public class MysqlGenerator {


    /**
     * <p>
     * 读取控制台内容
     * </p>
     */
    public static String scanner(String tip) {
        Scanner scanner = new Scanner(System.in);
        StringBuilder help = new StringBuilder();
        help.append("请输入" + tip + "：");
        System.out.println(help.toString());
        if (scanner.hasNext()) {
            String ipt = scanner.next();
            if (StringUtils.isNotBlank(ipt)) {
                return ipt;
            }

        }
        throw new MybatisPlusException("请输入正确的" + tip + "！");
    }

    public static void main(String[] args) {
        // 代码生成器
        AutoGenerator mpg = new AutoGenerator();

        // 全局配置  注意导入com.baomidou.mybatisplus.generator.AutoGenerator
        GlobalConfig gc = new GlobalConfig();
        //String projectPath = System.getProperty("user.dir");
//        G:\ideaproject\logweb\src\main\java\edu\sx\logweb
        String projectPath="G:/ideaproject";
        //设置生成代码位置 请修改为自己项目路径
        gc.setOutputDir(projectPath + "/logweb/src/main/java");
        //设置作者
        gc.setAuthor("gec");
        gc.setOpen(false);
        gc.setIdType(IdType.AUTO);//设置全局id自增
        //gc.setBaseResultMap(true);//设置生成BaseResultMap
        // gc.setSwagger2(true); 实体属性 Swagger2 注解
        mpg.setGlobalConfig(gc);

        // 数据源配置 请修改为自己数据源配置
        DataSourceConfig dsc = new DataSourceConfig();
        dsc.setUrl("jdbc:mysql://localhost:3306/weblogs?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghai");
        // dsc.setSchemaName("public");
        dsc.setDriverName("com.mysql.jdbc.Driver");
        dsc.setUsername("root");
        dsc.setPassword("111111");
        mpg.setDataSource(dsc);

        // 包配置 请在控制台输入修改为自己的子包名
        PackageConfig pc = new PackageConfig();
        pc.setModuleName(scanner("模块名"));
        //设置父包名
        pc.setParent("edu.sx");
        mpg.setPackageInfo(pc);

        // 自定义配置
        InjectionConfig cfg = new InjectionConfig() {
            @Override
            public void initMap() {
                // to do nothing
            }
        };

        // 如果模板引擎是 freemarker  从依赖包的 templates下查找模板
        String templatePath = "/templates/mapper.java.ftl";
        // 如果模板引擎是 velocity
        // String templatePath = "/templates/mapper.xml.vm";

        // 自定义输出配置
        List<FileOutConfig> focList = new ArrayList<>();
        // 自定义配置会被优先输出
        focList.add(new FileOutConfig(templatePath) {
            @Override
            //注意导包，core下也有同名的包
            // com.baomidou.mybatisplus.generator.config.po.TableInfo
            public String outputFile(TableInfo tableInfo) {
                // 自定义输出文件名 ， 如果你 Entity 设置了前后缀、此处注意 xml 的名称会跟着发生变化！！
                return projectPath + "/src/main/resources/mapper/" + pc.getModuleName()
                        + "/" + tableInfo.getEntityName() + "Mapper" + StringPool.DOT_XML;
            }
        });
        /*
        cfg.setFileCreate(new IFileCreate() {
            @Override
            public boolean isCreate(ConfigBuilder configBuilder, FileType fileType, String filePath) {
                // 判断自定义文件夹是否需要创建
                checkDir("调用默认方法创建的目录，自定义目录用");
                if (fileType == FileType.MAPPER) {
                    // 已经生成 mapper 文件判断存在，不想重新生成返回 false
                    return !new File(filePath).exists();
                }
                // 允许生成模板文件
                return true;
            }
        });
        */
        cfg.setFileOutConfigList(focList);
        mpg.setCfg(cfg);

        // 配置模板
        //TemplateConfig templateConfig = new TemplateConfig();

        // 配置自定义输出模板
        //指定自定义模板路径，注意不要带上.ftl/.vm, 会根据使用的模板引擎自动识别
        // templateConfig.setEntity("templates/entity2.java");
        // templateConfig.setService();
        // templateConfig.setController();

        // templateConfig.setXml(null);
        // mpg.setTemplate(templateConfig);

        // 策略配置
        StrategyConfig strategy = new StrategyConfig();
        //设置数据库字段自动转换驼峰命名
        strategy.setNaming(NamingStrategy.underline_to_camel);
        strategy.setColumnNaming(NamingStrategy.underline_to_camel);
//        strategy.setSuperEntityClass("你自己的父类实体,没有就不用设置!");
        strategy.setEntityLombokModel(true);
        strategy.setRestControllerStyle(true);
        // 公共父类
//        strategy.setSuperControllerClass("你自己的父类控制器,没有就不用设置!");
        // 写于父类中的公共字段
//        strategy.setSuperEntityColumns("id");
        strategy.setEnableSqlFilter(false);//开启支持输入正则表达式 生成所有表对应模块代码：\w*
        strategy.setInclude(scanner("表名，多个英文逗号分割").split(","));
        strategy.setControllerMappingHyphenStyle(true);
        strategy.setTablePrefix("dw_");

        //设置生成自动填充注解的表字段
        ArrayList<TableFill> list = new ArrayList<>();
        list.add(new TableFill("update_date", FieldFill.INSERT_UPDATE));
        list.add(new TableFill("create_date", FieldFill.INSERT));
        list.add(new TableFill("del_flag", FieldFill.INSERT));
        strategy.setTableFillList(list);
        strategy.setLogicDeleteFieldName("del_flag");//设置生成逻辑删除注解对应表字段名
        mpg.setStrategy(strategy);
        //设置对应模板的引擎
        mpg.setTemplateEngine(new FreemarkerTemplateEngine());
        mpg.execute();
    }
}

生成工具类生成三层架构代码

输入包名
logweb
输入三个表名
dw_pvs_everyhour_oneday,dw_pvs_request_page,dw_pvs_everyday

备注：需要修改代码中的数据库密码等信息

修改PvsEverydayController

package edu.sx.logweb.controller;


import edu.sx.logweb.entity.PvsEveryday;
import edu.sx.logweb.service.IPvsEverydayService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author gec
 * @since 2021-12-29
 */
@RestController
@RequestMapping("/logweb/pvs-everyday")
public class PvsEverydayController {
    @Autowired
    private IPvsEverydayService pvsEverydayService;

    @RequestMapping("/list")
    public List<PvsEveryday> list()
    {
        return pvsEverydayService.list();
    }

}

启动

访问

http://localhost:8080/logweb/pvs-everyday/list

查看结果

Spring Boot 开启热部署

参考：https://blog.csdn.net/chachapaofan/article/details/88697452

pom.xml添加：

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
            <scope>runtime</scope>
        </dependency>

修改application.yml,修改后的文件为：

spring:
  datasource:
    url: jdbc:mysql://localhost/weblogs
    username: root
    password: 111111
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.jdbc.Driver
  thymeleaf:
    cache: false
  devtools:
    restart:
      enabled: true
      additional-paths: src/main/java

logging:
  level:
    com.gec.weblog.mapper: debug

上图中红框的部分为新加的，然后重启工程，可实现修改代码后，自动重启。

前后端交互

前端目录结构

js文件

压缩包如下：
https://download.csdn.net/download/m0_38139250/75204354
解压后，按照要求，放在js目录下就好

创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico">
    <script src="js/echarts.js"></script>
    <script src="js/jquery.js"></script>

    <title>Document</title>
</head>
<body>
    
    <h2 id="main"></h2>
    <div id="left_up" style="width: 600px;height:600px;"></div>

    <script type="text/javascript">

    $.get('http://localhost:8080/logweb/pvs-everyday/name').done(function (data) {
        console.log(data)
        document.getElementById("main").innerHTML = data;
    });


    var myChart = echarts.init(document.getElementById("left_up"));

    myChart.showLoading();
    var option;
    option={
      title:{
        text:"日志分析",
        subtext:"每日PV",
        link:"https://www.baidu.com",
        textStyle:{
            color:"red"
        },
        subtextStyle:{
          color:'blue'
        },
        borderWidth:5,
        borderColor:"red",
        borderRadius:10,
        top:10,
        left:50,
        right:50,
        bottom:80,
    },
    tooltip:{
      trigger:'axis',
//      triggerOn:'click',
      formatter:'{a} <br/>{b} '
    },
        toolbox:{
          feature:{
            saveAsImage:{},
            dataView:{},
            restore:{

            },
            dataZoom:{
            },
            magicType:{
              type:['bar','line']
            }
          }
        },
        legend: {
            data:['访问']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '访问',
            type: 'pie',
            data: []
        }]
    }


    // $(selector).get(url,data,success(response,status,xhr),dataType)
    $.get('http://localhost:8080/logweb/pvs-everyday/list',{data:1},"json").done(function (data) {
        var data_x = [];
        var data_y = [];

        for(i in data) {
          　　data_x.push(data[i].pvs);
              data_y.push(data[i].day)
          };
      option.series[0].data =   data_x
      option.xAxis.data = data.data_y
        myChart.setOption(option);
        myChart.hideLoading();
    });
    myChart.setOption(option);
    window.addEventListener("resize", function () {
            myChart.resize();
        });
    </script>
   <script src="js/index.js"></script>

</body>
</html>

后端再传递一个参数

在PvsEverydayController中添加方法：

    @RequestMapping("/name")
    public String name()
    {
        return "三个农夫";
    }

前端刷新展示

总结

到此一个完整的点击流日志完成了，非常感谢原作者提供的代码，但有些忘记从哪个地方获取的了，如果想起来，我给加上连接地址，。这个是原作者的hadoop-flume-hdfs-hive-master项目名称。