已部署Codemirror（Python模式），如何执行代码并在页面展示结果？

嘿，作为刚上手CodeMirror的新手，能搞定Python模式部署已经很棒啦！要实现在同一页面执行代码并展示结果，得结合前端交互和后端的Python执行能力，我给你拆解成几个清晰的步骤：

CodeMirror本身只是个前端代码编辑器，没有执行代码的能力。所以核心逻辑是：前端把编辑器里的Python代码传给后端，后端运行代码后把输出/错误结果返回，前端再把结果展示在页面上。

先给你的页面加个运行按钮和结果容器，再写点JavaScript逻辑来处理代码提交和结果展示：

<!-- 假设你的CodeMirror编辑器容器是这个 -->
<textarea id="editor"></textarea>

<!-- 新增：运行按钮和结果展示区域 -->
<button id="runBtn" style="margin-top:10px; padding:6px 12px;">运行Python代码</button>
<div id="resultArea" style="margin-top:10px; padding:10px; border:1px solid #ddd; min-height:60px; background:#f8f8f8;"></div>

然后是JavaScript部分（和你的CodeMirror初始化代码放在一起）：

// 初始化你的CodeMirror（你已经设置了Python模式，这里简化写法）
const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
  mode: 'python',
  lineNumbers: true,
  theme: 'default' // 换成你用的主题就行
});

// 监听运行按钮点击事件
document.getElementById('runBtn').addEventListener('click', async () => {
  const userCode = editor.getValue();
  const resultArea = document.getElementById('resultArea');

  // 先清空结果区，显示加载状态
  resultArea.textContent = '代码正在执行中...';
  resultArea.style.color = '#333';

  try {
    // 把代码发送给后端接口
    const response = await fetch('/run-python-code', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ code: userCode })
    });

    const result = await response.json();

    // 根据后端返回的结果展示内容
    if (result.success) {
      resultArea.textContent = result.output;
    } else {
      resultArea.style.color = '#dc3545';
      resultArea.textContent = `执行出错：\n${result.error}`;
    }
  } catch (err) {
    resultArea.style.color = '#dc3545';
    resultArea.textContent = `请求失败：${err.message}`;
  }
});

这里用Flask举例子（轻量易上手，适合新手），你也可以用Django或其他后端框架：

首先安装Flask：

pip install flask

然后写后端代码（比如叫app.py）：

from flask import Flask, request, jsonify
import subprocess
import sys
import traceback

app = Flask(__name__)

@app.route('/run-python-code', methods=['POST'])
def execute_python():
    try:
        # 获取前端传来的代码
        req_data = request.get_json()
        user_code = req_data.get('code', '')

        # 用subprocess执行代码，捕获输出和错误
        # 设置超时，防止无限循环占用资源
        run_result = subprocess.run(
            [sys.executable, '-c', user_code],
            capture_output=True,
            text=True,
            timeout=5
        )

        if run_result.returncode == 0:
            # 代码执行成功，返回输出
            return jsonify({
                'success': True,
                'output': run_result.stdout
            })
        else:
            # 代码执行出错，返回错误信息
            return jsonify({
                'success': False,
                'error': run_result.stderr
            })
    except subprocess.TimeoutExpired:
        return jsonify({
            'success': False,
            'error': '代码执行超时，请检查是否有无限循环'
        })
    except Exception as e:
        # 捕获其他异常
        return jsonify({
            'success': False,
            'error': traceback.format_exc()
        })

if __name__ == '__main__':
    # 注意：生产环境不要用debug=True！
    app.run(host='0.0.0.0', port=5000, debug=True)

• 安全风险：直接执行用户输入的Python代码非常危险！如果是公开可访问的服务，一定要加沙箱隔离（比如用Docker容器、PyPy沙箱），禁止用户执行删除文件、访问敏感资源的操作。
• 资源限制：一定要设置执行超时，避免恶意代码占用服务器CPU和内存。
• 环境依赖：如果你的Python代码需要第三方库（比如numpy、requests），要确保后端环境已经安装好对应的包。
• 跨域问题：如果前端和后端不在同一域名/端口，需要在后端加跨域支持（Flask可以用flask-cors扩展）。

这样改完之后，点击页面上的「运行Python代码」按钮，就能在结果区看到代码的执行输出或者错误信息啦！

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