如何用Flask从HTML表单提交对象数组并生成指定JSON？

完全能通过Flask搭建一个简单的服务，从HTML表单收集神经网络层的配置参数，生成你需要的特定结构JSON。下面我给你拆解完整的实现方案：

1. Flask后端核心逻辑 #

首先我们需要编写Flask的路由，处理表单提交的POST请求，把表单数据整理成目标JSON结构，最后返回或保存结果。

from flask import Flask, render_template, request, jsonify, make_response
import json

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def network_config_generator():
    if request.method == 'POST':
        # 初始化存储层配置的数组
        network = []
        
        # 提取第一层参数并组装成对象
        layer1 = {
            "layer_type": request.form.get('layer1_type'),
            "num_filters": int(request.form.get('layer1_filters')),
            "kernel_size": int(request.form.get('layer1_kernel')),
            "padding": request.form.get('layer1_padding'),
            "stride": int(request.form.get('layer1_stride'))
        }
        network.append(layer1)
        
        # 提取第二层参数并组装成对象
        layer2 = {
            "layer_type": request.form.get('layer2_type'),
            "num_filters": int(request.form.get('layer2_filters')),
            "kernel_size": int(request.form.get('layer2_kernel')),
            "padding": request.form.get('layer2_padding'),
            "stride": int(request.form.get('layer2_stride'))
        }
        network.append(layer2)
        
        # 提取第三层参数并组装成对象
        layer3 = {
            "layer_type": request.form.get('layer3_type'),
            "num_filters": int(request.form.get('layer3_filters')),
            "kernel_size": int(request.form.get('layer3_kernel')),
            "padding": request.form.get('layer3_padding'),
            "stride": int(request.form.get('layer3_stride'))
        }
        network.append(layer3)
        
        # 生成最终的JSON结构
        result = {"network": network}
        
        # 可选：直接返回JSON响应，或者让浏览器下载JSON文件
        # 方式1：返回JSON响应
        # return jsonify(result)
        
        # 方式2：让浏览器下载JSON文件
        response = make_response(json.dumps(result, indent=2))
        response.headers["Content-Disposition"] = "attachment; filename=network_config.json"
        response.headers["Content-type"] = "application/json"
        return response
    
    # GET请求时返回表单页面
    return render_template('index.html')

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

2. HTML表单代码（templates/index.html） #

创建对应的表单页面，字段名要和后端提取参数的key一一对应，默认值也设置成你示例中的数值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Neural Network Config Generator</title>
    <style>
        .layer-group { margin: 20px 0; padding: 15px; border: 1px solid #eee; }
        label { display: inline-block; width: 180px; margin: 8px 0; }
    </style>
</head>
<body>
    <h1>Generate Neural Network Config JSON</h1>
    <form method="POST">
        <!-- 第一层配置 -->
        <div class="layer-group">
            <h3>Layer 1</h3>
            <div>
                <label>Layer Type:</label>
                <input type="text" name="layer1_type" value="conv2d" required>
            </div>
            <div>
                <label>Number of Filters:</label>
                <input type="number" name="layer1_filters" value="16" min="1" required>
            </div>
            <div>
                <label>Kernel Size:</label>
                <input type="number" name="layer1_kernel" value="2" min="1" required>
            </div>
            <div>
                <label>Padding:</label>
                <input type="text" name="layer1_padding" value="valid" required>
            </div>
            <div>
                <label>Stride:</label>
                <input type="number" name="layer1_stride" value="2" min="1" required>
            </div>
        </div>

        <!-- 第二层配置 -->
        <div class="layer-group">
            <h3>Layer 2</h3>
            <div>
                <label>Layer Type:</label>
                <input type="text" name="layer2_type" value="max_pool2d" required>
            </div>
            <div>
                <label>Number of Filters:</label>
                <input type="number" name="layer2_filters" value="16" min="1" required>
            </div>
            <div>
                <label>Kernel Size:</label>
                <input type="number" name="layer2_kernel" value="2" min="1" required>
            </div>
            <div>
                <label>Padding:</label>
                <input type="text" name="layer2_padding" value="valid" required>
            </div>
            <div>
                <label>Stride:</label>
                <input type="number" name="layer2_stride" value="2" min="1" required>
            </div>
        </div>

        <!-- 第三层配置 -->
        <div class="layer-group">
            <h3>Layer 3</h3>
            <div>
                <label>Layer Type:</label>
                <input type="text" name="layer3_type" value="conv2d" required>
            </div>
            <div>
                <label>Number of Filters:</label>
                <input type="number" name="layer3_filters" value="32" min="1" required>
            </div>
            <div>
                <label>Kernel Size:</label>
                <input type="number" name="layer3_kernel" value="3" min="1" required>
            </div>
            <div>
                <label>Padding:</label>
                <input type="text" name="layer3_padding" value="valid" required>
            </div>
            <div>
                <label>Stride:</label>
                <input type="number" name="layer3_stride" value="2" min="1" required>
            </div>
        </div>

        <button type="submit">Generate & Download JSON</button>
    </form>
</body>
</html>

3. 扩展优化小建议 #

• 如果需要支持动态添加/删除层，可以用JavaScript实现表单的动态增减，后端改成循环遍历所有提交的层参数（比如按layer_{n}_type的格式批量处理）。
• 可以添加表单验证逻辑，比如前端用JS检查数值合法性，或者后端用Flask-WTF做更严谨的校验。
• 如果不需要下载文件，直接返回JSON响应的话，注释掉代码里的下载逻辑，启用return jsonify(result)即可。

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