如何在Flask中点击页面按钮执行Shell脚本并展示运行输出

1. 修改Flask后端代码（server.py） #

新增接口用于接收前端触发请求，执行Shell脚本并返回执行结果，修改后完整代码如下：

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

app = Flask(__name__)

@app.route("/")
@app.route("/home")
def home_page():
    return render_template('home.html')

@app.route("/main")
def main_page():
    return render_template('main.html')

# 新增执行脚本的接口
@app.post('/run-script')
def run_script():
    try:
        # 执行run.sh脚本，捕获标准输出和错误输出
        run_result = subprocess.run(
            ['./run.sh'],
            capture_output=True,
            text=True,
            check=True
        )
        return jsonify({
            "success": True,
            "output": run_result.stdout
        })
    except subprocess.CalledProcessError as e:
        return jsonify({
            "success": False,
            "output": e.stderr
        }), 500

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

2. 修改主页面模板（main.html） #

给按钮绑定点击事件，新增结果展示区域，请求后端接口后将输出渲染到页面，修改后完整代码如下：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Main Page</title>
  </head>
  <body>
    <div class="container mt-4">
        <button id="startBtn" class="btn btn-primary" type="button">Start</button>
        <!-- 结果展示区域 -->
        <div id="result" class="mt-3"></div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script>
        // 绑定按钮点击事件
        document.getElementById('startBtn').addEventListener('click', async () => {
            const resultBox = document.getElementById('result');
            resultBox.textContent = '脚本执行中，请稍候...';
            try {
                const resp = await fetch('/run-script', { method: 'POST' });
                const data = await resp.json();
                if (data.success) {
                    resultBox.innerHTML = `<h5>执行成功，输出结果：</h5><pre class="border p-2 bg-light">${data.output}</pre>`;
                } else {
                    resultBox.innerHTML = `<h5>执行失败，错误信息：</h5><pre class="border p-2 bg-light text-danger">${data.output}</pre>`;
                }
            } catch (err) {
                resultBox.innerHTML = `<h5>请求异常：</h5><pre class="border p-2 bg-light text-danger">${err.message}</pre>`;
            }
        })
    </script>
  </body>
</html>

注意事项 #

• 首次运行前需要给run.sh添加执行权限，在项目根目录执行命令：chmod +x run.sh
• 需确保main.py、run.sh的相对路径和Flask进程的工作目录匹配，避免出现找不到文件的报错
• 该方案仅适合本地测试使用，生产环境严禁直接暴露可执行系统命令的接口，会存在严重的命令注入安全风险

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