能否仅用Python/Flask与HTML实现无JavaScript的动态下拉表单应用？

当然可以！既然你已经掌握了Python/Flask和HTML，完全不需要JavaScript就能搞定这个需求——核心思路就是用Flask的服务器端渲染+表单提交的请求响应循环，替代前端JS的动态操作。下面是一步步的具体实现指引：

1. 核心逻辑梳理 #

先把整个流程拆解成服务器端能处理的步骤，每一步都通过表单提交触发页面刷新，动态生成后续内容：

• 第一步：用户访问初始页面，Flask读取指定根文件夹的子文件夹列表，渲染第一个下拉菜单
• 第二步：用户选择第一个文件夹并提交，Flask根据选中路径读取子内容（子文件夹/脚本），渲染包含已选路径+第二个下拉菜单的页面
• 第三步：用户选择第二个选项提交，Flask判断是子文件夹还是脚本：如果是文件夹则继续展示下一级选择；如果是脚本则渲染参数输入字段
• 第四步：用户填写参数后提交，Flask收集所有值，作为参数执行本地命令并返回结果

2. 具体代码实现示例 #

2.1 Flask 路由核心代码 #

from flask import Flask, render_template, request
import os
import subprocess

app = Flask(__name__)
# 替换成你要操作的根文件夹路径
ROOT_DIR = "/path/to/your/target/root/folder"

# 初始页面：展示第一级文件夹选择
@app.route('/', methods=['GET'])
def index():
    # 过滤出根目录下的所有文件夹
    folders = [
        f for f in os.listdir(ROOT_DIR)
        if os.path.isdir(os.path.join(ROOT_DIR, f))
    ]
    return render_template('index.html', folders=folders)

# 处理第一级文件夹选择，生成第二级选项
@app.route('/select-first', methods=['POST'])
def select_first():
    selected_path = request.form.get('first_folder')
    full_path = os.path.join(ROOT_DIR, selected_path)
    
    # 区分当前路径下的子文件夹和脚本（这里假设脚本是.sh/.py后缀，可按需调整）
    items = os.listdir(full_path)
    subfolders = [f for f in items if os.path.isdir(os.path.join(full_path, f))]
    scripts = [
        f for f in items 
        if os.path.isfile(os.path.join(full_path, f)) 
        and f.endswith(('.sh', '.py', '.bat'))
    ]
    
    return render_template('level_select.html',
                          current_path=selected_path,
                          subfolders=subfolders,
                          scripts=scripts)

# 处理多级文件夹/脚本的选择逻辑
@app.route('/select-next', methods=['POST'])
def select_next():
    current_path = request.form.get('current_path')
    selected_item = request.form.get('selected_item')
    full_path = os.path.join(ROOT_DIR, current_path, selected_item)
    
    # 验证路径合法性，防止目录遍历攻击
    if not os.path.abspath(full_path).startswith(os.path.abspath(ROOT_DIR)):
        return "非法路径访问", 403
    
    if os.path.isdir(full_path):
        # 如果是文件夹，继续展示下一级选项
        items = os.listdir(full_path)
        subfolders = [f for f in items if os.path.isdir(os.path.join(full_path, f))]
        scripts = [
            f for f in items 
            if os.path.isfile(os.path.join(full_path, f)) 
            and f.endswith(('.sh', '.py', '.bat'))
        ]
        return render_template('level_select.html',
                              current_path=f"{current_path}/{selected_item}",
                              subfolders=subfolders,
                              scripts=scripts)
    else:
        # 如果是脚本，渲染参数输入页面
        return render_template('param_input.html',
                              script_path=f"{current_path}/{selected_item}",
                              script_name=selected_item)

# 处理参数提交并执行脚本
@app.route('/run-script', methods=['POST'])
def run_script():
    script_path = request.form.get('script_path')
    param1 = request.form.get('param1')
    param2 = request.form.get('param2')  # 可按需增减参数数量
    
    full_script_path = os.path.join(ROOT_DIR, script_path)
    
    # 执行本地命令，用列表传参避免命令注入
    try:
        result = subprocess.run(
            [full_script_path, param1, param2],
            capture_output=True, text=True, check=True
        )
        output = result.stdout
        error_msg = ""
    except subprocess.CalledProcessError as e:
        output = e.stdout
        error_msg = e.stderr
    except Exception as e:
        output = ""
        error_msg = str(e)
    
    return render_template('result.html', output=output, error=error_msg)

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

2.2 HTML 模板示例 #

index.html（初始选择页面）

<!DOCTYPE html>
<html>
<head>
    <title>脚本执行工具</title>
</head>
<body>
    <h1>选择根文件夹</h1>
    <form action="/select-first" method="POST">
        <select name="first_folder" required>
            <option value="">请选择文件夹</option>
            {% for folder in folders %}
                <option value="{{ folder }}">{{ folder }}</option>
            {% endfor %}
        </select>
        <button type="submit">下一步</button>
    </form>
</body>
</html>

level_select.html（多级选择页面）

<!DOCTYPE html>
<html>
<head>
    <title>选择下一步</title>
</head>
<body>
    <h1>当前路径: {{ current_path }}</h1>
    <form action="/select-next" method="POST">
        <input type="hidden" name="current_path" value="{{ current_path }}">
        
        {% if subfolders %}
            <h3>子文件夹</h3>
            <select name="selected_item" required>
                {% for folder in subfolders %}
                    <option value="{{ folder }}">{{ folder }}</option>
                {% endfor %}
            </select>
        {% endif %}
        
        {% if scripts %}
            <h3>可用脚本</h3>
            <select name="selected_item" required>
                {% for script in scripts %}
                    <option value="{{ script }}">{{ script }}</option>
                {% endfor %}
            </select>
        {% endif %}
        
        <button type="submit">下一步</button>
    </form>
</body>
</html>

param_input.html（参数输入页面）

<!DOCTYPE html>
<html>
<head>
    <title>输入脚本参数</title>
</head>
<body>
    <h1>即将执行脚本: {{ script_name }}</h1>
    <form action="/run-script" method="POST">
        <input type="hidden" name="script_path" value="{{ script_path }}">
        
        <label for="param1">自定义输入参数:</label>
        <input type="text" id="param1" name="param1" required><br><br>
        
        <label for="param2">预设选项参数:</label>
        <select id="param2" name="param2" required>
            <option value="option_a">选项A</option>
            <option value="option_b">选项B</option>
            <option value="option_c">选项C</option>
        </select><br><br>
        
        <button type="submit">执行脚本</button>
    </form>
</body>
</html>

result.html（结果展示页面）

<!DOCTYPE html>
<html>
<head>
    <title>执行结果</title>
</head>
<body>
    <h1>脚本执行结果</h1>
    {% if output %}
        <h2>标准输出:</h2>
        <pre>{{ output }}</pre>
    {% endif %}
    {% if error %}
        <h2>错误信息:</h2>
        <pre style="color: red;">{{ error }}</pre>
    {% endif %}
    <a href="/">返回首页</a>
</body>
</html>

3. 关键注意事项 #

• 路径安全：一定要加路径合法性验证（比如示例里的os.path.abspath判断），防止用户通过输入../访问根目录外的内容
• 命令注入防护：永远用subprocess.run的列表形式传递参数，不要拼接字符串，避免恶意参数注入命令
• 权限问题：确保Flask运行的用户拥有目标文件夹的读取权限和脚本的执行权限
• 调试优化：开发时开启debug=True方便排查问题，生产环境务必关闭

整个流程完全依赖服务器端的表单提交和页面渲染，不需要任何JavaScript代码，完全符合你的需求。

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