Flask Ajax實現Echarts非同步渲染

2021-09-07 20:53:26 字數 3020 閱讀 3316

首先給出echarts官網例項:

ss
執行效果如下所示:

然後在本地mysql中建立乙個資料庫test,在mysql中建立乙個表tvalues,在tvalues中建立兩個字段乙個欄位為id,乙個欄位為tdsvalue.

然後在pycharm中建立乙個demo.py後台py檔案，在template資料夾下建立乙個my_template.html前端展示介面

首先生成乙個flask例項

定義乙個檢視函式 hello():，對my_template.html進行渲染

def hello():

return render_template('my_template.html')

然後定義乙個檢視函式my_echart():進行資料庫的連線和查詢功能，並把查詢出來的結果放到乙個json中

#/test路由    接收前端的ajax請求


def my_echart():


#連線資料庫


conn=pymysql.connect(host='127.0.0.1',user='root',password='123456',db='test')


cur=conn.cursor()


sql='select t.id,t.tdsvalue from tvalues t'


cur.execute(sql)


u=cur.fetchall()


#轉換成json格式


jsondata={}


xdays=


yvalues=


for data in u:


print(xdays)


print(yvalues)


jsondata['xdays']=xdays


jsondata['yvalues']=yvalues


#json.dumps()用於將dict型別的資料轉換成str,因為如果直接將dict型別的資料寫入json會報錯，因此將資料寫入時需要用到此函式


j=json.dumps(jsondata)


cur.close()


conn.close()


#在瀏覽器上渲染my_template.html模板（為了檢視輸出資料)


return (j)
xdays這個陣列放的是id，yvalues這個陣列放的是銷售量

完整的demo.py**如下所示:

from  flask import flask,render_template,url_for


import pymysql


import json


#生成flask例項


def hello():


return  render_template('my_template.html')


#/test路由    接收前端的ajax請求


def my_echart():


#連線資料庫


conn=pymysql.connect(host='127.0.0.1',user='root',password='123456',db='test')


cur=conn.cursor()


sql='select t.id,t.tdsvalue from tvalues t'


cur.execute(sql)


u=cur.fetchall()


#轉換成json格式


jsondata={}


xdays=


yvalues=


for data in u:


print(xdays)


print(yvalues)


jsondata['xdays']=xdays


jsondata['yvalues']=yvalues


#json.dumps()用於將dict型別的資料轉換成str,因為如果直接將dict型別的資料寫入json會報錯，因此將資料寫入時需要用到此函式


j=json.dumps(jsondata)


cur.close()


conn.close()


#在瀏覽器上渲染my_template.html模板（為了檢視輸出資料)


return (j)


if __name__ == '__main__':
然後我們編寫my_template.html檔案『

先分別引入jquery.js和echarts.js檔案

然後為echarts準備乙個具有大小的dom




然後初始化echarts


var mychart = echarts.init(document.getelementbyid('main'));
然後發出ajax請求，從後台獲取json資料


$(document).ready(function () );
定義方法getdata（）獲取資料:


function getdata() ,


type:'post',


async:false,


datatype:'json',


success:function(data) ,


tooltip: {},


legend: ,


xaxis: ,


yaxis: {},


series: 


})},


error:function (msg) 


})};


完整的my_template.html**如下所示:




執行效果如圖所示：

				
快速排序演算法實現（遞迴實現 棧實現）
基本思想 選擇乙個基準元素,比如選擇最後乙個元素,通過一趟掃瞄，將待排序列分成兩部分,一部分比基準元素小,一部分大於等於基準元素,此時基準元素在其排好序後的正確位置，又稱為軸位置，此位置的元素確定後不再參與排序，然後再用同樣的方法遞迴地排序劃分的兩部分。分析 快速排序是不穩定的排序。快速排序的時間複...

				
介面實現與配置實現
在實現系統功能的時候，通常會首先定義好功能的介面，在系統功能不斷被實現的過程中，慢慢的發現有些介面的實現很類似，這個時候通常會開始做一次抽象，形 成乙個共同的部分，慢慢的系統形成了乙個抽象的層次，而為了通用，通常是通過定義介面，形成乙個抽象類，抽象類中暴露出一些抽象方法供外部擴充套件實 現，逐步的積...

				
js分頁實現，前端實現。
主要是借鑑了網上乙個例子，自己重新加了樣式，新增了跳轉，修改了一些小地方，用於和大家一起分享，前端分頁的技巧，的資料是我已經寫好了，其實大家也可以前端渲染 然後再分頁，都是可以的。其實分頁最關鍵是這兩句 var startrow currentpage 1 pagesize 1 currentpag...