|
|
<!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, shrink-to-fit=no">
|
|
|
<meta name="description" content="">
|
|
|
<meta name="author" content="">
|
|
|
|
|
|
<title>数据可视化系统</title>
|
|
|
|
|
|
<!-- Custom fonts for this template-->
|
|
|
<link href="static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
|
|
<link
|
|
|
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
|
|
|
rel="stylesheet">
|
|
|
|
|
|
<!-- Custom styles for this template-->
|
|
|
<link href="static/css/sb-admin-2.min.css" rel="stylesheet">
|
|
|
|
|
|
<!-- 页面时钟的js -->
|
|
|
<script>
|
|
|
//获取时间函数
|
|
|
function time1(){
|
|
|
var today = new Date();
|
|
|
var year = today.getFullYear();
|
|
|
var month = today.getMonth()+1;
|
|
|
var day = today.getDay() + 11;
|
|
|
var hour = today.getHours();
|
|
|
var minute = today.getMinutes();
|
|
|
var second = today.getSeconds();
|
|
|
|
|
|
minute = checkTime(minute);
|
|
|
second = checkTime(second);
|
|
|
|
|
|
document.getElementById("time").innerHTML =
|
|
|
year+"年"+month+"月"+day+"日 "+hour+":"+minute+":"+second;
|
|
|
t = setTimeout("time1()",500);
|
|
|
}
|
|
|
//调整时间格式
|
|
|
function checkTime(i) {
|
|
|
if(i<10){
|
|
|
i="0"+i;
|
|
|
}
|
|
|
return i;
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<!-- 网站icon -->
|
|
|
<link rel="shortcut icon" href="static/img/mywebsite.svg" />
|
|
|
</head>
|
|
|
|
|
|
<body id="page-top">
|
|
|
|
|
|
<!-- Page Wrapper -->
|
|
|
<div id="wrapper">
|
|
|
|
|
|
<!-- -----------------分割线----上面是页面内容----下面是注入js----分割线--------------- -->
|
|
|
|
|
|
<!-- 侧边栏 Sidebar -->
|
|
|
<ul class="navbar-nav bg-gray-800 sidebar sidebar-dark accordion" id="accordionSidebar">
|
|
|
|
|
|
<!-- 侧边栏 主人名称 Sidebar - Brand -->
|
|
|
<a class="sidebar-brand d-flex align-items-center justify-content-center">
|
|
|
<div class="sidebar-brand-icon rotate-n-15">
|
|
|
<i class="fas fa-laugh-wink"></i>
|
|
|
</div>
|
|
|
<div class="sidebar-brand-text mx-3">网易云音乐数据分析可视化平台</div>
|
|
|
</a>
|
|
|
|
|
|
<!-- Divider -->
|
|
|
<hr class="sidebar-divider my-0">
|
|
|
|
|
|
<!-- Nav Item - 首页 -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/">
|
|
|
<i class="fas fa-fw fa-tachometer-alt"></i>
|
|
|
<span>首页 Home</span></a>
|
|
|
</li>
|
|
|
|
|
|
<!-- Divider -->
|
|
|
<hr class="sidebar-divider">
|
|
|
|
|
|
<!-- 基本功能 Heading 侧边栏分区标题 -->
|
|
|
<div class="sidebar-heading">
|
|
|
数据可视化
|
|
|
</div>
|
|
|
|
|
|
<!-- 后台数据 Nav Item - Collapse Menu -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
|
|
|
aria-expanded="true" aria-controls="collapseTwo">
|
|
|
<i class="fas fa-fw fa-table"></i>
|
|
|
<span>后台数据</span>
|
|
|
</a>
|
|
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
|
|
<div class="bg-white py-2 collapse-inner rounded">
|
|
|
<h6 class="collapse-header">数据表</h6>
|
|
|
<a class="collapse-item" href="/playlist">歌单</a>
|
|
|
<a class="collapse-item" href="/songs">歌曲</a>
|
|
|
<a class="collapse-item" href="/comments">评论</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
<!-- 数据图表 Nav Item - Collapse Menu -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities"
|
|
|
aria-expanded="true" aria-controls="collapseUtilities">
|
|
|
<i class="fas fa-fw fa-chart-area"></i>
|
|
|
<span>数据图表</span>
|
|
|
</a>
|
|
|
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities"
|
|
|
data-parent="#accordionSidebar">
|
|
|
<div class="bg-white py-2 collapse-inner rounded">
|
|
|
<h6 class="collapse-header">My Echarts:</h6>
|
|
|
<a class="collapse-item" href="/language_charts">歌单语种</a>
|
|
|
<a class="collapse-item" href="/sentiment_charts">歌单情感</a>
|
|
|
<a class="collapse-item" href="/age_charts">评论年龄</a>
|
|
|
<a class="collapse-item" href="/days_charts">进村天数</a>
|
|
|
<a class="collapse-item" href="/listen_age_charts">年龄听歌</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
<!-- 数据词云 Nav Item - Collapse Menu -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseThree"
|
|
|
aria-expanded="true" aria-controls="collapseThree">
|
|
|
<i class="fas fa-fw fa-chart-area"></i>
|
|
|
<span>数据词云</span>
|
|
|
</a>
|
|
|
<div id="collapseThree" class="collapse" aria-labelledby="collapseThree"
|
|
|
data-parent="#accordionSidebar">
|
|
|
<div class="bg-white py-2 collapse-inner rounded">
|
|
|
<h6 class="collapse-header">词云图</h6>
|
|
|
<a class="collapse-item" href="/all_lyric_word">歌词</a>
|
|
|
<a class="collapse-item" href="/hot_comments_word">热评</a>
|
|
|
<a class="collapse-item" href="/diy_song_word">定制</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
<!-- Divider 分割线 -->
|
|
|
<hr class="sidebar-divider">
|
|
|
|
|
|
<!-- 其他信息 Heading 侧边栏分区标题 -->
|
|
|
<div class="sidebar-heading">
|
|
|
其他信息
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!-- 技术实现 Nav Item - -->
|
|
|
<li class="nav-item active">
|
|
|
<a class="nav-link" href="/techno">
|
|
|
<i class="fas fa-fw fa-table"></i>
|
|
|
<span>技术说明</span></a>
|
|
|
</li>
|
|
|
|
|
|
<!-- 作者 Nav Item -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/team">
|
|
|
<i class="fas fa-fw fa-chart-area"></i>
|
|
|
<span>我的信息</span></a>
|
|
|
</li>
|
|
|
|
|
|
<!-- Divider -->
|
|
|
<hr class="sidebar-divider d-none d-md-block">
|
|
|
|
|
|
<!-- 隐藏侧边栏按钮 Sidebar Toggler (Sidebar) -->
|
|
|
<div class="text-center d-none d-md-inline">
|
|
|
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
|
|
</div>
|
|
|
|
|
|
</ul>
|
|
|
<!-- End of Sidebar -->
|
|
|
|
|
|
<!-- 内容容器 Content Wrapper -->
|
|
|
<div id="content-wrapper" class="d-flex flex-column">
|
|
|
|
|
|
<!-- 内容 Main Content -->
|
|
|
<div id="content">
|
|
|
|
|
|
<!-- 顶部 部分 -->
|
|
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow text-secondary">
|
|
|
|
|
|
<!-- 侧边栏隐藏按钮 （竖屏使用）Sidebar Toggle (Topbar) -->
|
|
|
<form class="form-inline">
|
|
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
|
|
<i class="fa fa-bars"></i>
|
|
|
</button>
|
|
|
</form>
|
|
|
<form class="form-inline">
|
|
|
<img src="static/img/mywebsite.svg" width="20px">
|
|
|
</form>
|
|
|
|
|
|
<div class="topbar-divider d-none d-sm-block"></div>
|
|
|
|
|
|
<form class="form-inline text-secondary" style="font-size: x-large">
|
|
|
<!-- 系统 标题 -->网易云音乐数据分析可视化平台
|
|
|
</form>
|
|
|
|
|
|
<!-- 顶部栏里的右边栏 Topbar Navbar -->
|
|
|
<ul class="navbar-nav ml-auto">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="topbar-divider d-none d-sm-block"></div>
|
|
|
|
|
|
<!-- Nav Item - 用户头像 易名 User Information -->
|
|
|
<li class="nav-item dropdown no-arrow">
|
|
|
<a class="nav-link dropdown-toggle" href="{{ url_for('team') }}" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
|
<span class="mr-2 d-none d-lg-inline text-gray-600 small"> 管理员 </span>
|
|
|
<img class="img-profile rounded-circle" src="static/img/touxiang.jpeg">
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</nav>
|
|
|
<!-- 顶部结束 -->
|
|
|
|
|
|
<!-- 开始页面内容 Begin Page Content -->
|
|
|
<div class="container-fluid">
|
|
|
|
|
|
<!-- 页头 说明网页内容 Page Heading -->
|
|
|
<div class="d-sm-flex align-items-center justify-content-between mb-4">
|
|
|
<div class="h3 mb-0 text-gray-800 py-2">技术说明</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 技术栈说明 Techno information-->
|
|
|
<div class="row">
|
|
|
<!--技术概览-->
|
|
|
<div class="col-lg-6 mb-4">
|
|
|
<div class="card shadow mb-4">
|
|
|
<div class="card-header py-3">
|
|
|
<h6 class="m-0 font-weight-bold text-primary">技术栈</h6>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div style="text-indent: 2em;">
|
|
|
<p>设计语言：Python + SQL + HTML + CSS + JS</p>
|
|
|
<p>数据爬取：selenium + request + json + time + random</p>
|
|
|
<p>数据存储：SQLite</p>
|
|
|
<p>数据清洗：re + replace + time.localtime + time.strftime</p>
|
|
|
<p>后端搭建：Pallets Flask</p>
|
|
|
<p>前端搭建：Twitter Bootstrap</p>
|
|
|
<p>图表展现：Apache ECharts</p>
|
|
|
<p>词云制作：pyplot + jieba + wordcloud + Image + numpy </p>
|
|
|
</div>
|
|
|
<hr>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--技术说明-->
|
|
|
<div class="col-lg-6 mb-4">
|
|
|
<!-- 说明卡片 -->
|
|
|
<div class="card shadow mb-4">
|
|
|
<div class="card-header py-3">
|
|
|
<h6 class="m-0 font-weight-bold text-primary">说明</h6>
|
|
|
</div>
|
|
|
<div class="card-body" style="text-indent: 2em;">
|
|
|
<p>selenium主要用webdriver来模仿认为点击爬取页面数据，request负责伪装headers获取页面，json负责将获取到的文本数据转换为字典数据。time和random负责随机访问频率。</p>
|
|
|
<hr>
|
|
|
<p>re是通过正则表达式提取一定规则的文本内容。replace主要取出部分不要的字符。time模块负责转换json时间。</p>
|
|
|
<hr>
|
|
|
<p>Flask通过编写app路由处理请求响应，然后以render_template渲染视图效果。</p>
|
|
|
<hr>
|
|
|
<p>jieba负责提供分词、识词过滤，Image负责背景图的图像处理，numpy负责矩阵运算，中文显示需要的空间，wordcloud负责形成有遮罩效果的图形，pyplot是负责绘出最终图形。</p>
|
|
|
<p class="mb-0"></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 主页具体内容模块Content Row -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<!-- End of Main Content -->
|
|
|
|
|
|
<!-- 低端 Footer -->
|
|
|
<footer class="sticky-footer bg-white">
|
|
|
<div class="container my-auto">
|
|
|
<div class="copyright text-center my-auto">
|
|
|
<span ></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
<!-- End of Footer -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div><!-- End of Content Wrapper -->
|
|
|
</div>
|
|
|
<!-- End of Page Wrapper -->
|
|
|
|
|
|
<!-- 回到顶端按钮 Scroll to Top Button-->
|
|
|
<a class="scroll-to-top rounded" href="#page-top">
|
|
|
<i class="fas fa-angle-up"></i>
|
|
|
</a>
|
|
|
|
|
|
<!-- -----------------分割线----上面是页面内容----下面是注入js----分割线--------------- -->
|
|
|
|
|
|
<!-- Bootstrap core JavaScript-->
|
|
|
<script src="static/vendor/jquery/jquery.min.js"></script>
|
|
|
<script src="static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
|
<!-- Core plugin JavaScript-->
|
|
|
<script src="static/vendor/jquery-easing/jquery.easing.min.js"></script>
|
|
|
|
|
|
<!-- Custom scripts for all pages-->
|
|
|
<script src="static/js/sb-admin-2.min.js"></script>
|
|
|
|
|
|
<!-- Page level plugins -->
|
|
|
<script src="static/vendor/chart.js/Chart.min.js"></script>
|
|
|
|
|
|
<!-- Page level custom scripts -->
|
|
|
<script src="static/js/demo/chart-area-demo.js"></script>
|
|
|
<script src="static/js/demo/chart-pie-demo.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html> |
