- 鍒涘缓Flask缃戦〉搴旂敤妗嗘灦(web_app.py) - 娣诲姞鑳岃鎺掑簭鍔熻兘锛氱煡璇嗙偣璇嗗埆鍜岄殢鏈烘帓搴?- 瀹炵幇杞洏鎶借儗鍔熻兘(鍩轰簬SVG) - 鍒涘缓鍓嶇椤甸潰锛氶椤靛拰鑳岃鎺掑簭椤甸潰 - 娣诲姞鍝嶅簲寮廋SS鏍峰紡 - 鍒涘缓鍚姩鑴氭湰(start_web.py) - 鏇存柊requirements.txt娣诲姞Flask渚濊禆 - 娣诲姞缃戦〉鐗堜娇鐢ㄨ鏄?README_WEB.md)
3.2 KiB
3.2 KiB
网页版使用说明
功能介绍
这是一个基于Flask的网页应用,提供了背诵排序功能,可以帮助你:
- 识别知识点:从输入的文本中自动识别出要背诵的知识点
- 随机排序:对识别出的知识点进行随机排序
- 转盘抽背:通过转盘功能随机选择背诵内容
快速开始
1. 安装依赖
pip install Flask>=3.0.0
或者安装所有依赖:
pip install -r requirements.txt
2. 启动应用
运行启动脚本:
python start_web.py
或者直接运行:
python web_app.py
3. 访问应用
在浏览器中打开:
使用步骤
第一步:输入背诵内容
在文本框中粘贴包含知识点列表的文本,支持以下格式:
- 列表格式(数字开头)
- 表格格式(从表格中复制)
- 普通文本(每行一个知识点)
示例:
第一章 西周
夏商学校名称
西周学在官府
国学乡学
六艺
私学兴起的原因与意义
稷下学宫
第二步:识别知识点
点击"识别知识点"按钮,系统会自动:
- 过滤无关内容(表头、页码等)
- 提取有效的知识点
- 显示识别结果
第三步:随机排序
点击"开始随机排序"按钮,系统会:
- 对知识点进行随机打乱
- 生成随机排序列表
- 创建转盘界面
第四步:转盘抽背
点击"转动转盘"按钮:
- 转盘会旋转3圈后停下
- 随机选中一个知识点
- 显示选中的内容
同时,页面下方会显示完整的随机排序结果列表。
技术说明
后端技术
- Flask:轻量级Web框架
- Python正则表达式:文本解析和知识点提取
前端技术
- HTML5 + CSS3:响应式页面设计
- JavaScript (原生):交互逻辑
- SVG:转盘可视化
知识点识别规则
系统会智能识别以下内容:
- 以数字或章节号开头的行(如"第一章"、"1. 知识点")
- 以列表符号开头的行(如"- 知识点"、"? 知识点")
- 包含中文且非空的行
系统会自动过滤:
- 表头行(包含"章节"、"知识点"等关键词)
- 页码行(如"第1页")
- 说明文字
- 空行
API接口
提取知识点
POST /api/extract
请求体:
{
"text": "输入文本内容"
}
响应:
{
"success": true,
"items": ["知识点1", "知识点2", ...],
"count": 2
}
随机排序
POST /api/sort
请求体:
{
"items": ["知识点1", "知识点2", ...]
}
响应:
{
"success": true,
"items": ["知识点2", "知识点1", ...],
"count": 2
}
目录结构
diet_recommendation_app/
├── web_app.py # Flask应用主文件
├── start_web.py # 启动脚本
├── templates/ # HTML模板
│ ├── index.html # 首页
│ └── recitation.html # 背诵排序页面
├── static/ # 静态资源
│ ├── css/
│ │ ├── style.css # 通用样式
│ │ └── recitation.css # 背诵排序页面样式
│ └── js/
│ └── recitation.js # 前端交互逻辑
└── logs/ # 日志文件
└── web_app.log
注意事项
- 首次运行会自动创建必要的目录(templates、static、logs)
- 建议在本地环境中使用,如需公网访问请配置防火墙和反向代理
- 日志文件保存在
logs/web_app.log
故障排除
问题:无法启动应用
解决方案:
- 检查Flask是否已安装:
pip list | grep Flask - 检查端口5000是否被占用
- 查看日志文件
logs/web_app.log
问题:无法识别知识点
解决方案:
- 确保输入文本格式正确
- 尝试手动整理文本,每行一个知识点
- 检查是否包含特殊字符
问题:转盘不显示或旋转异常
解决方案:
- 检查浏览器是否支持SVG
- 清除浏览器缓存
- 使用现代浏览器(Chrome、Firefox、Edge等)