数据可视化-首页制作

学完Flask框架的基础后，跟着老师应用flask做了几个页面来显示前面爬到的电影数据

找网页素材

可以去模板之家或者模板王等类似的资源网站找一些好看的页面，当然很多都开始收费了，找自己喜欢的又免费的可能需要花点时间。

我用的是下面这个模板页面

http://www.cssmoban.com/preview/index.html?url=http://demo.kangjingept.com:8020/cssthemes6/btmd_12_Mamba/index.html&id=9296

魔改

在这个模板页面基础上进行一些修改，在浏览器里F12元素快速定位找到需要删除或修改的元素位置，然后在Pycharm里ctrl+f查找到然后删除或修改

1.把顶部的contact……(Top Bar的section)去掉

2.把底部的footer-top去掉

3.中间部分，只留下Our Team Section的title和Counts Section，其他的全部删掉

4.修改剩下元素的内容为豆瓣电影TOP250相关的内容

结果如下

那四个小图标如果觉得不好看，可以去https://www.iconfont.cn/找一些喜欢的图标来替换

temp.html是最后修改完的页面，然后把这个页面复制，再粘贴新建新的相同界面的页面，我新建了index.html、movie.html、score.html、word.html、team.html。目录结构如下

然后把留下来的Counts Section里的图像外加上a标签，使其成为图片连接，可以点击图标跳转到相应的页面；把页面左上角的MAMBA的href改为index，点击它可以跳转到首页。

最后把movie.html改一下，把四个图标去掉就留下一个灰色背景的div，在里面写一个表格来显示之前爬豆瓣电影到数据库的数据，并且在电影中文名上加一个a标签，使它能点击访问。代码如下：

 <!-- ======= Counts Section ======= -->
<section class="counts section-bg">
  <div class="container">
      <table class="table table-striped"><!--bootstrap样式-->
          <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">
                  {{ 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 -->

用Flask路由相应网页

用前面学的基础语法写6个路由就行了，代码如下：

from flask import Flask,render_template
import sqlite3
app = Flask(__name__)


@app.route('/')
def home():
    return render_template("index.html")

@app.route('/index')
def index():
    #return render_template("index.html")
    return home()
@app.route('/movie')
def movie():
    datalist=[]
    con=sqlite3.connect("movie.db")
    cur=con.cursor()
    sql="select * from movie250"
    data=cur.execute(sql)
    for item in data:
        datalist.append(item)
    cur.close()
    con.close()
    return render_template("movie.html",movies=datalist)

@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()

这样基本就写完了，看下效果：

最后还有一些问题，比如250部电影信息如果全部放在一页显示的话太多了，最好分页显示，不仅加快了访问速度还提高了对访问者的友好度。

参考

https://www.bilibili.com/video/BV12E411A7ZQ?p=32

https://www.bilibili.com/video/BV12E411A7ZQ?p=33