weixin_47700403
weixin_47700403
2020-05-10 19:52
采纳率: 0%
浏览 310

用python+falsk+mysql+echarts做数据可视化时,运行时出现404,该怎么解决问题?

错误如下:
图片说明图片说明

代码app.py如下

from flask import Flask,render_template,url_for
import json
import pymysql
from flask_sqlalchemy import SQLAlchemy
from wsgiref.simple_server import make_server
from gevent import pywsgi
app = Flask(__name__)
#--------------------------------------------------------------------------------------------------------------------

#关联数据库建表
app.config['SQLALCHEMY_DATABASE_URI']='mysql+pymysql://root:12345678@127.0.0.1:5000/qiche'
app.config['SQLALCHEMY_TRACK_MODIFCATIONS'] = False
db = SQLAlchemy(app)


@app.route('/template')
def hello_world():
    return render_template('../template/index.html')
@app.route('/test',methods=['GET'])
#链接数据库
def my_test():
    connection = pymysql.connect(host='localhost',user='root',passwd='12345678',db='qiche',port=3306,charset='utf8')

    # 为qiche的数据开启一个游标cur
    cur=connection.cursor()

    #访问sqiche表中的所有数据
    sql = 'SELECT * FROM test'

    #执行sql中的语句,即获取student表中的所有数据
    cur.execute(sql)

    #将获取到的sql数据全部显示出来
    see = cur.fetchall()

    #定义需要用上的空数据数组,然后通过遍历数据库的数据将数据附上去
    yxiaoliang = []
    ypinpai = []
    ychengjiaojia = []
    xname = []
    ynianfen = []
jsonData = {}

#遍历qiche表中的所有数据,see绑定了sql(也就是qiche表中的所有数据),所以需要在see中遍历
for data in see :
    ypinpai.append(data[0])
    xname.append(data[1])#data[1]是指qiche表中第二列()的数据
    ynianfen.append(data[2])
    yxiaoliang.append(data[3])#data[2]是指qiche表中第三列()的数据
    ychengjiaojia.append(data[4])#data[3]是指qiche表中第四列()的数据


#将数据转化格式方便在HTML中调用
jsonData['yxiaoliang'] = yxiaoliang
jsonData['ypaipin'] = ypinpai
jsonData['ychengjiaojia'] = ychengjiaojia
jsonData['xname'] = xname
jsonData['ynianfen'] = ynianfen

j = json.dumps(jsonData)
cur.close()
connection.close()
return (j)

if name == '__main__':
#server = make_server('127.0.0.1', 5000, app)
#server = pywsgi.WSGIServer(('127.0.0.1', 5000), app)
#server.serve_forever()
app.run(debug=True)



index.html代码如下

```<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>汽车销售</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
      <!-- 引入 echarts.js -->
    <script src="../static/jquery.min.js"></script>
    <!-- 引入jquery.js -->
    <script src="../static/echarts.min.js"></script>

</head>
<body>
    <div id="main" style="width: 1800px;height: 900px;"></div>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var app={

         yxiaoliang : [],
         ypinpai : [],
         ychengjiaojia : [],
         xname : [],
         ynianfen : [],


    };
    $(document).ready(function () {
        getData();
        //console.log(app.legname1);
        console.log(app.yxiaoliang);
        console.log(app.ypinpai);
        console.log(app.ychengjiaojia);
        console.log(app.xname);
        console.log(app.ynianfen);

    });
    function  getData() {
        $.ajax({
            url:'/test',
            data:{},
            type:'POST',
            async:false,
            dataType:'json',
            success:function (data) {
                app.yxiaoliang = data.yxiaoliang;
                app.ypinpai = data.ypinpai;
                app.ychengjiaojia = data.ychengjiaojia;
                app.xname = data.xname;
                app.ynianfen = data.ynianfen;

                myChart.setOption({
                    title:{
                        text:'各品牌销售情况'
                    },
                    tooltip:{},
                    legend:{
                        data:['销量','成交价',]
                    },
                    xAxis:{
                        data: app.xname

                    },
                    yAxis:{
                        type:'value'
                    },
                    series:[{
                        name:'销量',
                        type: 'bar',
                        data:app.yxiaoliang
                    },
                        {
                            name:'成交价',
                            type:'line',
                            data:app.ychengjiaojia
                        },
                        ]
                });





            },
            error:function (msg) {
                console.log(msg);
                alert('系统错误');
            }
        })

    }
</script>

</body>
</html>


求大佬解决

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

相关推荐