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项目名称。
