Web 我的第一个网页搭建项目
- 主页搭建
- 索引目录搭建
- 运行操作
此处只关注网页搭建，数据分析结果来自真实数据分析案例，这里不展示。
主页搭建
welcome.html文件内，这里引入了背景图增加了项目说明：
python"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>小组汇报</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="../static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="../static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="../static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
<link href="../static/assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="../static/assets/vendor/aos/aos.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="../static/assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="hero-container">
<div id="heroCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators" id="hero-carousel-indicators"></ol>
<div class="carousel-inner" role="listbox">
<!-- Slide 1 -->
<div class="carousel-item active" style="background-image: url('../static/assets/img/slide/slide-1.jpg');">
<div class="carousel-container">
<div class="carousel-content container">
<h2 class="animated fadeInDown">BeautifulSix <span>小组</span></h2>
<p class="animated fadeInUp">小组成员：abc</p>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item" style="background-image: url('../static/assets/img/slide/slide-2.jpg');">
<div class="carousel-container">
<div class="carousel-content container">
<h2 class="animated fadeInDown">项目一：中美实时疫情数据分析。</h2>
<p class="animated fadeInUp">该项目用于获取当前中国各省份、美国各个州新冠疫情的情况，包括当前确诊病例、累计确诊病例、疑似确诊病例、治愈人数以及死亡人数。将获取的数据进行可视化操作，从图中可以清楚地了解国中美两国新冠疫情防控形势，认识到新冠疫情的复杂性与严峻性。</p>
</div>
</div>
</div>
<!-- Slide 3 ---
<div class="carousel-item" style="background-image: url('../static/assets/img/slide/slide-3.jpg');">
<div class="carousel-container">
<div class="carousel-content container">
<h2 class="animated fadeInDown">项目二：微博实时疫情文本分析。</h2>
<p class="animated fadeInUp">该项目用于获取实时的微博文本数据，从文字分析新冠疫情的最新消息，本组展示中国疫情、美国疫情以及疫苗接种三个方向。输入想了解的最新讯息的关键词，程序将与关键字相关的一定数量的微博自动整合文本，内部进行清洗分词用停用词进行筛选统计词频等操作，对最后的结果进行可视化操作得到词云图。从另一个维度去了解新冠疫情的最新情况，对当下时事有一个更全面的认识。</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#heroCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon icofont-rounded-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#heroCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon icofont-rounded-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section><!-- End Hero -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container">
<div class="copyright">
© Copyright <strong><span>HYD</span></strong>. All Rights Reserved
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
<!-- Vendor JS Files -->
<script src="../static/assets/vendor/jquery/jquery.min.js"></script>
<script src="../static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="../static/assets/vendor/php-email-form/validate.js"></script>
<script src="../static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
<script src="../static/assets/vendor/venobox/venobox.min.js"></script>
<script src="../static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="../static/assets/vendor/counterup/counterup.min.js"></script>
<script src="../static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="../static/assets/vendor/aos/aos.js"></script>
<!-- Template Main JS File -->
<script src="../static/assets/js/main.js"></script>
</body>
</html>
效果图：
索引目录搭建
index.html文件内：
python"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 疫情数据分析结果展示 - Layui</title>
<link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">中国疫情数据分析平台</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="">PPT</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li target="index" class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">数据分析</a>
<dl class="layui-nav-child">
<dd><a href="../static/data_s1.png">数据分析思维导图</a></dd>
<dd><a target="index" href="/data_death">美国疫情·死亡人数</a></dd>
<dd><a target="index" href="/data_confirmed">美国疫情·确诊人数</a></dd>
<dd><a target="index" href="/analysis1_bar_stack">中国疫情·省级柱状体</a></dd>
<dd><a target="index" href="/map_visualmap_china">中国疫情·确诊人数</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">文本分析</a>
<dl class="layui-nav-child">
<dd><a href="../static/text_s1.png">文本分析思维导图</a><dd>
<dd><a target="index" href="/text_china">中国疫情</a><dd>
<dd><a target="index" href="/text_yimiao">疫苗接种</a></dd>
<dd><a target="index" href="/text_USA">美国疫情</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
{# iframe: 多个页面嵌套 #}
<iframe width="100%" height="100%" name="index" src="welcome" frameborder="0"></iframe>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
<script src="../static/layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的操作', {icon: 0});
}
,menuRight: function(){
layer.open({
type: 1
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
,area: ['260px', '100%']
,offset: 'rt' //右上角
,anim: 5
,shadeClose: true
});
}
});
});
</script>
</body>
</html>
运行操作
app.py文件内，包含了函数和结果图的调用
python">from flask import Flask,render_template # 导入flask
from china import *#内部封装函数（国内疫情爬取绘图代码）
from abroad import * #内部封装函数（国外疫情爬取绘图代码）
app = Flask(__name__) #获取当前应用的Falsk对象，赋值给app
# @app.route('/index') #视图函数对应的路径跟前端浏览器访问的要一致
# def index():
# return render_template('index.html')
# 目录（框架）
@app.route('/index')
def index():
#如果返回模板页面
return render_template("index.html")
# 主页
@app.route("/welcome")
def welcome():
return render_template("welcome.html")
#数据思维导图
@app.route("/data_s1")
def data_s1():
return "data_s1.png"
#数据1
@app.route("/data_confirmed")
def data_confirmed():
qz()
return render_template("确诊人数.html")
#数据2
@app.route("/data_death")
def death():
sw()
return render_template("death.html")
#数据3
@app.route("/analysis1_bar_stack")
def analysis1_bar_stack():
analysis1_bar()
return render_template("analysis1_bar_stack.html")
#数据4
@app.route("/map_visualmap_china")
def map_visualmap_china():
china_map_1()
return render_template("map_visualmap_china.html")
#文本思维导图
@app.route("/text_s1")
def text_s1():
return "text_s1.png"
#文本1
@app.route("/text_china")
def text_china():
return render_template("中国疫情.html")
#文本2
@app.route("/text_yimiao")
def text_yimiao():
return render_template("疫苗接种.html")
#文本3
@app.route("/text_USA")
def text_USA():
return render_template("美国疫情.html")
if __name__ == '__main__':
app.run()
运行结果如下：
