首先简单介绍一下Flask框架： Flask主要功能有两个：
（1）Werkzeug——路由转换
（2）jinja2——框架渲染
1、环境搭建：下载python-Flask扩展包
pip install flask
将Flask模块导入程序中：
from flask import Flask2、用Flask搭建第一个网络服务器程序——输出Hello，World！
代码：
from flask import Flask
app = Flask(__name__)
#路由解析：通过用户访问的路径，匹配相应函数
@app.route('/')
def h():
return 'hello world'
if __name__ == '__main__':
app.run()
输出：
复制输出结果中的网址，然后在浏览器中打开，页面显示如下：
成功输出“Hello World”
3、开启Debug模式因为在制作网页中，我们要一边观察网页情况一边调试程序，所以每次都去点击打开和关闭程序按钮非常麻烦，所以为了方便debug，我们在程序中更改以下代码。
app.run(debug=True)
完整：
from flask import Flask
app = Flask(__name__)
@app.route('/')
def h():
return 'hello 1'
if __name__ == '__main__':
app.run(debug=True)
这样就能实时修改代码和网页了。
4、向网页中传递参数： （1）string型路由传参，在网址路径中用<>将参数括起来，然后在访问函数中存入参数，并用占位符的方式显示参数。
from flask import Flask
app = Flask(__name__)
#通过访问路径获取字符串参数
@app.route("/test/")
def welcom(name):
return "hello,%s"%name
if __name__ == '__main__':
app.run(debug=True)
输出： （*注意网址路径）
（2）int型
from flask import Flask
app = Flask(__name__)
@app.route("/test/")
def welcom2(id):
return "hello,%d的会员"%id
if __name__ == '__main__':
app.run(debug=True)
输出：
（3）float型
from flask import Flask
app = Flask(__name__)
@app.route("/test/")
def welcom3(v):
return "一共找您%.2f元钱"%v
if __name__ == '__main__':
app.run(debug=True)
输出：
也可以将以上例子中的函数放在一起，路由解析会自动判别你在网址传入的参数类型，并自动跳转到相应参数类型所在的函数网页。
5、访问一个.HTML文件 （1）导入模块：render_template
（2）创建文件夹：项目文件夹 ——> templates(新建）——> test.html
（3）编写程序from flask import Flask,render_template
app = Flask(__name__)
@app.route("/")
def index2():
return render_template("test.html")
if __name__ == '__main__':
app.run(debug=True)
输出：
6、向HTML网页中传递参数 （1）传入普通变量 主程序（.py）在网页中显示日期。
在html文件中，主程序传入的变量要用{{ xxx }}扣起来才能使用。
脚本文件也是如此，但可能需要单独定义一个变量去赋值。var name = {{}}
from flask import Flask,render_template
import datetime
app = Flask(__name__)
@app.route("/time")
def index():
times = datetime.date.today()#普通变量
return render_template("test2.html",var = times)
if __name__ == '__main__':
app.run(debug=True)
HTML文件(.html)
输出：
（2）传入列表变量主程序：
from flask import Flask,render_template
import datetime
app=Flask(__name__)
@app.route("/time")
def index():
time = datetime.date.today()#普通变量
name = ["小王","小刘","小赵"]#列表类型
return render_template("test3.html",var = time,list=name)
if __name__ == '__main__':
app.run(debug=True)
html文件：
今天值班的有：
{% for data in list %}
输出：
（3）输出表格html文件
今天值班的有：
{% for data in list %}
| 第一列 | 第二列 |
| 第一列 | 第二列 |
| 第一列 | 第二列 |
输出：
（4）传入字典变量
主程序：
from flask import Flask,render_template
import datetime
app=Flask(__name__)
@app.route("/time")
def index():
time = datetime.date.today()#普通变量
name = ["小王","小刘","小赵"]#列表类型
task = {"任务":"打扫卫生","时间":"三个小时"}#字典类型
return render_template("test3.html",var = time,list=name,task=task)
if __name__ == '__main__':
app.run(debug=True)
html：
今天值班的有：
{% for data in list %}
| {{key}} | {{value}} |
输出：
7、网页请求与响应在项目文件夹中新建文件夹test，在test中新建register.html和result.html两个HTML文件。
主程序：
from flask import Flask,render_template
import datetime
app=Flask(__name__)
#表单提交
@app.route('/test/register')#网址
def register():
return render_template("test/register.html")#文件夹路径
#接收到表单提交的路由，需要指定methods为post
@app.route('/result',methods=['POST','GET'])
def result():
return render_template("test/result.html")
if __name__ == '__main__':
app.run(debug=True)
register.html
result.html
输出：
点击提交后：
将result页面改为数据表单：
| {{key}} | {{value}} |
|---|
输出结果：
注意：
在上面的register.html代码中，网址响应部分是我们固定写好的，如果我们想让他自己去填写路径应该这么做：
8、制作网站 （1）准备模板动态访问页面：
url_for("访问路由名字")
返回的是'/result'
模板网站：
网页模板,网站模板,DIV+CSS模板,企业网站模板下载-模板之家 (cssmoban.com)http://www.cssmoban.com/
示例模板：
在线模拟预览-模板之家cssMoban.comhttp://www.cssmoban.com/preview/index.html?url=http://demo.mxyhn.xyz:8020/cssthemes6/btmd_12_Mamba/index.html&id=9296&tid=20136294750679
（淘宝1毛钱一个）
下载完的网站文件夹：
1、把assets和index.html复制到我们的项目文件夹。
2、将html文件放入项目中的templates文件夹。（最好copy一份做备份。）
3、新建一个static文件夹用来存放资源文件。（将asset放入static文件中。）
准备工作做好了，接下来开始制作网页！
（2）制作首页提供一个图标网站（以后可能会用到）：
iconfont-阿里巴巴矢量图标库
矢量图的使用方法：
iconfont字体图标的使用方法--超简单! - 全堆栈溢出攻城狮 - 博客园 (cnblogs.com)
index.html:
豆瓣Top250数据可视化分析 DouBan
豆瓣Top250数据可视化分析 Collect from 模板之家 查字典应用python爬虫、Flask框架、Echarts、WordCloud等技术实现
250 经典电影
521评分报告
1,463词频统计
15团队成员
主程序：
from flask import Flask,render_template
import sqlite3
app = Flask(__name__)
#路由解析：通过用户访问的路径，匹配相应函数
@app.route('/')
def index():
return render_template("index.html")
#返回首页
@app.route('/index')
def home():
return render_template("index.html")
#返回电影页面
@app.route('/movie')
def movie():
datalist = []
con = sqlite3.connect("moveTop.db")#打开数据库
cur = con.cursor()#获取游标
sql = "select * from movieTop250"#sql查询语句
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(debug=True)
页面展示：
（3）制作电影表单
数据库相关操作看上一个教程：爬虫保姆级教程2：在visual studio中使用python项目连接SQLite数据库--爬虫数据保存之数据库_代码骑士的博客-CSDN博客
#引入数据库 import sqlite3
movie函数：
#返回电影页面
@app.route('/movie')
def movie():
datalist = []
con = sqlite3.connect("moveTop.db")#打开数据库
cur = con.cursor()#获取游标
sql = "select * from movieTop250"#sql查询语句
data = cur.execute(sql)#获取数据
for item in data:#将数据保存在列表中
datalist.append(item)
cur.close()#关闭游标
con.close()#关闭连接
return render_template("movie.html",movies = datalist)
movie.html:
豆瓣Top250数据可视化分析 DouBan
豆瓣Top250电影 Collect from 模板之家 查字典
{% for movie in movies %} 电影排名 中文名称 外国名称 电影评分 评价人数 电影概述 其他信息 {% endfor %} {{ movie[0] }} { movie[1] }}"> {{ movie[3] }} {{ movie[4] }} {{ movie[5] }} {{ movie[6] }} {{ movie[7] }} {{ movie[8] }}
页面展示：
（4）制作评分页面
Echarts官方网站：
（官网很多图表示例，推荐大家去学习。）
Apache ECharts
下载配置echarts
Echarts扩展包：
链接：https://pan.baidu.com/s/1z07VwLkkjJW1ZYdCVOhKNw
提取码：pc15网站模板素材：
链接：https://pan.baidu.com/s/1D_PEc5c32qM8O1MEcRVLww
提取码：gwxs
放入位置：static-->assets-->js
score.html：
豆瓣Top250数据可视化分析
DouBan
豆瓣Top250评分分布图
Collect from 模板之家
查字典
主程序：
#返回评分界面
@app.route('/score')
def score():
score=[]
num=[]
con = sqlite3.connect("moveTop.db")#打开数据库
cur = con.cursor()#获取游标
sql = "select score,count(score) from movieTop250 group by score"#sql查询语句
data = cur.execute(sql)#获取数据
for item in data:#将数据保存在列表中
score.append(item[0])
num.append(item[1])
cur.close()#关闭游标
con.close()#关闭连接
return render_template("score.html",score = score,num = num)
页面展示：
（5）制作词频页面
豆瓣Top250数据可视化分析 DouBan
词频统计 Collect from 模板之家 查字典根据250部电影的一句话描述，提炼出词云树，可以让我们更加清晰的了解人们对经典电影的理解。
关于电影
你有什么样的感悟？
页面展示：
（6）制作团队页面
豆瓣Top250数据可视化分析 DouBan
我们的团队 代码骑士 QQ:1696297834 代码骑士 QQ:1696297834 代码骑士 QQ:1696297834 代码骑士 QQ:1696297834 Collect from 模板之家 查字典
页面展示：
大功告成啦！
