# aiportal

**Repository Path**: guddle/aiportal

## Basic Information

- **Project Name**: aiportal
- **Description**: 开源的AI学习网站
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-07
- **Last Updated**: 2025-09-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI学习智能体门户 - 前后端分离架构

## 🏗️ 架构概述

本项目已成功重构为前后端分离架构：

- **后端**: Django + Django REST Framework (API服务)
- **前端**: Vue.js 3 + Element Plus (用户界面)

## 📁 项目结构

```
stuAgent/
├── ai_learning_portal/          # Django项目配置
├── users/                       # 用户管理应用
├── agents/                      # 智能体管理应用
├── learning/                    # 学习模块应用
├── knowledge/                   # 知识库应用
├── api_urls.py                  # API路由配置
├── frontend/                    # Vue.js前端项目
│   ├── src/
│   │   ├── components/         # Vue组件
│   │   ├── views/             # 页面视图
│   │   ├── stores/            # Pinia状态管理
│   │   ├── services/          # API服务
│   │   ├── router/            # 路由配置
│   │   └── styles/            # 样式文件
│   ├── package.json           # 前端依赖
│   ├── vite.config.js         # Vite配置
│   ├── demo.html              # 演示页面
│   └── index.html             # 入口页面
└── requirements.txt             # 后端依赖
```

## 🚀 快速启动

### 1. 启动后端服务

```bash
# 激活虚拟环境（已存在）
.\venv\Scripts\python.exe manage.py runserver 0.0.0.0:8000
```

### 2. 访问前端演示

打开浏览器访问：`frontend/demo.html` 文件

或者通过HTTP服务器访问：
```bash
cd frontend
python -m http.server 5173
# 然后访问 http://localhost:5173/demo.html
```

## 🔌 API接口

### 基础URL
```
http://localhost:8000/api/v1/
```

### 主要端点

#### 用户认证
- `POST /users/login/` - 用户登录
- `POST /users/register/` - 用户注册
- `POST /users/logout/` - 用户登出
- `GET /users/profile/` - 获取用户资料

#### 智能体管理
- `GET /agent-types/` - 获取智能体类型
- `GET /agents/` - 获取智能体列表
- `POST /agents/` - 创建智能体
- `GET /agents/{id}/` - 获取智能体详情
- `POST /agents/{id}/chat/` - 与智能体对话

#### 对话管理
- `GET /conversations/` - 获取对话列表
- `POST /conversations/` - 创建对话
- `GET /conversations/{id}/messages/` - 获取对话消息

## 🛠️ 技术栈

### 后端技术栈
- **框架**: Django 5.2.6
- **API**: Django REST Framework 3.16.1
- **数据库**: SQLite / PostgreSQL
- **认证**: Token Authentication
- **CORS**: django-cors-headers
- **AI集成**: OpenAI API

### 前端技术栈
- **框架**: Vue.js 3
- **UI组件**: Element Plus
- **状态管理**: Pinia
- **路由**: Vue Router 4
- **HTTP客户端**: Axios
- **构建工具**: Vite
- **样式**: SCSS

## 🔧 配置说明

### 后端配置（settings.py）

```python
# CORS配置
CORS_ALLOWED_ORIGINS = [
    'http://localhost:5173',  # Vite开发服务器
    'http://127.0.0.1:5173',
    'http://localhost:3000',  # Vue CLI开发服务器
    'http://127.0.0.1:3000',
]

# REST Framework配置
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
    ],
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.IsAuthenticated',
    ],
    'DEFAULT_RENDERER_CLASSES': [
        'rest_framework.renderers.JSONRenderer',
    ],
}
```

### 前端配置（vite.config.js）

```javascript
export default defineConfig({
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        secure: false
      }
    }
  }
})
```

## 📱 功能特性

### ✅ 已实现功能

1. **用户管理**
   - 用户注册/登录/登出
   - 用户资料管理
   - Token认证

2. **智能体管理**
   - 智能体CRUD操作
   - 智能体类型管理
   - AI对话接口

3. **前端界面**
   - 响应式设计
   - 现代化UI组件
   - 路由管理
   - 状态管理

### 🔄 API请求流程

1. **认证流程**
   ```
   前端登录 → 后端验证 → 返回Token → 前端保存Token → 后续请求携带Token
   ```

2. **数据交互**
   ```
   Vue组件 → Pinia Store → API Service → Axios → Django API → 数据库
   ```

## 🔐 安全配置

- Token认证机制
- CORS跨域配置
- 请求拦截器
- 错误处理机制

## 📊 演示页面功能

演示页面（demo.html）包含：

1. **后端连接测试** - 检测API服务状态
2. **用户认证演示** - 测试登录/注册接口
3. **智能体API演示** - 获取智能体数据
4. **技术栈展示** - 显示使用的技术

## 🚀 部署说明

### 开发环境
- 后端: `python manage.py runserver 0.0.0.0:8000`
- 前端: 访问 `frontend/demo.html` 或使用HTTP服务器

### 生产环境
- 后端: 使用Gunicorn + Nginx
- 前端: 构建静态文件部署到CDN

## 🔧 故障排除

### 常见问题

1. **CORS错误**
   - 检查 `settings.py` 中的 `CORS_ALLOWED_ORIGINS` 配置
   - 确保前端端口号正确

2. **认证失败**
   - 检查Token是否正确传递
   - 确认API端点是否需要认证

3. **404错误**
   - 检查URL路径是否正确
   - 确认API路由配置

## 📝 下一步开发

1. 完整的Vue.js应用构建
2. 智能体对话界面
3. 学习管理系统
4. 知识库管理
5. 数据可视化

---

**开发团队**: AI学习智能体门户项目组  
**更新时间**: 2024年9月6日