【问题标题】:Flask: remembering variables + DOM manipulation throughout applicationFlask:在整个应用程序中记住变量 + DOM 操作
【发布时间】:2017-03-13 21:25:16
【问题描述】:

我正在开发一个包含大量输入的 Flask 应用程序。一些输入依赖于其他输入,因此有一些 DOM 操作来公开这些依赖的输入。我希望应用程序在用户返回时记住 DOM 状态,这样用户就不必重新输入所有内容。最好的方法是什么?

下面展示了我认为应该起作用的方法。我有一个带数字的输入框。还有一个按钮可以将相同的输入字段添加到 DOM。当用户单击提交时,这些输入将附加到input_list,并且列表会显示在 UI 上。因为input_list 是一个全局变量,所以应用程序会记住这些输入及其值(即使我返回浏览器或重新加载页面)——这就是我要寻找的。​​p>

同样,我不确定这是否是最好的方法。我知道flask.g 可用于存储应用程序全局变量,但我不确定这是正确的用例(我只看到用于存储数据库连接的用例)。我还听说 cookie 可能有助于记住 DOM 中的更改。任何想法/示例都会有所帮助,如果有人认为我的方式还可以,我将不胜感激下面对我的代码的反馈。

app.py:

@app.route('/input_page', methods=['GET', 'POST'])
def input_page():
    global input_list
    input_list = []
    if request.method == 'POST':
        if request.form.get('empty_list'):
            input_list = []
        elif request.form.get('submit_list'):
            input_list = [int(i) for i in request.form.getlist('x')]
    return render_template('input_page.html', input_list=input_list)

input_page.html:

<p>{{ input_list }}</p>

<form method="POST" action="/input_page">
  <div id="input_container">
    {% if input_list %}
      {% for i in input_list %}
        <input type="number" name="x" value="{{ input_list[loop.index0] }}">
      {% endfor %}
    {% else %}
      <input type="number" name="x">
    {% endif %}
  </div>
  <button type="button" id="add_input">Add Input</button>
  <input type="submit" value="Submit List" name="submit_list">
  <input type="submit" value="Empty List" name="empty_list">
</form>

<script>
  $(document).ready(function(){
    $('#add_input').click(function(){
      var $new_input = $('<input>', {type: 'number', name: 'x'});
      $('#input_container').append($new_input);
    });
  })
</script>

【问题讨论】:

  • 您的request.form 将仅包含有关已提交字段的信息。那么为什么不从request.form 中获取项目并将它们粘贴到生成的渲染 HTML 中呢?
  • 我不明白你的意思是什么?
  • request.form 是包含对 {'DOM_name': 'DOM_value'} 的 ImmutableDict。因此,如果您的表单中有任何带有属性name==&lt;some_name&gt; 的标签并且它具有一些值,那么您可以参考request.form.get('name') 在服务器端获取该值。稍后您可以将此值放入新生成的表单中。

标签: javascript jquery python dom flask


【解决方案1】:

您似乎走在正确的轨道上。但是,我会回避全局变量,因为这实质上会将变量暴露给其他并发客户端。但是,我建议使用 Flask session 对象:

from flask import Flask, session, ... # other flask modules you already have imported

然后在你的 Python 代码中,你会使用:

def input_page():
    if request.method == 'POST':
        if request.form.get('empty_list'):
            session['input_list'] = []
        elif request.form.get('submit_list'):
            session['input_list'] = [int(i) for i in request.form.getlist('x')]
    input_list = session.get('input_list', False)  # create an input_list var that either grabs the 'input_list' object from the session object or defaults to False if no key found
    return render_template('input_page.html', input_list=input_list)

【讨论】:

  • 正是我正在寻找的谢谢。我是否需要登录/注销系统才能使用会话(这就是我过去见过的)?还是烧瓶只是为它看到的每个新浏览器创建一个新的会话对象(看起来它以某种方式使用密钥)
  • 不需要用户身份验证。会话受客户端约束。 :)
  • 我如何在我的 jinja 模板中访问session['input_list']?是{{ session.input_list }}吗?
  • 这取决于您在render_template 中传递给上下文变量的内容。在我编写的示例中,我只是使用了input_list = session.get('input_list', False),它本质上将会话的 input_list 对象分配给了input_list 变量,然后在我的render_template 中,我将input_list 传递给了模板的input_list 上下文变量。因此,为了访问 jinja 端的上下文变量,您可以简单地用{{ input_list }} 抓取它。您的 input_page.html 页面应该足以处理我在示例中所写的内容。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-03-15
  • 1970-01-01
  • 1970-01-01
  • 2014-01-07
  • 2017-08-15
  • 2016-12-13
  • 1970-01-01
相关资源
最近更新 更多