後端python代碼：css
#coding:utf8 from flask import Flask,request,render_template import pymysql as mysql import json con = mysql.connect(user='xiaofan',password='123456',db="t1") con.autocommit(True) cur = con.cursor() app = Flask(__name__) #新建app @app.route('/') #設置路由 def index(): # 設置路由對應的函數 return render_template("index.html") @app.route("/userlist") def userlist(): sql = "select * from userlist" cur.execute(sql) data = cur.fetchall() dump_data = json.dumps(data) return dump_data @app.route('/delete') def delete(): name = request.args.get("name") print(name) sql = 'delete from userlist where name="%s"' %(name) print(sql) cur.execute(sql) return "ok" @app.route('/add') def add(): name = request.args.get('name') age = request.args.get('age') sql = 'insert into userlist values("%s","%s")' %(name,age) print(sql) cur.execute(sql) return "ok" @app.route('/edit') def edit(): name = request.args.get('name'); age = request.args.get('age') sql = 'update userlist set age=%s where name="%s"' %(age,name) print(sql) cur.execute(sql) return "ok" @app.route('/chartdata') def chartdata(): sql = "select * from userlist" cur.execute(sql) dic = {} rest = { 'title':[], 'data':[] } for d in cur.fetchall(): age = d[1] # dic[age] = dic.get(age,0)+1 #get若是有返回values不然返回0 把年齡和出現的次數放到一個字典中 eg:{23：5} 23 出現了5次 for age,num in dic.items(): rest['title'].append("%s" %(age)) rest['data'].append( {'name': "%s" %(age) ,'value': "%s" %num } ) print(rest) return json.dumps(rest) # 經過json向前端傳輸數據 if __name__ == "__main__": app.run(debug=True,port=9998,host='0.0.0.0')
前端代碼：html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="/static/bootstrap.css"> <!-- 引入bootstrap.css 基於flask須要使用全路徑--> </head> <body> <!--<button type="button" data-toggle="modal" data-target="#edit-modal">Launch modal</button>--> <div class="container"> <!-- 使用bootstrap的container容器 --> <div class="row"> <!-- 使用bootstrap的 row --> <div class="col-md-3"> <!-- 使用bootstrap佈局 col-md-3 佔3份 ，總共12份 --> </div> <div class="col-md-9"> <lable>name:</lable> <input type="text" class="user-input"> <lable>age:</lable> <input type="text" class="age-input"> <button type="button" class="btn btn-primary" id="add-button">添加</button> <table id="user-list" class="table"></table> </div> </div> </div> <!-- 基於bootstrap修改的的模態對話框--> <div class="modal fade" tabindex="-1" role="dialog" id="edit-modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">修改年齡</h4> </div> <div class="modal-body"> <input type="text" id="edit-name1"> <input type="text" id="edit-age1"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id="save-age">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div class="container"> <div class="row"> <div class="col-md-3"></div> <div id="main" class="col-md-9" style="width: 600px;height:300px;"></div> <!-- 用來存放echars獲得的圖形的位置 --> </div> </div> <!-- 引入各類js ，路徑全路徑 --> <script src="/static/jquery.js"></script> <script src="/static/bootstrap.js"></script> <script src="/static/echarts.js"></script> <script> //用於展現頁面的函數 function getList() { init_chart(); // 給予ecahrts的繪圖 $.getJSON('/userlist', function (res) { //請求userlist接口獲取數據 var str = ""; $.each(res, function (i, v) { str += "<tr>"; // str拼接出一個表格 str += "<td>" + v[0] + "</td>"; str += "<td>" + v[1] + "</td>"; str += '<td> <button data-name="' + v[0] + '" class="delete-btn">delete</button></td>' str += '<td> <button data-name="' + v[0] +'" data-age="'+ v[1] + '" class="edit-btn">edit</button></td>' str += "</tr>"; }); $('#user-list').html(str) //找到id 爲 user-list的設置他的html爲str }) } getList(); $(document).on('click','.delete-btn',function(){ //點擊delete按鈕的事件函數 var name = $(this).attr('data-name'); // 獲取點擊按鈕時 input標籤內data-name屬性的值，該值在上面的str拼接中設置了 $.get('/delete?name=' + name,function(res){ // 發生get請求 if (res == "ok"){ getList(); } }) }); var gName; $(document).on('click','.edit-btn',function(){ // 點擊edit按鈕的事件函數 var age = $(this).attr('data-age'); var name = $(this).attr('data-name'); $('#edit-age1').val(age); // 給id 爲 edit-age1 設置 列表中的 值 ，即模態對話框中設置值 $('#edit-name1').val(name); $('#edit-modal').modal('show'); // 顯示模態對話框 }); $("#add-button").on('click',function(){ //點擊添加按鈕的事件 var name = $('.user-input').val(); //獲取值 var age = $('.age-input').val(); gName = name; if(name && age){ // 輸入框有輸入name和age $.get('/add?name=' + name +'&age='+age,function(res){ //發生請求 if(res=='ok'){ $('.user-input').val(''); //添加成功把輸入框親空 $('.age-input').val(''); getList(); // 打印列表 } }) } else{ alert("please input username and age!"); // 輸入框中沒輸入name 或 age 直接 alter一個報錯 } }); // $(document).on('click','#save-age',function(res){ $('#save-age').on('click',function(){ // 模態對話框中修改值後點擊save的事件 var age = $('#edit-age1').val(); var name = $('#edit-name1').val(); $.get('/edit?name='+name+'&age='+age,function(res){ if (res == "ok"){ $("#edit-modal").modal('hide'); // 隱藏模態對話框 getList(); //顯示列表 } }) }); function init_chart() { // 封裝了echarts 的函數 $.getJSON('/chartdata', function (res) { var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 option = { title: { text: '用戶年齡分佈圖', subtext: 'auther：fanxuanhui', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: res.title //list }, series: [ { name: '年齡佔比', type: 'pie', radius: '55%', center: ['50%', '60%'], data: res.data, //list 中包含字典 itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); }) } </script> </body> </html>
MySQL數據：前端
最終效果圖：python