小破站数据大屏可视化（Vue+spring boot+Hadoop+嗅探）

---

好久没有总结了，给大家看看之前大三的项目吧！
项目全程由小唐搭建，超有成就感！

一、项目介绍

为了探讨年轻人对于视频标签的喜好，以及什么样的视频更加受年轻人的欢迎，本次项目选取小破站每周必看进行分析，通过抓包，找到其发送请求连接，采用模拟请求方式，爬取开始至今（2022.12.16）的194期数据，共计6228条视频数据，包含视频名称、点赞、投币、收藏、播放量、ip地址、视频连接等10余项属性。并对缺失值进行补全处理。
对于处理后的数据采用采用Hadoop分别对于每期数据进行汇总、地区、标签进行统计，并通过Sqoop完成数据迁移，完成数据库组建工作。
待Mysql组件完成之后，采用Spring boot框架对于后端进行开发，采用逆向工程对于对于Mapper层和domain层进行生成，并于controller层开发地图接口、周总数居接口、标签接口、作者上榜次数接口、单个视频接口，为前端调用提供服务。
前端框架采用Vue进行开发，主要分为期数汇总、标签气泡图、区域分布图、上榜作者排行、播放量Top10、词云图、六大板块组件进行开发。再有主屏幕板块对于所开发组件进行一一组装。
项目部署阶段，对于文件上传、Hadoop启动、jar启动等shell脚本进行开发，项目前端采用nginx进行上传和呈现，并在服务器启用jar架包配和完成数据呈现。

示范地址

二、项目需求分析

项目构建初期，首先对于目前已有数据大屏进行分析和调研，大多为疫情、订单、视频类主题，在此基础上选择数据较为容易获取的视频类主题，并对内容进行讨论，确定下基本页面布局。
这里推荐一个做数据大屏布局的网站——推荐网站
可以直接去帮助我们导出css的布局

选取期数汇总、标签气泡图、区域分布图、上榜作者排行、播放量Top10、词云图六组主要图列进行开发。并选取对视频名、标签、作者名、作者id 、分享、播放量、弹幕数、收藏量、点赞、投币数、评论数、视频链接、ip地址、周数、周数名称、本周热词进行爬取。对数据及返回格式进行如下约定。

三.项目构成

3.1 数据爬取

这里写太多会被ban【手动狗头】
其实就是通过F11，去监听我们的通信，在网络请求中，有一个后缀为list，还有一个后缀为number的请求链接值得注意。【手动狗头】
这个！！！

然后再去通过我们python中request模块，dddd，但是我为了更加直观还用TK模块写了个界面

3.2 数据处理

启动Hadoop，这里吐槽一下，我是一台电脑启动了三台centos的伪分布式，小风扇都快冒烟了



然后再将我们所有数据，使用sqoop进行数据迁移，将其部署于本地数据库

sqoop export \
--connect jdbc:mysql://192.168.10.125:3306/bilibili \
--username root \
--password 123456 \
--table weeksum\
--export-dir /test \
--input-fields-terminated-by '\t'

3.3 后端开发

后端主要包括地图接口、周总数居接口、标签接口、作者上榜次数接口、单个视频接口的开发和引用，项目采用mybatis逆向工程进行开发，通过读取数据库生成domian和Mapper层，再在service层进行方法编写。最后在control层完成对于方法的调用。

因为没有什么业务逻辑，就只是单独的读写，这里推荐大家可以使用逆向工程来写，拜托拜托真的很快

小唐开始学 Spring Boot——（4）代码生成器
吐槽一下自己，很早之前写的，现在的理解也不一样了，有时间更新一下

3.4 前端开发

使用的是Vue来进行开发，主要包含期数汇总、标签气泡图、区域分布图、上榜作者排行、播放量Top10、词云图六大板块组件结合Echrts及D3组件进行开发,等开发完成后统一镶嵌至展示界面（页面布局已经用推荐网站做好了，直接做嵌入就好了），然后小小的美化了一下，大致这样

然后去我们的Echarts去调用组件——Echats官网
就有很多好看的图啦！！！
引入也相对简单

这里只有我们地图组件要多多注意一下，在最新版本的Echarts中，map组件是下架了的，原因是因为有些我国的具体细节没有标明出来，然后使用地图的话要用阿里、百度、腾讯的接口，用SDK来开发，使用起来也相对复杂。这里我是直接可以降低其版本进行操作。在低版本的组件中保留了map组件，然后我们可以将map组件的资源包复制一份，再升级回原来版本，再粘贴进去，搞定！！！

【将echarts版本降至4.1.12找到其Map组件，将其移出到Assets目录，再升级回原来版本，调用china.json】

3.5 挂载

待项目完成之后，将其进行打包进行上线处理，针对后端采用Maven所自带的package进行打包为jar文件，针对前端，采用Vue中npm run bu进行打包。将其放置于dist路径。

这里直接使用navicat进行数据迁移，将本地Linux，mysql数据集进行复制到腾讯云，再通过nginx指定运行目录，完成项目部署。【现在我会用docker来进行部署，之前自己太笨了呜呜呜呜】
注意我们的Vue的接受地址要进行修改！！！改成 你挂载的地址
详细部署步骤参考——腾讯云部署【阿里同理】