如何将Python Flask代码的输出展示到现有HTML网页而非仅控制台

首先明确你现有代码的两个核心问题：

• print() 仅会输出到服务端运行的控制台，不会传递给前端用户的浏览器
• /hello 路由内的 while True 死循环不符合HTTP请求的响应逻辑：HTTP是单次请求对应单次响应，不需要循环监听输入，前端每提交一次表单，服务端处理一次返回对应结果即可

修改后的Flask代码示例 #

from flask import Flask, render_template, request
import urllib.parse
import requests

app = Flask(__name__)
__author__ = 'kai'
# 注意此处需补全你自己的API接口地址和密钥
main_api = "你的API接口地址"
key = "你的API密钥"

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

@app.route('/hello', methods=['POST'])
def hello():
    # 初始化列表存储要返回给前端的输出内容
    output_lines = []
    orig = request.form['starting']
    dest = request.form['destination']
    
    # 移除原有死循环，单次处理前端提交的请求
    if orig in ("quit", "q") or dest in ("quit", "q"):
        output_lines.append("已退出查询")
        return render_template('index.html', output=output_lines)
    
    url = main_api + urllib.parse.urlencode({"key": key, "from": orig, "to":dest})
    output_lines.append(f"URL: {url}")
    json_data = requests.get(url).json()
    json_status = json_data["info"]["statuscode"]
    
    if json_status == 0:
        output_lines.append(f"API Status: {json_status} = 路线查询调用成功\n")
        output_lines.append("=============================================")
        output_lines.append(f"从 {orig} 到 {dest} 的路线信息")
        output_lines.append(f"行程时长: {json_data['route']['formattedTime']}")
        output_lines.append("-----------------不同单位的距离-----------------")
        output_lines.append(f"公里: {json_data['route']['distance']*1.61:.2f}")
        output_lines.append(f"英里: {json_data['route']['distance']}")
        output_lines.append(f"码: {json_data['route']['distance']*1760:.2f}")
        output_lines.append("-----------------不同单位的油耗-----------------")
        output_lines.append(f"油耗（升）: {json_data['route']['fuelUsed']*3.78:.2f}")
        output_lines.append(f"油耗（美制加仑）: {json_data['route']['fuelUsed']}")
        output_lines.append(f"油耗（英制加仑）: {json_data['route']['fuelUsed']*0.8327:.2f}")
        output_lines.append("=============================================")
        for each in json_data["route"]["legs"][0]["maneuvers"]:
            output_lines.append(f"{each['narrative']}（{each['distance']*1.61:.2f} 公里）")
            output_lines.append("=============================================\n")
    elif json_status == 402:
        output_lines.append("**********************************************")
        output_lines.append(f"状态码: {json_status}; 一个或两个地点输入无效")
        output_lines.append("**********************************************\n")
    elif json_status == 611:
        output_lines.append("**********************************************")
        output_lines.append(f"状态码: {json_status}; 一个或两个地点未填写内容")
        output_lines.append("**********************************************\n")
    else:
        output_lines.append("************************************************************************")
        output_lines.append("请重试")
        output_lines.append("************************************************************************\n")
    
    # 将收集到的所有输出内容传给index.html模板渲染
    return render_template('index.html', output=output_lines)

if __name__ == '__main__':
    app.run(host = '0.0.0.0', port = 3000)

对应前端index.html修改示例 #

在原有表单下方新增输出展示区域，用Jinja2语法遍历返回的output变量即可：

<!-- 原有表单代码 -->
<form action="/hello" method="POST">
  出发地：<input type="text" name="starting" placeholder="输入出发地或q退出">
  目的地：<input type="text" name="destination" placeholder="输入目的地或q退出">
  <button type="submit">查询路线</button>
</form>

<!-- 新增输出展示区域 -->
<div class="output-area">
  {% if output %}
    {% for line in output %}
      <p>{{ line }}</p>
    {% endfor %}
  {% endif %}
</div>

修改完成后重启服务，提交表单就能在网页上看到原来控制台输出的所有内容。

内容的提问来源于stack exchange，提问作者Tootsie