六、数据可视化—首页、列表页制作（爬虫及数据可视化）
- 1，首页制作
- （1）创建新项目选择flask框架
- （2）下载模板
- （3）导入flask框架中进行改写
- （4）访问服务器
- （5）修改图片路径
- （6）修改html
- 2，列表页制作
- （1）更改标题
- （2）下载图标
- （3）更改跳转链接
- （4）更改app.py
- （5）Movie.html展示表格
- （6）Movie.html
1，首页制作
使用前面爬取的movie.db数据库，完成豆瓣的可视化表现
（1）创建新项目选择flask框架
新建完成后
数据库可以放在指定的位置，也可以放在flask框架下面
理论上数据库需要单独放置，不会和项目放在一起
此处直接放在根路径下了
（2）下载模板
此处找到现有的模板，在其基础上进行修改
http://www.cssmoban.com/cssthemes/
使用模板之家的模板，可以根据自己需要选择
因为豆瓣数据比较小就选择比较简单的
http://www.cssmoban.com/cssthemes/9296.shtml
此网站风格像是企业站的风格
对于我们来讲，需要上面是一个标题栏，能够点一下，下面就显示一些具体的数据，图标等信息，此处基本满足要求，就选择了
此素材在云盘中已经存在了，
想很多自适应的，都是使用jQuery进行实现的
（3）导入flask框架中进行改写
如何将其导入flask框架中进行改写，首先将index.html复制到flask中的templates
未来所有的网页要想静态的显示，都要放到templates中
将assets放到static中，一些静态文件，主要是考虑到未来CDN的分发，把静态文件分发到很多服务器上去，降低服务器的访问压力，一般静态文件放到static中，网页渲染的文件会单独拿出来。
（4）访问服务器
（5）修改图片路径
但只有文字，说明图片路径不对，之前复制到static的时候，相对路径变了，现在需要将index.html页面中的assets前加入static
如下
路径替换好后，再次访问就显示成功了，如下
通过此种方式，即可将外部下载的网页模板实现了本地化的一个配置
（6）修改html
要对别人的HTML改成自己想要的一些效果
初步想法如下
为了更直观的修改我们想要修改的地方，可以进入检查，用鼠标找到我们想要更改的位置，再进入html的源代码页面进行删除更改
也可以在pycharm中找到搜索
将drop down和contact us删除（不需要了）
第一频想显示的是我们的信息不是团队，只要
将下方的替换掉上方的位置
结果如下
此时首页就制作完成了
2，列表页制作
（1）更改标题
（2）下载图标
可以在下方连接中下载图标
是阿里开源出来的，大部分免费
https://www.iconfont.cn/
（3）更改跳转链接
点击超链接是可能报错，是因为没有进行响应
下面对后面的进行一下清除
将首页index中的从main开始到end main删除
（4）更改app.py
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/') #访问根路径
def index():
return render_template("index.html") #在templates下的路径
@app.route('/index') #访问根路径/index时和访问根路径时返回的网页是一样的，即首页
def home():
#return render_template("index.html") #在templates下的路径
return index() #不返回模板渲染的页面，而是返回一个函数是一样的
@app.route('/movie') #访问根路径
def movie():
return render_template("movie.html")
@app.route('/score') #访问根路径
def score():
return render_template("score.html")
@app.route('/word') #访问根路径
def word():
return render_template("word.html")
@app.route('/team') #访问根路径
def team():
return render_template("team.html")
if __name__ == '__main__':
app.run()
现在连接基本搞定了，需要改的，路由解析，模板渲染
（5）Movie.html展示表格
@app.route('/movie') #访问根路径
def movie():
datalist=[]
con = sqlite3.connect("movie.db") #连接数据库，路径当前路径
cur = con.cursor() #游标定义
sql = "select * from movie250" #从数据库中的表movie250查询所有数据
data = cur.execute(sql)
for item in data:
datalist.append(item) #得到的数据要保存到列表中，否则后面关闭时会丢失信息
cur.close()
con.close()
return render_template("movie.html",movies=datalist) #将datalist数据放到movies变量中，在渲染网页时将movies传到网页中
到此为止所有数据显示结果就告此一段落了，一方面是没有分页，250条数据太多，用户查找麻烦，有兴趣可以进行分页
也可以显示图片海报等
数据可视化最基本的是列表的方式，图片其实直接加上<img>标签并设置宽高就能了
（6）Movie.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>豆瓣Top250数据分析</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="static/assets/img/favicon.png" rel="icon">
<link href="static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- 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>
<!-- ======= top 被删 ======= -->
<!-- ======= Header ======= -->
<header id="header">
<div class="container">
<div class="logo float-left">
<h1 class="text-light"><a href="index.html"><span>Mamba</span></a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
</div>
<nav class="nav-menu float-right d-none d-lg-block">
<ul>
<li class="active"><a href="/index">首页 <i class="la la-angle-down"></i></a></li>
<li><a href="/movie">电影</a></li>
<li><a href="/score">评分</a></li>
<li><a href="/word">词云</a></li>
<li><a href="/team">团队</a></li>
<!-- ======= drop down和contact us被删 ======= -->
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<!-- ======= Our Team Section ======= -->
<section id="team" class="team">
<div class="container">
<div class="section-title">
<h2>豆瓣电影Top250电影名单</h2>
</div>
<!-- ======= Counts Section ======= -->
<section class="counts section-bg">
<div class="container">
<table class="table table-striped"> <!-- 如果使用border=“1”太难看，使用table-striped斑马线格式就好看一些了 -->
<tr>
<td>排名</td>
<td>电影中文名称</td>
<td>电影外国名称</td>
<td>评分</td>
<td>评价人数</td>
<td>一句话概述</td>
<td>其他信息</td>
</tr>
{% for movie in movies %} <!-- 在上下括号中间的进行循环 -->
<tr>
<td>{{ movie[0] }}</td>
<td>
<a href="{{ movie[1] }}" target="_blank"> <!-- 加入名称超链接,target是新建标签页打开链接 -->
{{ movie[3] }}
</a>
</td>
<td>{{ movie[4] }}</td>
<td>{{ movie[5] }}</td>
<td>{{ movie[6] }}</td>
<td>{{ movie[7] }}</td>
<td>{{ movie[8] }}</td>
</tr>
{% endfor %}
</table>
</div>
</section><!-- End Counts Section -->
</div>
</section><!-- End Our Team Section -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container">
<div class="copyright">
© Copyright <strong><span>Mamba</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>
