javascript - 使用 Flask 在 HTML/JS 上渲染 SQL 数据

Question

我创建了一个简单的 Web 应用程序，旨在从 SQL 数据库中提取数据(特别是美国的森林火灾事件和相关元数据)。我可以使用flask/sqlite3 在Python 中查询数据库并打印与查询匹配的元组的结果列表。但是，我不熟悉如何获取结果列表并将其动态呈现在谷歌地图上。因此，对于返回的每条记录，都会有一个带有纬度/经度的标记，然后是一个显示元数据的对话框。

相关片段:

@app.route('/results', methods=['POST'])
def results():
    form_input = {
        'start_date': request.form['yearfrom'] + '-' + request.form['monthfrom'] + '-' + request.form['dayfrom']
                      + 'T00:00:00',
        'end_date': request.form['yearto'] + '-' + request.form['monthto'] + '-' + request.form['dayto']
                      + 'T00:00:00',
        'state': request.form['state'],
        'fire_size': request.form['size']
    }
    # Stores only query terms without blank values
    query_terms = {k: v for k, v in form_input.items() if v != 'blank' and k != 'start_date' and k != 'end_date'}

    query_string = 'SELECT latitude,longitude, fire_name, discovery_date, stat_cause_descr, fire_size, state FROM fires' \
                   ' WHERE ' + " ".join(["%s='%s' and" % (key, value) for (key, value)
                    in query_terms.items()]) + ' discovery_date BETWEEN ' + "'%s'" % form_input['start_date'] \
                   + ' and ' + "'%s'" % form_input['end_date']

    query = query_db(query_string, one=False)
    pp.pprint(query)
    return render_template('results.html', fire_name=query[0]['fire_name'])

打印“查询”返回:

[   {   'discovery_date': '2013-01-01T00:00:00',
        'fire_name': 'VOYAGER',
        'fire_size': 0.1,
        'latitude': 34.56083333,
        'longitude': -118.67833333,
        'stat_cause_descr': 'Equipment Use',
        'state': 'CA'},
    {   'discovery_date': '2013-01-01T00:00:00',
        'fire_name': 'MIDDLE',
        'fire_size': 1.0,
        'latitude': 33.077,
        'longitude': -111.75919,
        'stat_cause_descr': 'Arson',
        'state': 'AZ'},
    {   'discovery_date': '2013-01-01T00:00:00',
        'fire_name': 'GLACIER 13',
        'fire_size': 0.5,
        'latitude': 47.624939,
        'longitude': -103.415214,
        'stat_cause_descr': 'Miscellaneous',
        'state': 'ND'},

因此检索正在按预期进行。我知道在 return 语句中我需要指定在 html 上呈现哪些术语...我只是不确定如何迭代所有返回的记录以显示每个记录的一个标记。我将非常感谢一些指导。

Answer 1

不要将一个结果传递给模板，而是传递整个集合。然后使用Jinja blocks to loop超过结果。

return render_template(template, fires=query)

仅打印每个火灾名称的基本示例:

{% for fire in fires %}
    {{ fire['fire_name'] }}
{% endfor %}

如果您已经有一个 JSON 兼容集合并且需要将 JSON 传递给 JavaScript 代码，您可以使用一些 built in Jinja filters .

var fires = {{ fires|tojson|safe }};

<小时/>

无关，您的查询现在容易受到注入(inject)攻击。您应该使用parameterized queries，而不是使用字符串格式来插入用户输入。 .

query = 'select * from user where username = ?'
result = cursor.execute(query, ('davidism',))

更强大的解决方案是使用 Flask-SQLAlchemy或另一个 ORM，将表映射到类并使用函数而不是字符串构建查询。

<小时/>

无关紧要的是，通过使用表单库(例如 Flask-WTF)，您可以更轻松地处理表单数据。 ，它将呈现表单，并为您验证和转换输入。