Flask如何根据字典动态生成带预填充功能的表单

范畴判断 #

这个需求完全属于动态表单生成的范畴，表单的字段数量、名称都由扫描docx得到的标签字典动态决定，无需提前在代码中写死固定字段。

实现方案 #

第一步：Flask后端路由编写 #

你可以直接把扫描得到的标签字典传入模板，提交时遍历字典获取用户输入的内容更新字典即可，示例代码如下：

from flask import Flask, render_template, request

app = Flask(__name__)

# 替换为你实际扫描docx获取标签字典的逻辑
def get_docx_tag_dict():
    return {
        '{{name}}':'John',
        '{{address}}':'',
        '{{zip}}':''
    }

@app.route('/fill_tags', methods=['GET', 'POST'])
def fill_tags():
    tag_dict = get_docx_tag_dict()
    # 处理表单提交
    if request.method == 'POST':
        for tag_key in tag_dict:
            # 用原字典的key从表单中取对应输入值，更新字典
            tag_dict[tag_key] = request.form.get(tag_key, '').strip()
        # 此处可添加后续逻辑，比如用更新后的tag_dict填充docx
        return "标签值更新完成"
    # GET请求渲染动态表单
    return render_template('tag_form.html', tag_dict=tag_dict)

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

第二步：模板页面编写 #

在项目templates目录下新建tag_form.html，通过Jinja2的循环遍历字典生成表单项，自动预填充已有值：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文档标签填充</title>
    <style>
        .form-item {margin: 12px 0;}
        label {display: inline-block; width: 120px;}
        input {padding: 4px; width: 280px;}
        button {padding: 6px 24px; margin-top: 10px;}
    </style>
</head>
<body>
    <h1>请填写文档所需标签值</h1>
    <form method="post">
        {% for tag_key, default_val in tag_dict.items() %}
        <div class="form-item">
            <!-- 显示标签名时可去除{{}}符号，更符合用户阅读习惯 -->
            <label>{{ tag_key.strip('{}') }}：</label>
            <input type="text" name="{{ tag_key }}" value="{{ default_val }}">
        </div>
        {% endfor %}
        <button type="submit">提交</button>
    </form>
</body>
</html>

可选优化点 #

• 如果需要支持多种输入类型（比如多行文本、日期、数字），可以在扫描标签时给特殊标签添加标识，模板中判断标识生成对应输入组件
• 如果需要做字段校验，可在表单提交后遍历每个值做规则校验，不符合要求时返回提示信息
• 如果字段数量较多，可以给表单加滚动区域或者分栏排版提升使用体验

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