阅读目录

  • Flask
  • 一、目录结构
  • 二、连接数据库 mysql.py
  • 三、Flask.py
  • 四、echarts.html
  • 五、运行项目Flask.py


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()函数使这个应用在服务器上运行起来。

一、目录结构

mac mysql 可视化界面_mysql

二、连接数据库 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

mac mysql 可视化界面_数据库_02


在浏览器输入 http://127.0.0.1:5000/echarts 可以看到：

（在echarts.html的series的type设置了line折线图）

mac mysql 可视化界面_数据库_03


（在echarts.html的series的type设置了bar柱形图）

mac mysql 可视化界面_python_04