feat: 娣诲姞缃戦〉鐗堝簲鐢ㄥ拰鑳岃鎺掑簭鍔熻兘

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