# Python学习平台项目用户端

**Repository Path**: wangs_knight/python-learning-platform-frontend-user

## Basic Information

- **Project Name**: Python学习平台项目用户端
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-22
- **Last Updated**: 2026-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Python学习平台 - 前端用户端

## 🚀 项目概述

Python学习平台的前端用户端，基于Vue 3 + Element Plus构建，提供现代化的用户界面，支持在线编程学习、练习管理、学习资料浏览等功能。

## 📐 技术栈

- **框架**: Vue 3 + Composition API
- **UI库**: Element Plus (简洁朴素风格)
- **状态管理**: Pinia
- **路由**: Vue Router 4
- **HTTP客户端**: Axios
- **代码编辑**: Monaco Editor

## 🎨 页面结构

### 核心页面
```
src/
├── components/
│   ├── common/          # 通用组件
│   │   ├── Header.vue   # 头部导航
│   │   ├── Footer.vue   # 底部
│   │   └── Loading.vue  # 加载组件
│   ├── exercises/       # 练习相关组件
│   │   ├── ExerciseCard.vue
│   │   ├── CodeEditor.vue
│   │   └── TestResult.vue
│   └── materials/       # 资料相关组件
│       └── MaterialCard.vue
├── views/
│   ├── Home.vue         # 首页
│   ├── Exercises.vue    # 练习列表
│   ├── ExerciseDetail.vue  # 练习详情
│   ├── Materials.vue    # 资料列表
│   ├── MaterialDetail.vue  # 资料详情
│   ├── Profile.vue      # 个人中心
│   ├── Login.vue        # 登录
│   └── Register.vue     # 注册
├── router/
│   └── index.js         # 路由配置
├── store/
│   ├── user.js          # 用户状态
│   ├── exercises.js     # 练习状态
│   └── materials.js     # 资料状态
├── api/
│   ├── user.js          # 用户API
│   ├── exercises.js     # 练习API
│   └── materials.js     # 资料API
└── utils/
    ├── request.js       # HTTP请求封装
    └── auth.js          # 认证工具
```

## 🌐 功能特性

### 🎯 核心功能
1. **用户系统**
   - 注册、登录、登出
   - 个人资料管理
   - 学习进度跟踪
   - 成就系统

2. **练习系统**
   - 练习列表浏览
   - 练习详情查看
   - 在线代码编辑
   - 提交代码运行
   - 测试结果展示

3. **学习资料**
   - 资料列表浏览
   - 资料详情阅读
   - 分类筛选
   - 点赞功能

4. **个人中心**
   - 学习进度查看
   - 成就展示
   - 提交记录查看
   - 个人资料编辑

### 🔧 技术特性
- **响应式设计**: 适配各种设备
- **前后端分离**: 独立开发，独立部署
- **实时反馈**: 支持实时数据更新
- **代码高亮**: Monaco Editor支持
- **路由管理**: Vue Router 4
- **状态管理**: Pinia

## 🚀 快速开始

### 1. 环境准备
```bash
# 检查Node.js版本
node --version
npm --version

# 安装依赖
npm install
```

### 2. 开发环境
```bash
# 启动开发服务器
npm run dev

# 服务将在 http://localhost:5173 启动
```

### 3. 生产环境
```bash
# 构建生产版本
npm run build

# 预览生产版本
npm run preview
```

## 🔧 配置说明

### 环境变量
在 `.env` 文件中配置：
```env
# API基础地址
VITE_API_BASE_URL=http://localhost:8000/api

# 应用标题
VITE_APP_TITLE=Python学习平台
```

### 代理配置
在 `vite.config.js` 中配置代理：
```javascript
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api')
      }
    }
  }
})
```

## 📊 页面展示

### 首页
- 热门练习推荐
- 最新学习资料
- 学习统计概览
- 快速导航

### 练习页面
- 练习列表展示
- 难度筛选
- 分类浏览
- 搜索功能

### 练习详情
- 题目描述
- 代码编辑器
- 提交运行
- 测试结果

### 资料页面
- 资料列表
- 分类筛选
- 阅读统计
- 点赞功能

### 个人中心
- 个人信息
- 学习进度
- 成就展示
- 提交记录

## 🎨 样式定制

### 主题配置
```javascript
// 在 main.js 中配置 Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
```

### 自定义样式
```css
/* 在 styles/index.css 中 */
:root {
  --primary-color: #409eff;
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
```

## 📱 响应式设计

### 断点配置
```css
/* 响应式断点 */
@media (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
}

@media (min-width: 769px) {
  .mobile-only {
    display: none;
  }
}
```

## 🔒 安全特性

- **XSS防护**: 输入内容过滤
- **CSRF保护**: Token验证
- **CORS配置**: 跨域请求控制
- **敏感信息保护**: 不在前端存储敏感数据

## 📝 开发日志

### v1.0.0 (2026-01-22)
- ✅ 完成前端用户端界面
- ✅ 实现用户认证系统
- ✅ 实现练习管理系统
- ✅ 实现学习资料系统
- ✅ 实现个人中心
- ✅ 集成Element Plus
- ✅ 配置Vue Router
- ✅ 配置Pinia状态管理
- ✅ 配置Axios请求

## 📞 技术支持

如有问题，请查看以下资源：
- [Vue.js文档](https://vuejs.org/)
- [Element Plus文档](https://element-plus.org/)
- [Vue Router文档](https://router.vuejs.org/)
- [Pinia文档](https://pinia.vuejs.org/)

## 📝 许可证

MIT License

Copyright (c) 2026 Python学习平台

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.