docs: 移除命令行模式，专注于Web界面
- 移除README.md中所有命令行模式相关内容 - 更新项目架构描述，专注于Web API服务 - 简化快速开始指南，只保留Web界面步骤 - 优化项目结构说明 - 提升文档的专注性和用户体验
This commit is contained in:
Nvex
@@ -1,5 +1,277 @@
|
||||
# Vue 3 + Vite
|
||||
# 批量退课工具 - Web 前端应用
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
## 🌐 项目概述
|
||||
|
||||
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||||
这是批量退课工具的 Web 前端应用，基于 Vue.js 3 + Vite 构建，提供用户友好的图形界面来执行批量退课操作。
|
||||
|
||||
## ✨ 主要功能
|
||||
|
||||
- 📁 **文件上传**: 支持拖拽上传 Excel 文件
|
||||
- 👀 **数据预览**: 上传后即时预览退课数据
|
||||
- 🔍 **数据验证**: 自动检查数据格式和完整性
|
||||
- ⚡ **批量操作**: 一键执行批量退课
|
||||
- 📊 **结果展示**: 详细的操作结果和统计信息
|
||||
- 🎨 **响应式设计**: 适配各种屏幕尺寸
|
||||
|
||||
## 🛠️ 技术栈
|
||||
|
||||
- **Vue.js 3** - 渐进式 JavaScript 框架
|
||||
- **Vite** - 下一代前端构建工具
|
||||
- **Element Plus** - Vue 3 UI 组件库
|
||||
- **Axios** - HTTP 客户端
|
||||
- **Vue Router** - 官方路由管理器
|
||||
- **Pinia** - Vue 状态管理库
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 环境要求
|
||||
|
||||
- Node.js >= 16.0.0
|
||||
- npm >= 8.0.0
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### 开发模式
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
应用将在 `http://localhost:5173` 启动
|
||||
|
||||
### 生产构建
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
构建文件将输出到 `dist/` 目录
|
||||
|
||||
### 预览生产构建
|
||||
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
|
||||
## 📁 项目结构
|
||||
|
||||
```
|
||||
toolbox-app/
|
||||
├── public/ # 静态资源
|
||||
│ ├── vite.svg # 应用图标
|
||||
│ └── *.xlsx # 示例 Excel 文件
|
||||
├── src/
|
||||
│ ├── components/ # Vue 组件
|
||||
│ │ ├── CourseWithdrawal.vue # 主要的退课组件
|
||||
│ │ └── ...
|
||||
│ ├── views/ # 页面视图
|
||||
│ ├── router/ # 路由配置
|
||||
│ │ └── index.js
|
||||
│ ├── store/ # 状态管理
|
||||
│ │ └── index.js
|
||||
│ ├── assets/ # 资源文件
|
||||
│ ├── style.css # 全局样式
|
||||
│ ├── App.vue # 根组件
|
||||
│ └── main.js # 应用入口
|
||||
├── index.html # HTML 模板
|
||||
├── vite.config.js # Vite 配置
|
||||
├── package.json # 项目配置
|
||||
└── README.md # 项目文档
|
||||
```
|
||||
|
||||
## 🔧 配置说明
|
||||
|
||||
### API 配置
|
||||
|
||||
前端应用通过 Axios 与后端 Flask API 通信。API 基础 URL 配置在组件中：
|
||||
|
||||
```javascript
|
||||
// 默认后端地址
|
||||
const API_BASE_URL = 'http://localhost:5000'
|
||||
```
|
||||
|
||||
如需修改后端地址，请在相关组件中更新此配置。
|
||||
|
||||
### 构建配置
|
||||
|
||||
Vite 配置文件 `vite.config.js`：
|
||||
|
||||
```javascript
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
port: 5173,
|
||||
host: true
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 📋 使用指南
|
||||
|
||||
### 1. 准备 Excel 文件
|
||||
|
||||
确保 Excel 文件包含以下列：
|
||||
|
||||
| 学生ID | 课程班ID |
|
||||
|--------|----------|
|
||||
| 3831629 | 1820221, 1820210 |
|
||||
| 3831630 | 1820456 |
|
||||
|
||||
### 2. 上传文件
|
||||
|
||||
- 点击上传区域选择文件，或直接拖拽文件到上传区域
|
||||
- 支持 `.xlsx` 和 `.xls` 格式
|
||||
- 文件大小限制：10MB
|
||||
|
||||
### 3. 预览数据
|
||||
|
||||
- 上传成功后，系统会自动解析并显示数据预览
|
||||
- 检查学生 ID 和课程班 ID 是否正确
|
||||
- 确认数据无误后点击"执行退课"
|
||||
|
||||
### 4. 执行退课
|
||||
|
||||
- 点击"执行退课"按钮开始批量操作
|
||||
- 系统会显示实时进度和结果
|
||||
- 操作完成后查看详细的统计报告
|
||||
|
||||
### 5. 查看结果
|
||||
|
||||
- 成功退课的记录会显示为绿色
|
||||
- 失败的记录会显示为红色，并包含错误信息
|
||||
- 跳过的记录会显示为灰色
|
||||
|
||||
## 🎨 界面特性
|
||||
|
||||
### 响应式设计
|
||||
- 支持桌面端、平板和移动端
|
||||
- 自适应布局，优化各种屏幕尺寸的使用体验
|
||||
|
||||
### 用户体验
|
||||
- 直观的文件上传界面
|
||||
- 实时的操作反馈
|
||||
- 清晰的结果展示
|
||||
- 友好的错误提示
|
||||
|
||||
### 视觉设计
|
||||
- 现代化的 UI 设计
|
||||
- 一致的色彩方案
|
||||
- 清晰的信息层次
|
||||
- 流畅的交互动画
|
||||
|
||||
## 🔍 开发指南
|
||||
|
||||
### 组件开发
|
||||
|
||||
主要组件 `CourseWithdrawal.vue` 包含：
|
||||
|
||||
- 文件上传功能
|
||||
- 数据预览表格
|
||||
- 批量退课执行
|
||||
- 结果展示
|
||||
|
||||
### 状态管理
|
||||
|
||||
使用 Pinia 管理应用状态：
|
||||
|
||||
```javascript
|
||||
// store/index.js
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useAppStore = defineStore('app', {
|
||||
state: () => ({
|
||||
// 应用状态
|
||||
}),
|
||||
actions: {
|
||||
// 状态操作
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### API 集成
|
||||
|
||||
使用 Axios 进行 HTTP 请求：
|
||||
|
||||
```javascript
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: 'http://localhost:5000',
|
||||
timeout: 30000
|
||||
})
|
||||
```
|
||||
|
||||
## 🚀 部署
|
||||
|
||||
### 静态部署
|
||||
|
||||
构建后将 `dist/` 目录部署到任何静态文件服务器：
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
# 将 dist/ 目录上传到服务器
|
||||
```
|
||||
|
||||
### Nginx 配置示例
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name your-domain.com;
|
||||
root /path/to/dist;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Docker 部署
|
||||
|
||||
```dockerfile
|
||||
FROM nginx:alpine
|
||||
COPY dist/ /usr/share/nginx/html/
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
```
|
||||
|
||||
## 🐛 故障排除
|
||||
|
||||
### 常见问题
|
||||
|
||||
**Q: 无法连接到后端服务？**
|
||||
A: 检查后端服务是否启动，确认 API 地址配置正确。
|
||||
|
||||
**Q: 文件上传失败？**
|
||||
A: 检查文件格式是否为 Excel，文件大小是否超过限制。
|
||||
|
||||
**Q: 数据预览为空？**
|
||||
A: 确认 Excel 文件包含"学生ID"和"课程班ID"列。
|
||||
|
||||
**Q: 退课操作失败？**
|
||||
A: 检查后端 API 配置和网络连接，查看浏览器控制台错误信息。
|
||||
|
||||
### 调试模式
|
||||
|
||||
开启 Vue DevTools 进行调试：
|
||||
|
||||
```bash
|
||||
# 开发模式自动启用 DevTools
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## 📄 许可证
|
||||
|
||||
本项目采用 MIT 许可证。
|
||||
|
||||
---
|
||||
|
||||
*最后更新: 2024年12月*
|
||||
|
||||
Reference in New Issue
Block a user