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>
運行效果如下所示：
