HTML 中未显示 Flask 变量

Question

我有一个小烧瓶应用程序，我正在使用它来：

制作一个带有传单地图的HTML页面
从 HTML 页面获取用户输入...
运行使用某些 python 模块对该输入进行计算
Return页面中那些变量给JS函数填充地图

除了 lat 和 lng 到 return 我的 HTML {{}}烧瓶变量。

这是我的 HTML 页面：

<!DOCTYPE html>
<html lang="en">
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
     integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
     crossorigin=""/>
     <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
  integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
  crossorigin="">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<title>Page Title</title>
    <meta charset="utf-8"/>
<style>
#mapid { height: 300px; }
</style>


<body>

<form method="POST">
Latitude to PY: <input name="lat" id="lat"/>
<br/>
Longitude to PY: <input name="lng" id="lng"/>
 <br/>
 <button>Get data</button>
 </form>

{% if lat1 != None and lng1 != None %}
{{lat1}},{{lng1}}
<script>
var lat1 = {{lat1}}
var lng1 = {{lng1}}
</script>
{% endif %}

{% if point != None %}
<p>{{point}}</p>
{% endif %}

{% if GeJ != None %}
{{GeJ}}
<script>
var GeJ = {{GeJ}}
</script>
{% endif %}

<div id="mapid"></div>
     <script>
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
     attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
     maxZoom: 18,
     id: 'mapbox.high-contrast',
     accessToken: 'pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ'
    }).addTo(mymap);

    function zoomTo() {
    mymap.panTo(new L.LatLng(lat1, lng1));
                      }

    function addGJ(){
      var myLayer = L.geoJson(GeJ).addTo(mymap);
                    }
    window.onload = zoomTo();
    window.onload = addGJ();
     </script>
</body>
</html>

这是我的 Flask Python 代码：

from flask import Flask, render_template, request, flash, redirect, url_for,jsonify
from forms import RegistrationForm
import json
import osmnx as ox
import networkx as nx
import matplotlib.pyplot as plt
from networkx.readwrite import json_graph
import pandas as pd
import mplleaflet
app = Flask(__name__)

app.config.update(dict(
    SECRET_KEY="powerful secretkey",
    WTF_CSRF_SECRET_KEY="a csrf secret key"
))
@app.route('/')
def my_form():
    return render_template('map.html')

@app.route('/', methods=['GET', 'POST'])
def my_form_post():
    lat = (request.form['lat'])
    lng = (request.form['lng'])
    lat = lat
    lng = lng
    point = (lat,lng)
    G = ox.core.graph_from_point(point, distance = 500, network_type='walk')
    fig, ax = ox.plot_graph(G)
    GJ = mplleaflet.fig_to_geojson(fig=ax.figure)
    #return lat, ",", lng
    return render_template('map.html', lat1=lat, lng1=lng, GeJ=GJ, point="test_string")`



if __name__ == "__main__":
    app.run(host='0.0.0.0',port=5000,debug=True)

Flask 应用程序运行良好，因此文件结构不是问题。我只是无法将 return 的任何其他变量放入我的 HTML 中。我什至尝试制作除真实变量之外的小字符串虚拟变量。没有骰子。

谢谢

Answer 1

您可以尝试使用内置 none 值 http://jinja.pocoo.org/docs/templates/#none

然后做类似的事情：

{% if lat1 is not none and lng1 is not none %}

Answer 2

<!DOCTYPE html>
<html lang="en">
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
     integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
     crossorigin=""/>
     <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
  integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
  crossorigin="">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<title>Page Title</title>
    <meta charset="utf-8"/>
<style>
#mapid { height: 300px; }
</style>


<body>

<form method="POST">
Latitude to PY: <input name="lat" id="lat"/>
<br/>
Longitude to PY: <input name="lng" id="lng"/>
 <br/>
 <button>Get data</button>
 </form>

{% if lat1 is not Null and lng1 is not Null %}
{{lat1}},{{lng1}}
<script>
var lat1 = {{lat1}}
var lng1 = {{lng1}}
</script>
{% endif %}

{% if point != None %}
<p>{{point}}</p>
{% endif %}

{% if GeJ != None %}
{{GeJ}}
<script>
var GeJ = {{GeJ}}
</script>
{% endif %}

<div id="mapid"></div>
     <script>
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
     attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
     maxZoom: 18,
     id: 'mapbox.high-contrast',
     accessToken: 'pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ'
    }).addTo(mymap);

    function zoomTo() {
    mymap.panTo(new L.LatLng(lat1, lng1));
                      }

    function addGJ(){
      var myLayer = L.geoJson(GeJ).addTo(mymap);
                    }
    window.onload = zoomTo();
    window.onload = addGJ();
     </script>
</body>
</html>

Answer 3

如果您提供一个示例来说明当您传递所有值时到底发生了什么，将会有所帮助。

否则，根据 me，可能导致问题的原因是 python 中的 'Null' 对象是单例 None .检查 "Noneness" 的最佳方法是使用 is not None 或更好的方法，简单如：

{%if lat%} {{lat}} {% endif %}

还有，能不能把GeJ赋值给div里面的var GeJ，而不是硬生生的在上面放一行JS？

P.S。我想将此添加为评论，但没有足够的声誉。抱歉。

HTML 中未显示 Flask 变量

Flask variables not showing up in HTML

html

python

geojson

flask

flask-wtforms