Flask运行时HTML第40行提交的name值无法正常显示问题求助

核心问题点 #

你的代码存在5个直接导致渲染失败的问题：

• 调用render_template时未向模板传递任何变量，模板中写的{{ player }}没有对应数据源，自然无法渲染内容
• 多余定义了嵌套函数add_player()，player是该函数的内部局部变量，函数执行结束后就会被销毁，外层路由逻辑完全访问不到这个变量，属于无效代码
• 未配置SECRET_KEY，Flask的flash消息功能依赖签名会话存储，不配置该参数flash调用会直接报错
• Python代码存在缩进错误：if len(name) < 1:行多了一级缩进、return render_template(...)行缩进层级错误，运行时会直接触发语法错误
• 现有逻辑没有存储历史提交的选手，就算单条选手传值成功，新增选手时之前提交的内容也会丢失，且单变量无法支持多选手展示需求

修正后可运行代码 #

Flask 后端代码（app.py） #

from flask import Flask, render_template, request, flash

app = Flask(__name__)
# 练习环境可随意填写字符串作为SECRET_KEY，生产环境需要替换为复杂随机值
app.config['SECRET_KEY'] = 'practice_flask_key_2024'
# 练习阶段暂用全局列表存储所有提交的选手，后续学习数据库后可替换为持久化存储
player_list = []

@app.route('/', methods=['POST', 'GET'])
def home():
    if request.method == 'POST':
        # 取表单值时加strip()去掉首尾空格，过滤全空格的无效输入
        name = request.form.get('name', '').strip()
        if len(name) < 1:
            flash('name is too short', category='error')
        else:
            player_list.append(name)
            flash('player added', category="success")
    # 无论GET/POST请求，都将选手列表传入模板
    return render_template("index.html", players=player_list)

if __name__ == "__main__":
    app.run(debug=True)

HTML 模板代码（templates/index.html） #

{% block content %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link 
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymus"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      crossorigin="anonymus"
    />
    <link rel="stylesheet" href="static/main.css" />
    
    <title>Team Players</title>

</head>

<body>
    <div class="firstdiv">
      <h1>Add Team Players</h1>
      <!-- 渲染flash提示消息 -->
      {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
          {% for category, message in messages %}
            <div class="alert alert-{{ category }}">{{ message }}</div>
          {% endfor %}
        {% endif %}
      {% endwith %}
    </div>
    <form method="POST">
        <input type="text" name="name" id="name" placeholder="Enter your name" />
        <br />
        <div align="relative">
          <button type="submit" class="btn btn-primary">Show Down</button>
        </div>
    </form>
    <div class="center">
        <p>Current Team</p>
    
        <ul class="list-group list-group-flush" id="players">
            <!-- 遍历传入的选手列表，逐行渲染选手名称 -->
            {% for player in players %}
            <li class="list-group-item">
              {{ player }}
            </li>
            {% endfor %}
        </ul>
    </div>
</body>
</html>
{% endblock %}

排查注意要点 #

• Jinja2模板中能访问的变量，必须在render_template调用时以关键字参数形式传入，格式为render_template(模板文件名, 模板中使用的变量名=Python中对应的变量值)，未传入的变量模板无法读取
• 路由逻辑中不要写无意义的嵌套函数，嵌套函数内的变量默认作用域仅限函数内部，外层无法访问
• Python是缩进敏感语言，同一代码块的缩进必须保持一致，否则会触发缩进语法错误
• 多条目类的展示需求不要用单个变量存储数据，用列表等可迭代结构存储后，在模板中通过{% for 临时变量 in 列表 %}循环渲染即可
• 表单获取用户输入时建议加.strip()处理，过滤用户误输入的首尾空格、全空格等无效内容

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