Flask+MySQL+Echarts实现前后端交互

在MySQL中创建数据表，使用python连接数据库，Ajax实现数据获取，Flask框架做web后台，最后使用Echarts进行可视化。

数据表如图一所示：（操作数据可以使用navicat）

图一

工程目录结构如图二所示：

图二

使用的python第三方库有：

from flask import Flask,render_template,url_for

import pymysql

import json

web.py源代码如下：

app = Flask(__name__)

@app.route('/')

def my_tem():

#在浏览器上渲染my_templaces.html模板

return render_template('my_template.html')

@app.route('/test',methods=['POST'])

def my_test():

#创建连接数据库

connection = pymysql.connect(host='localhost',

user='root',

passwd='123456',

db='data',

port=3306,

charset='utf8'

)

cur=connection.cursor()#游标（指针）cursor的方式操作数据

sql='SELECT movie,score FROM tb1_movie_score' #sql语句

cur.execute(sql)#execute(query, args):执行单条sql语句。

see=cur.fetchall()#使结果全部可看

#print(sql)

#print(see)

#print(cur)

#创建json数据

xdays=[]

jsonData={}

yvalues=[]

for datain see:

xdays.append(data[0])

yvalues.append(data[1])

#print(xdays)

#print(yvalues)

jsonData['xdays']=xdays

jsonData['yvalues']=yvalues

#print(jsonData)

#将json格式转成str，因为如果直接将dict类型的数据写入json会发生报错，因此将数据写入时需要用到该函数。

j=json.dumps(jsonData)

#print(j)

cur.close()

connection.close()

#渲染html模板

return (j)

if __name__ =="__main__":

#运行项目

#my_test() #测试

app.run(host='127.0.0.1',debug =True)#整个项目的运行

my_template.html代码如下：

<!DOCTYPE html>

<title>ECharts

// 基于准备好的dom，初始化echarts实例

var myChart =echarts.init(document.getElementById('main'));

//建立axjx所需的json数据

var app={

xday:[],

yvalue:[]

};

//发送ajax请求

$(document).ready(function () {

getData();

console.log(app.xday);

console.log(app.yvalue)

});

//设计画图

function getData() {

$.ajax({

//渲染的是127.0.0.1/test 下的json数据

url:'/test',

data:{},

type:'POST',

async:false,

dataType:'json',

success:function(data) {

app.xday = data.xdays;

app.yvalue = data.yvalues;

myChart.setOption({

title: {

text:'电影评分总数'

tooltip: {},

legend: {

data:['评分']

xAxis: {

data: app.xday

yAxis: {},

series: [{

name:'评分',

type:'bar',

data: app.yvalue

}]

})

error:function (msg) {

console.log(msg);

alert('系统发生错误');

}

})

}

运行web.py代码，如图三所示：

图三

点击连接即可访问站点，如图四所示：

图四

更改MySQL中的数据，如图五所示：

图五

刷新网页即可展示最新数据，如图六所示：

图六

查看后台，可以看到访问的日志记录，如图七所示：

图七

至此就实现了整个数据流的贯通，项目很小，也是汲取了前人的成果，本着开源的精神，更加详细的展示了这个小系统，希望对读者有所帮助！

最后编辑于：2019.12.14 22:13:32