任务一：第一个WEB应用
pypi (tencent.com)
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello_world():
return "<p>Hello, World!</p>"
$ flask --app hello run
任务二： 模板WEB应用
/hello2.py
from flask import Flask
from flask import render_template
app = Flask(__name__)
jokes=['鸡蛋说先有我再有鸡，
鸡说你自己从蛋壳出来看看',
'土豆说我自带buf有比较高的防晒环境',
'虫子对青蛙说打死你也吃不到我',
'蜗牛说下雨我就出来散步'
]
@app.route("/")
def hello_world():
return render_template('jokes.html', jokes=jokes)
模板示例：/templates/jokes.html
<!DOCTYPE html>
<title>Hello from Flask 笑话</title>
<h1 style="background: #cca574; color: white">这是笑话：</h1>
<h2>{{jokes[0]}}</h2>
<h3>{{jokes[1]}}</h3>
<h4>{{jokes[2]}}</h4>
<h5>{{jokes[3]}}</h5>
<img src="/static/an.png" draggable="false" />
综合任务：创建一个实时温度监控仪 WEB应用 —— Flask + Pyecharts
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>温度监测</title>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<h2>温度监测仪</h2>
<div id="gauge" style="width:600px; height:300px;"></div>
<div id="line" style="width:600px; height:300px;"></div>
<script>
$(
function () {
var line_chart = echarts.init(document.getElementById('line'), 'white', {renderer: 'canvas'});
var gauge_chart = echarts.init(document.getElementById('gauge'), 'white', {renderer: 'canvas'});
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/lineChart",
dataType: 'json',
success: function (result) {
line_chart.setOption(result);
}
});
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/gaugeChart",
dataType: 'json',
success: function (result) {
gauge_chart.setOption(result);
}
});
}
)
</script>
</body>
</html>
/app.py
from random import randrange
from flask import Flask, render_template
from pyecharts import options as opts
from pyecharts.charts import Line,Gauge
app = Flask(__name__, static_folder="templates")
def gauge_c() :
c = Gauge()
c.add("",[("温度", 25)],
start_angle=200,
end_angle=-20,
min_= 0,
max_= 60,
# pointer=opts.GaugePointerOpts(is_show=False),
detail_label_opts=opts.GaugeDetailOpts(
formatter="{value}°C",
offset_center=["0%", "50%"],
font_size=30),
# axisline_opts=opts.AxisLineOpts(
# linestyle_opts=opts.LineStyleOpts(
# color=[(1 ,"#37a2da")], width=10)
# ),
)
c.set_global_opts(
title_opts=opts.TitleOpts(title="当前温度")
)
return c
def line_base():
c = (
Line()
.add_xaxis(["6:00", "9:00", "12:00", "15:00", "18:00", "21:00","24:00"])
.add_yaxis("温度", [15,20,25,30,22,21,10])
.set_global_opts(title_opts=opts.TitleOpts(title="温度折线图", subtitle="昼夜温差折线图"))
)
return c
@app.route("/")
def index():
return render_template("index.html")
@app.route("/gaugeChart")
def get_gauge_chart():
c = gauge_c()
return c.dump_options_with_quotes()
@app.route("/lineChart")
def get_line_chart():
c = line_base()
return c.dump_options_with_quotes()
if __name__ == "__main__":
app.run()
