# Python程序设计

**Repository Path**: yan_jidao/python-programming

## Basic Information

- **Project Name**: Python程序设计
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-15
- **Last Updated**: 2026-05-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Python 网页课件 - Vue + FastAPI 交互式学习平台

一个面向 Python 编程教学的交互式网页课件系统，采用前后端分离架构，支持在线代码编写、执行和可视化教学。

## 项目概览

| 项目信息 | 说明 |
|---------|------|
| 项目名称 | Python Programming Courseware |
| 前端技术 | Vue 3 + Element Plus + CodeMirror 6 |
| 后端技术 | FastAPI + Uvicorn |
| 代码执行 | 后端沙箱 + subprocess |
| 目标用户 | Python 初学者、教学场景 |

## 目录结构

```
python网页课件/
├── frontend/                          # Vue 3 前端项目
│   ├── src/
│   │   ├── components/
│   │   │   └── CodeEditor.vue         # 代码编辑器组件 (CodeMirror 6)
│   │   ├── views/                     # 页面视图
│   │   │   ├── Home.vue               # 首页 - 课程导航
│   │   │   ├── ListLesson.vue         # 列表 (List) 课件
│   │   │   ├── TupleLesson.vue        # 元组 (Tuple) 课件
│   │   │   ├── SetLesson.vue          # 集合 (Set) 课件
│   │   │   └── DictLesson.vue         # 字典 (Dict) 课件
│   │   ├── utils/
│   │   │   └── editorSettings.js      # 编辑器设置管理
│   │   ├── App.vue                    # 根组件
│   │   ├── main.js                    # 入口文件
│   │   └── router.js                  # 路由配置
│   ├── .env                           # 环境变量
│   └── package.json
├── backend/                           # FastAPI 后端项目
│   ├── main.py                        # API 服务入口
│   └── requirements.txt               # Python 依赖
└── test/                              # 测试文件目录
```

## 技术栈详情

### 前端依赖

```json
{
  "vue": "^3.5.32",
  "vue-router": "^5.0.4",
  "element-plus": "^2.13.7",
  "@element-plus/icons-vue": "^2.3.2",
  "@codemirror/view": "^6.41.0",
  "@codemirror/state": "^6.6.0",
  "@codemirror/lang-python": "^6.2.1",
  "@codemirror/theme-one-dark": "^6.1.3",
  "@codemirror/commands": "^6.0.0",
  "axios": "^1.15.0",
  "vite": "^8.0.4"
}
```

### 后端依赖

```
fastapi==0.115.6
uvicorn==0.34.0
pydantic==2.10.4
```

## 快速开始

### 1. 后端启动

```bash
cd backend
pip install -r requirements.txt
python main.py
```

- API 服务: http://localhost:8000
- API 文档: http://localhost:8000/docs

### 2. 前端启动

```bash
cd frontend
npm install
npm run dev
```

- 前端服务: http://localhost:5173

### 3. 访问

浏览器打开 http://localhost:5173

## 功能特性

### 课程内容

| 课程 | 功能 | 说明 |
|-----|------|------|
| 列表 List | 概念 + 可视化 + 代码执行 + 测验 | 有序可变序列 |
| 元组 Tuple | 不可变性演示 + 转换操作 | 不可变有序序列 |
| 集合 Set | 集合运算 + Ven图可视化 | 无序不重复元素 |
| 字典 Dict | 键值对操作 + 遍历 | 键值映射结构 |

### 交互功能

- **代码编辑器**: CodeMirror 6，支持 Python 语法高亮
- **主题切换**: One Dark / 浅色主题
- **字体调整**: 12-24px 可选
- **在线执行**: 后端实时执行代码
- **可视化操作**: 列表增删改查动画展示
- **随堂测验**: 选择题即时反馈

## API 接口

### POST /execute

执行用户提交的 Python 代码

**请求**
```json
{
  "code": "print('Hello World')"
}
```

**响应**
```json
{
  "output": "Hello World\n",
  "has_error": false
}
```

**安全限制**
- 禁用模块: `os`, `sys`, `subprocess`
- 禁用函数: `__import__`, `eval`, `exec`, `open`, `input`
- 执行超时: 10 秒
- 建议生产环境使用 Docker 沙箱

## 开发指南

### 添加新课程

1. 创建视图文件 `frontend/src/views/NewLesson.vue`
2. 在 `router.js` 添加路由
3. 在 `App.vue` 添加菜单项

### 复用代码编辑器

```vue
<template>
  <CodeEditor :initial-code="'your python code'" />
</template>

<script setup>
import CodeEditor from '@/components/CodeEditor.vue'
</script>
```

### 课程页面结构

每个课程页面包含以下 Slide 配置：

```javascript
const slides = [
  {
    title: '章节标题',
    navLabel: '导航标签',
    concept: '概念说明（HTML格式）',
    table: { columns: [], data: [] },
    tip: { title: '', type: '', content: '' },
    code: 'Python 代码',
    visualization: true,
    quiz: { question: '', options: [] }
  }
]
```

## 环境变量

前端 `.env`:
```
VITE_API_BASE_URL=http://localhost:8000
```

## 项目特点

- 渐进式卡片式布局
- 渐变背景设计
- 响应式适配
- 代码高亮编辑器
- 实时执行反馈
- 交互式可视化

## 注意事项

> **安全警告**: 当前代码执行安全性为基础级别，仅适用于学习环境。

生产环境部署建议：
1. 使用 Docker 容器隔离
2. 限制可用内置模块
3. 添加更严格的代码审查
4. 限制执行时间和内存
5. 使用专业代码沙箱服务

## 相关文档

- [Element Plus 文档](https://element-plus.org/)
- [Vue 3 文档](https://vuejs.org/)
- [FastAPI 文档](https://fastapi.tiangolo.com/)
- [CodeMirror 6 文档](https://codemirror.net/)

## License

MIT License