Python爬取豆瓣Top250并可视化（六）- 可视化 - 将电影列表布局到WEB端

前面采集了数据，接下来进行可视化并布局到WEB端。爬虫还有框架scrapy可以用，也有feapder可以用，据说feapder是国人开发的，也有完整的文档，有时间去研究下。

将数据布局到WEB端的准备：

1，前面采集的数据，csv，xls，xlsx还有数据库，任选一样，或者练手的话都可以做一遍；

2，在pycharm中创建一个flask项目；

3，准备一个网页模板，随便去哪里下，也可以自己写，下载好之后将静态文件如css、js还有图片文件放在flask项目下的static文件下；将网页文件（.html）放在template下；

关于Flask：

Flask其实就两部分，不要去了解底层， 会用就好。（就像电影中一个优秀的狙击手，只要会用狙击枪狙杀敌人就好，不需要了解枪是怎么制造的。工具党没有什么不好。）

第一部分是解析路由（路径），就是前段访问服务器的路径，都在@app.route('/')语句中，当前语句代表访问服务器的根目录。

第二部分就是回应客户端响应，都定义在@app.route('/some_path')下的函数里。

关于可视化：

可视化的第一块是将电影列表布局到WEB端，第二块是做一些图表，柱状图饼图之类的展示数据，第三块是做做一个词云。

在下载的网页模板中去除自己不想要的部分，这里直接布局到首页，也就是只用一个页面，没有做链接和分页。

开始操作：

1，在pycharm中创建一个Flask项目，名字随便去，开启调试模式，不然每次更新代码都要重新启动项目（开启调试模式可以在创建的时候开启，也可以在项目的右上角打开配置项，开启调试，如下图）；

2，将下载的模板根据上面的准备工作依次放在指定文件夹；

3，将采集的数据放在此项目中的根目录下，方便操作；

后台代码展示：

首先是从csv读取数据：

前端部分代码展示：

其实就全部是HTML代码。效果如下：

发现多了一列表头。将后台代码修正一下：

就是判定了一下行数，如果是csv里的第一行，就跳过。

再读个数据库：

效果：

列有错开，在数据库中有个序号，可以在前端代码加一个单元格<td>展示序号（也即电影排名）。这里更改后端代码。

用一行代码，[x for x in row[1:]]就重构了数据row。

下一个应该是利用flask + echarts做图表并布局到WEB端。