如何使用Python / Flask在heroku中顯示index.html頁面

Question

我已經將我的第一個Python / Flask應用程序部署到了heroku。 該應用程序包含一個html頁面（例如index.html）和javascript函數，該函數可創建對以“ url”運行的python應用程序的查詢

function getDistance(position) {
                         url = 'http://127.0.0.1:5000/geodesicDistance';
                         query = position.coords.latitude.toString()+','+position.coords.longitude.toString();
                         $.get(url, {'q': query},function(data) {
                         $('#results .distance')[0].innerHTML = Math.round(data['result']['distance']*1000)/1000;

                         })
}

python應用接受查詢並返回結果

該應用程序實際上在http://geodesicdistance.herokuapp.com/上運行，但是我無法顯示根文件夾中的index.html頁面

Answer 1

您必須先在flask應用程序中創建路由，然后才能訪問index.html 。

您將需要類似：

from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route('/')
def geo_distance():
    return render_template('index.html')

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

然后，當您點擊http://geodesicdistance.herokuapp.com/ ，它將呈現index.html ，它將運行您的JS。

您還需要/geodesicDistance的路由。

PS，您在getDistance()函數中的url參數應該為/geodesicDistance getDistance()您不需要127.0.0.1:5000

Answer 2

我已經添加了路由並將上述Javascript中包含的URL修改為“ / geodesicDistance”。 現在正在渲染html頁面，但是我無法獲得距離值，就像沒有進行查詢一樣

app = Flask(__name__)

@app.route("/")
def renderIndex():
    return render_template("index.html")

@app.route("/geodesicDistance")
def geodesicDistance():
    query = parseQ(request.args)
    if query:
        position = geocodeAddress(query)
        if (position) and (len(position[u'results'])>0):
            lat = position[u'results'][0][u'geometry'][u'location'][u'lat']
            lng = position[u'results'][0][u'geometry'][u'location'][u'lng']
            response = createResponse(200,'Good query',lat,lng,position[u'results'][0]  [u'formatted_address'],getDistance(lat,lng))
        else:
            response = createResponse(400,'Bad formed query','','','','')
    else:
        response = createResponse(204,'No query     made',givenAddress['lat'],givenAddress['lng'],'White Bear Yard, 144a Clerkenwell Road,    London, EC1R 5DF, UK',0.0)                               
    http_response = make_response(json.dumps(response))
    http_response.headers['Content-type'] = 'application/json'
    http_response.headers['Access-Control-Allow-Origin'] = '*'
    return http_response

我的procfile看起來像這樣

web: gunicorn geodesicDistance:app