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

Question

我已經將第一個Python/Flask應用程序部署到了heroku。 該應用程序包括在HTML頁面，讓我們說的index.html，與創建查詢到Python應用程序在「URL」

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應用程序需要查詢運行，還給結果的javascript函數

的應用程序實際上是在http://geodesicdistance.herokuapp.com/運行，但我不能管理，以顯示index.html頁面是在根文件夾

Answer 1

您的燒瓶應用創建的路線，你可以打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。

P.S.，你url PARAM在getDistance()功能應該是/geodesicDistance - 你不需要127.0.0.1:5000

Answer 2

我已經添加了路由和修改包含在上面的JavaScript來「/ 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