# mydoAnswer-front

**Repository Path**: haoxiaolan/mydo-answer-front

## Basic Information

- **Project Name**: mydoAnswer-front
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-03
- **Last Updated**: 2026-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 答题班级管理系统

基于 Vue3 + Vite + TDesign + Pinia + Vue Router + Axios 构建的答题班级管理系统

## 项目创建步骤

```bash
# 1. 创建项目目录
mkdir mydoAnswer-front
cd mydoAnswer-front

# 2. 初始化项目（已创建 package.json）

# 3. 安装依赖
npm install
```

## 依赖版本说明

```json
{
  "dependencies": {
    "vue": "^3.4.0",
    "vue-router": "^4.2.5",
    "pinia": "^2.1.7",
    "pinia-plugin-persistedstate": "^3.2.1",
    "axios": "^1.6.2",
    "tdesign-vue-next": "^1.9.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0",
    "vite": "^5.0.0"
  }
}
```

## 项目目录结构

```
mydoAnswer-front/
├── public/
├── src/
│   ├── api/              # API 接口模块
│   │   ├── auth.js       # 认证相关接口
│   │   ├── class.js      # 班级相关接口
│   │   └── quiz.js       # 答题相关接口
│   ├── components/       # 公共组件
│   │   ├── LayoutHeader.vue    # 顶部导航组件
│   │   └── LayoutSidebar.vue   # 侧边栏组件
│   ├── router/           # 路由配置
│   │   └── index.js      # 路由主文件
│   ├── stores/           # Pinia 状态管理
│   │   ├── user.js       # 用户状态
│   │   └── class.js      # 班级状态
│   ├── styles/           # 全局样式
│   │   └── index.css     # 主样式文件
│   ├── utils/            # 工具函数
│   │   └── request.js   # Axios 封装
│   ├── views/            # 页面组件
│   │   ├── Login.vue           # 登录页
│   │   ├── Register.vue        # 注册页
│   │   ├── Home.vue             # 主页布局
│   │   ├── Dashboard.vue        # 仪表盘
│   │   ├── Classes.vue          # 班级管理
│   │   ├── Quiz.vue             # 答题列表
│   │   ├── QuizDetail.vue       # 答题详情
│   │   ├── Records.vue          # 答题记录
│   │   ├── Profile.vue          # 个人中心
│   │   └── NotFound.vue         # 404 页面
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── index.html            # HTML 模板
├── package.json          # 项目配置
└── vite.config.js        # Vite 配置
```

## 项目运行指令

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview
```

## 核心功能使用说明

### 默认测试账号

项目已集成 Mock 数据，可以使用以下账号进行测试：

**教师账号：**
- 用户名：`teacher`
- 密码：`123456`
- 角色：教师（可以创建班级、创建试卷）

**学生账号：**
- 用户名：`student`
- 密码：`123456`
- 角色：学生（可以加入班级、答题）

**班级代码（用于加入班级）：**
- 班级代码：`CLASS001`

### 1. 用户认证

- **登录**: 访问 `/login` 页面，输入用户名和密码
- **注册**: 访问 `/register` 页面，填写注册信息
- **退出登录**: 点击顶部导航栏用户头像，选择"退出登录"

### 2. 班级管理

- **创建班级** (教师权限): 访问"班级管理"页面，点击"创建班级"按钮
- **加入班级** (学生权限): 访问"班级管理"页面，点击"加入班级"按钮，输入班级代码
- **查看班级**: 在班级列表中点击"查看"按钮查看班级详情

### 3. 答题功能

- **答题列表**: 访问"答题"页面查看所有可答题试卷
- **开始答题**: 点击试卷的"开始答题"按钮进入答题页面
- **答题详情**: 支持单选题、多选题、填空题，答题后可提交查看结果
- **答题记录**: 访问"答题记录"页面查看历史答题记录

### 4. 个人中心

- **修改密码**: 在个人中心页面可以修改登录密码
- **学习统计**: 查看个人答题统计数据

## 第三方依赖配置说明

### TDesign UI 组件库

- **全局引入**: 在 `main.js` 中全局引入 TDesign 组件库
- **使用方式**: 直接在组件中使用 `<t-button>`, `<t-input>` 等组件

### Axios 网络请求

- **请求拦截器**: 自动在请求头中添加 token
- **响应拦截器**: 统一处理响应数据和错误信息
- **错误处理**: 401 自动跳转登录页，其他错误显示提示信息

### Pinia 状态管理

- **用户状态** (`user.js`): 管理用户登录信息、token、用户信息
- **班级状态** (`class.js`): 管理班级列表、当前班级信息
- **持久化**: 使用 `pinia-plugin-persistedstate` 实现状态持久化到 localStorage

### Vue Router 路由管理

- **路由守卫**: 未登录用户自动跳转到登录页
- **权限控制**: 登录后用户不能访问登录/注册页
- **页面标题**: 自动设置页面标题

## API 接口说明

### 认证接口 (`/api/auth`)

- `POST /auth/login` - 用户登录
- `POST /auth/register` - 用户注册
- `POST /auth/logout` - 用户登出
- `GET /user/info` - 获取用户信息

### 班级接口 (`/api/class`)

- `GET /class/list` - 获取班级列表
- `POST /class/create` - 创建班级
- `POST /class/join` - 加入班级
- `GET /class/:id` - 获取班级详情
- `GET /class/:id/students` - 获取班级学生列表

### 答题接口 (`/api/quiz`)

- `GET /quiz/list` - 获取答题列表
- `GET /quiz/:id` - 获取答题详情
- `POST /quiz/submit` - 提交答题
- `GET /quiz/:id/result` - 获取答题结果
- `POST /quiz/create` - 创建试卷
- `GET /quiz/records` - 获取答题记录

## 注意事项

1. 项目默认运行在 `http://localhost:3000`
2. API 请求代理到 `http://localhost:8080`，可在 `vite.config.js` 中修改
3. 所有页面都需要登录才能访问（除了登录和注册页）
4. 教师和学生有不同的权限，部分功能根据角色显示
5. 答题页面有时间限制，时间到自动提交

## 技术栈

- **前端框架**: Vue 3.4.0
- **构建工具**: Vite 5.0.0
- **UI 组件库**: TDesign Vue Next 1.9.0
- **状态管理**: Pinia 2.1.7
- **路由管理**: Vue Router 4.2.5
- **网络请求**: Axios 1.6.2
- **状态持久化**: pinia-plugin-persistedstate 3.2.1