Flask
Flask是一个轻量级的WSGI Web应用程序框架。它旨在使快速入门变得容易，并具有扩展到复杂应用程序的能力。它最初是围绕Werkzeug 和Jinja的简单包装，并已成为最受欢迎的Python Web应用程序框架之一。
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello World!'
if __name__ == '__main__':
app.run()
这是flask框架制作的一个最小的应用。使用python运行后访问localhost:5000就能看到网页显示Hello world。
这里首先引入了Flask类，然后给这个类创建了一个实例，name代表这个模块的名字。因为这个模块是直接被运行的所以此时name的值是main。然后用route()这个修饰器定义了一个路由，告诉flask如何访问该函数。最后用run()函数使这个应用在服务器上运行起来。
一、目录结构
二、连接数据库 mysql.py
import pymysql
class Mysql(object):
def __init__(self):
try:
self.conn = pymysql.connect(host='localhost',user='root',password='123456',database='meishi',charset="utf8")
self.cursor = self.conn.cursor() # 用来获得python执行Mysql命令的方法（游标操作）
print("连接数据库成功")
except:
print("连接失败")
def getItems(self):
sql= "select *from food" #获取food数据表的内容
self.cursor.execute(sql)
items = self.cursor.fetchall() #接收全部的返回结果行
return items
三、Flask.py
from flask import Flask
from flask import render_template
from mysql import Mysql
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello World!'
@app.route('/echarts')
def getdata():
db = Mysql()
items=db.getItems()
return render_template('echarts.html',items=items)
if __name__ == '__main__':
app.run(debug=True) #debug=True发生错误时会返回发生错误的地方
- render_template()：调用了”render_template()”方法来渲染模板。方法的第一个参数”echarts.html”指向你想渲染的模板名称，第二个参数”items”是你要传到模板去的变量，变量可以传多个。
四、echarts.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/echarts.min.js"></script>
<style>
#main{
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化 echarts 实例并绘制图表。
var myChart=echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '食材与数量'
},
dataZoom: [{
type: 'slider',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
left: '9%', //滚动条靠左侧的百分比
bottom: -5,
start: 10,//滚动条的起始位置
end: 20 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}],
xAxis: {
name:"食材",
type: 'category',
data:[
{% for item in items %}
"{{ item[0]}}",
{% endfor %}
]},
yAxis: {
name:"数量",
type: 'value',
axisLabel : {
formatter: '{value} 种'}
},
series: [
{
type: 'line', //line折线图。bar柱形图
data:[{% for item in items %}
"{{ item[1]}}",
{% endfor %}],
itemStyle:{normal: {color:"#31b0d5"}}
}
]
};
myChart.setOption(option);// 基于准备好的dom，初始化 echarts 实例并绘制图表。
</script>
</body>
</html>
Jinja2 模板的实例（加载数据库的数据到html）
data:[
{% for item in items %}
"{{ item[0]}}", # item[0]这里是加载数据表的第一列数据，item[1]是第一列
{% endfor %}
]},
五、运行项目Flask.py
在浏览器输入 http://127.0.0.1:5000/echarts 可以看到：
（在echarts.html的series的type设置了line折线图）
（在echarts.html的series的type设置了bar柱形图）
