python - 使用 Flask Server 在网页中显示从 Google Firebase 导入的 json 数据

Question

我有以下 Python 代码，用于检索我在 Google Firebase 中保存的 json 数据。

from flask import Flask, render_template, json
from firebase import firebase




app = Flask(__name__)

@app.route('/')
def homepage():
    return render_template("main.html")


@app.route("/getData")
def getData():


    firebase = firebase.FirebaseApplication('https://my-firebase-db-958b1.firebaseio.com/', None)
    result = firebase.get('/Dublin-Ireland', None)
    print result
    print "\n"
    return result



if __name__ == "__main__":
    app.run()

以下是我存储在 Firebase 中的 json 数据的示例。

{"temperature": 
    {"-KoiWmZOUVfyK28p5Trf": 
        {"date": "10/07/2017", "time": "23:03:15", "value": 13}, 
    "-KoiWtBFzfBuLG9fvooE": 
        {"date": "10/07/2017", "time": "23:03:36", "value": 12},
    "-KoiWyErPjRXW61LDULf": 
        {"date": "10/07/2017", "time": "23:04:03", "value": 13}, 
    "-KoiX2Iu0jTK7NJGi86y": 
        {"date": "10/07/2017", "time": "23:04:24", "value": 13},
    "-KoiX7PFmqV9wiujEue5": 
        {"date": "10/07/2017", "time": "23:04:44", "value": 12},
    "-KoiXCe_iFl5VWIyaTp-": 
        {"date": "10/07/2017", "time": "23:05:05", "value": 20},
    "-KoiXEAw06xV58vuYwNe": 
        {"date": "10/07/2017", "time": "23:05:12", "value": 19},
    "-KoiXJDN82RRVAzxQXF8": 
        {"date": "10/07/2017", "time": "23:05:33", "value": 16},
    "-KoiXOHQmax8ywFmdi_i": 
        {"date": "10/07/2017", "time": "23:05:54", "value": 20},
    "-KoiXTKXqETu2QcysDqu": 
        {"date": "10/07/2017", "time": "23:06:14", "value": 10},
    "-KoiYzpYtbmmOD5FKHz_": 
        {"date": "10/07/2017", "time": "23:12:54", "value": 15},
    "-KoiZ9xbcCO75-uVt_wW": 
        {"date": "10/07/2017", "time": "23:13:39", "value": 11},
    "-KoiZF32ZjTGTWFi1amd": 
        {"date": "10/07/2017", "time": "23:14:00", "value": 10},
    "-KoiZJxbSjf5AANRjiU0": 
        {"date": "10/07/2017", "time": "23:14:20", "value": 13},
    "-KoiZYED510Clr8k2YKh": 
        {"date": "10/07/2017", "time": "23:15:19", "value": 11},
    "-KoiZk_q_xuNcrLGLh0z": 
        {"date": "10/07/2017", "time": "23:16:13", "value": 20},
    "-Koi_1zD7AUvd1r4YioA": 
        {"date": "10/07/2017", "time": "23:17:29", "value": 18}, 
    "-Koi_KKboiigBkXKFW9y": 
        {"date": "10/07/2017", "time": "23:18:44", "value": 15}
    }
}

我有另一个 Python 代码，在 Raspberry Pi 中运行，每 10 秒向 Firebase 发送一个随机温度数据。我的最终目标是能够使用我目前在本地运行的 Flask 服务器获取该数据并绘制图表。这段代码不应该只显示终端中打印的 json 数据吗？我做错了什么？

Answer 1

使用以下链接在 Flask 中设置网页

Setup webpage in flask 1

Setup webpage in flask 2

获取 json 数据后，在您的 Flask 服务器中添加 html 页面和 javascript 并尝试使用以下代码在图表中显示 json

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {

var data = {
	"temperature": {
		"-KoiWmZOUVfyK28p5Trf": {
			"date": "10/07/2017",
			"time": "23:03:15",
			"value": 13
		},
		"-KoiWtBFzfBuLG9fvooE": {
			"date": "10/07/2017",
			"time": "23:03:36",
			"value": 12
		},
		"-KoiWyErPjRXW61LDULf": {
			"date": "10/07/2017",
			"time": "23:04:03",
			"value": 13
		},
		"-KoiX2Iu0jTK7NJGi86y": {
			"date": "10/07/2017",
			"time": "23:04:24",
			"value": 13
		},
		"-KoiX7PFmqV9wiujEue5": {
			"date": "10/07/2017",
			"time": "23:04:44",
			"value": 12
		},
		"-KoiXCe_iFl5VWIyaTp-": {
			"date": "10/07/2017",
			"time": "23:05:05",
			"value": 20
		},
		"-KoiXEAw06xV58vuYwNe": {
			"date": "10/07/2017",
			"time": "23:05:12",
			"value": 19
		},
		"-KoiXJDN82RRVAzxQXF8": {
			"date": "10/07/2017",
			"time": "23:05:33",
			"value": 16
		},
		"-KoiXOHQmax8ywFmdi_i": {
			"date": "10/07/2017",
			"time": "23:05:54",
			"value": 20
		},
		"-KoiXTKXqETu2QcysDqu": {
			"date": "10/07/2017",
			"time": "23:06:14",
			"value": 10
		},
		"-KoiYzpYtbmmOD5FKHz_": {
			"date": "10/07/2017",
			"time": "23:12:54",
			"value": 15
		},
		"-KoiZ9xbcCO75-uVt_wW": {
			"date": "10/07/2017",
			"time": "23:13:39",
			"value": 11
		},
		"-KoiZF32ZjTGTWFi1amd": {
			"date": "10/07/2017",
			"time": "23:14:00",
			"value": 10
		},
		"-KoiZJxbSjf5AANRjiU0": {
			"date": "10/07/2017",
			"time": "23:14:20",
			"value": 13
		},
		"-KoiZYED510Clr8k2YKh": {
			"date": "10/07/2017",
			"time": "23:15:19",
			"value": 11
		},
		"-KoiZk_q_xuNcrLGLh0z": {
			"date": "10/07/2017",
			"time": "23:16:13",
			"value": 20
		},
		"-Koi_1zD7AUvd1r4YioA": {
			"date": "10/07/2017",
			"time": "23:17:29",
			"value": 18
		},
		"-Koi_KKboiigBkXKFW9y": {
			"date": "10/07/2017",
			"time": "23:18:44",
			"value": 15
		}
	}
}

 var getList = function() {
        var valueList = [];
        angular.forEach(data.temperature, function(values) {
            valueList.push([values.date+" "+values.time, values.value])
        });
        return valueList
    }



Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Temperature'
    },
    xAxis: {
        type: 'category',
        category:getList("date"),
        labels: {
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Temperature'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: 'Temperature: <b>{point.y:.1f}</b>'
    },
    series: [{
        name: 'Temperature',
        data: getList(),
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            format: '{point.y:.1f}', // one decimal
            y: 10, // 10 pixels down from the top
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    }]
});
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>

希望这对您有帮助。