Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架，对于Werkzeug本质是Socket服务端，其用于接收http请求并对请求进行预处理，然后触发Flask框架，开发人员基于Flask框架提供的功能对请求进行相应的处理，并返回给用户，如果要返回给用户复杂的内容时，需要借助jinja2模板来实现对模板的处理，即：将模板和数据进行渲染，将渲染后的字符串返回给用户浏览器。
“微”(micro) 并不表示你需要把整个 Web 应用塞进单个 Python 文件（虽然确实可以 ），也不意味着 Flask 在功能上有所欠缺。微框架中的“微”意味着 Flask 旨在保持核心简单而易于扩展。Flask 不会替你做出太多决策——比如使用何种数据库。而那些 Flask 所选择的——比如使用何种模板引擎——则很容易替换。除此之外的一切都由可由你掌握。如此，Flask 可以与您珠联璧合。
默认情况下，Flask 不包含数据库抽象层、表单验证，或是其它任何已有多种库可以胜任的功能。然而，Flask 支持用扩展来给应用添加这些功能，如同是 Flask 本身实现的一样。众多的扩展提供了数据库集成、表单验证、上传处理、各种各样的开放认证技术等功能。Flask 也许是“微小”的，但它已准备好在需求繁杂的生产环境中投入使用。
echarts一个开源的可视化图标工具
https://echarts.baidu.com/index.html
后台代码如下所示：
from flask import Flask,render_template
from flask_sqlalchemy import SQLAlchemy
app=Flask(__name__)
class Config(object):
SQLALCHEMY_DATABASE_URI="mysql://root:[email protected]:3306/author_book_py4"
SQLALCHEMY_TRACK_MODIFICATIONS=True
app.config.from_object(Config)
db=SQLAlchemy(app)
class Temperature(db.Model):
__tablename__="tbl_temperature"
id=db.Column(db.Integer,primary_key=True)
day=db.Column(db.String(64),unique=True)
high_temperature=db.Column(db.Integer)
lower_temperature=db.Column(db.Integer)
@app.route("/")
def index():
#查询数据库
temperature_list=Temperature.query.all()
return render_template("temperature.html",temperature=temperature_list)
if __name__ == '__main__':
db.drop_all()
db.create_all()
t1=Temperature(day="周日",high_temperature=7,lower_temperature=-2)
t2=Temperature(day="周一",high_temperature=8,lower_temperature=-1)
t3=Temperature(day="周二",high_temperature=8,lower_temperature=0)
t4=Temperature(day="周三",high_temperature=11,lower_temperature=1)
t5=Temperature(day="周四",high_temperature=10,lower_temperature=3)
t6=Temperature(day="周五",high_temperature=9,lower_temperature=2)
t7=Temperature(day="周六",high_temperature=10,lower_temperature=1)
db.session.add_all([t1,t2,t3,t4,t5,t6,t7])
db.session.commit()
app.run(debug=True)
前端代码如下所示：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="../static/echarts%20.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var data1=[{% for item in temperature%}'{{item.day}}',{% endfor %}];
var data2=[{% for item in temperature%}{{item.high_temperature}},{% endfor %}];
var data3=[{% for item in temperature%}{{item.lower_temperature}},{% endfor %}];
option = null;
option = {
title: {
text: '未来一周气温变化',
subtext: '数据来自中国天气预报'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data1
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name:'最高气温',
type:'line',
data:data2,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:data3,
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>运行效果如下所示：
