如何使用 Python/Flask 在 Heroku 中显示 index.html 页面答案

【问题标题】：How to show index.html page in heroku using Python/Flask如何使用 Python/Flask 在 Heroku 中显示 index.html 页面
【发布时间】：2013-08-24 19:28:32
【问题描述】：

我已经将我的第一个 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 页面

【问题讨论】：

标签： javascript python html heroku flask

【解决方案1】：

我已经添加了路线并将上述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

【讨论】：

【解决方案2】：

您必须先在烧瓶应用中创建路线，然后才能点击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.，getDistance() 函数中的 url 参数应该是 /geodesicDistance - 你不需要 127.0.0.1:5000

【讨论】：