作业管理系统 - 下一代

作业管理系统 - 下一代

现代化的教学作业管理平台
基于 Vue 3 + TypeScript + Vite + Tailwind CSS 构建

✨ 特性

🎯	多角色支持学生、教师、课代表的完整工作流程
🌙	深色模式支持浅色/深色/跟随系统三种主题模式
📱	响应式设计完美适配桌面端和移动端设备
⚡	现代化技术栈 Vue 3 + Composition API + TypeScript
🎨	优雅 UI 基于 Tailwind CSS 的现代化界面
🔒	JWT 认证安全的用户认证和权限管理
📊	数据可视化直观的统计图表和进度展示
📁	文件管理支持作业附件上传和下载

🛠 技术栈

前端框架

Vue 3 - 渐进式 JavaScript 框架
TypeScript - 类型安全的 JavaScript 超集
Vite - 下一代前端构建工具
Vue Router - Vue.js 官方路由管理器
Pinia - Vue.js 状态管理库

UI 与样式

Tailwind CSS - 实用优先的 CSS 框架
Heroicons - 精美的 SVG 图标库
现代响应式设计 - 移动端优先的设计理念

开发工具

ESLint - 代码质量检查工具
Prettier - 代码格式化工具
Oxlint - 高性能的 JavaScript linter
Yarn 4 - 现代化的包管理器

HTTP 客户端

Axios - 基于 Promise 的 HTTP 客户端
完整的错误处理 - 统一的 API 错误处理机制
Token 自动刷新 - JWT token 自动更新

🚀 快速开始

环境要求

Node.js 22+
Yarn 4 (推荐) / npm / pnpm

安装依赖

# 克隆项目
git clone https://github.com/The-ESAP-Project/vue-hwsystem-next.git
cd vue-hwsystem-next

# 安装依赖
yarn install

开发服务器

# 启动开发服务器
yarn dev

# 或使用 npm
npm run dev

访问 http://localhost:5173 查看应用。

构建项目

# 构建生产版本
yarn build

# 预览生产构建
yarn preview

# 类型检查
yarn type-check

# 代码规范检查
yarn lint

📁 项目结构

vue-hwsystem-next/
├── 📁 public/              # 静态资源
├── 📁 src/
│   ├── 📁 assets/          # 项目资源文件
│   ├── 📁 components/      # Vue 组件
│   │   ├── AppHeader.vue   # 应用头部导航
│   │   └── AppFooter.vue   # 应用底部
│   ├── 📁 composables/     # Vue 组合式函数
│   │   └── useDarkMode.ts  # 深色模式管理
│   ├── 📁 router/          # 路由配置
│   │   └── index.ts        # 路由定义
│   ├── 📁 services/        # API 服务层
│   │   ├── api.ts          # API 基础配置
│   │   ├── auth.ts         # 认证服务
│   │   ├── homework.ts     # 作业管理服务
│   │   ├── submission.ts   # 作业提交服务
│   │   ├── user.ts         # 用户管理服务
│   │   ├── file.ts         # 文件管理服务
│   │   ├── system.ts       # 系统管理服务
│   │   └── index.ts        # 服务统一导出
│   ├── 📁 stores/          # Pinia 状态管理
│   │   └── user.ts         # 用户状态管理
│   ├── 📁 types/           # TypeScript 类型定义
│   │   ├── api.ts          # API 响应类型
│   │   ├── auth.ts         # 认证相关类型
│   │   ├── homework.ts     # 作业相关类型
│   │   ├── user.ts         # 用户相关类型
│   │   └── ...            # 其他类型定义
│   ├── 📁 utils/           # 工具函数
│   │   └── error.ts        # 错误处理工具
│   ├── 📁 views/           # 页面组件
│   │   ├── HomeView.vue    # 首页
│   │   ├── 📁 auth/        # 认证页面
│   │   ├── 📁 student/     # 学生页面
│   │   ├── 📁 teacher/     # 教师页面
│   │   └── 📁 monitor/     # 课代表页面
│   ├── App.vue             # 根组件
│   └── main.ts             # 应用入口
├── 📄 api.md               # API 文档
├── 📄 vite.config.ts       # Vite 配置
├── 📄 tailwind.config.js   # Tailwind 配置
├── 📄 tsconfig.json        # TypeScript 配置
└── 📄 package.json         # 项目依赖

🔧 主要功能

🎯 用户角色管理

学生 (Student)

📚 查看和提交作业
📊 跟踪学习进度和成绩
📋 管理个人资料
🔔 接收作业通知和提醒

教师 (Teacher)

📝 创建和管理作业
✅ 批改作业和评分
👥 管理班级学生
📈 查看统计数据和分析报告

课代表 (Monitor)

👀 监督班级作业提交情况
📢 发送提醒通知给同学
📊 查看班级整体进度
🤝 协助老师进行班级管理

🌙 主题系统

浅色模式: 经典的明亮界面
深色模式: 护眼的深色主题
跟随系统: 自动匹配系统主题偏好
主题持久化: 记住用户的主题选择

🔐 认证与安全

JWT Token 认证机制
自动 Token 刷新
权限控制和路由守卫
安全的密码处理

📊 作业管理

创建和编辑作业
设置截止时间和评分标准
支持附件上传
批量导出作业统计

📁 文件管理

安全的文件上传
多格式文件支持
文件大小和类型限制
便捷的文件下载

📖 API 文档

本项目包含完整的后端 API 文档，详细说明了所有接口的使用方法：

📄 API 文档 - 完整的 RESTful API 文档
🔗 Base URL: http://localhost:8080/api/v1
🔑 认证方式: JWT Bearer Token
📦 数据格式: JSON

主要 API 模块

认证管理 - 用户登录、token 刷新、用户信息获取
作业管理 - 作业的增删改查、状态管理
提交管理 - 作业提交、批改、统计导出
用户管理 - 用户信息管理、权限控制
文件管理 - 文件上传下载、类型验证
系统管理 - 系统设置、操作日志

🌐 环境配置

环境变量

创建 .env 文件配置环境变量：

# API 配置
VITE_API_BASE_URL=http://localhost:8080/api/v1

# 应用配置
VITE_APP_TITLE=作业管理系统
VITE_APP_VERSION=1.0.0

# 开发配置
VITE_DEV_PORT=5173

开发环境要求

Node.js: 22.x 或更高版本
Yarn: 4.x 版本
编辑器: 推荐使用 VSCode
浏览器: 支持 ES2020+ 的现代浏览器

🧪 测试

# 运行单元测试
yarn test:unit

# 运行端到端测试
yarn test:e2e

# 测试覆盖率
yarn test:coverage

📦 部署

构建优化

项目已配置了生产环境优化：

代码分割和懒加载
静态资源压缩
Tree-shaking 优化
现代浏览器构建

部署方式

静态部署 (推荐)

yarn build
# 将 dist 目录部署到静态服务器

Docker 部署

docker build -t vue-hwsystem-next .
docker run -p 80:80 vue-hwsystem-next

Nginx 配置

server {
    listen 80;
    server_name your-domain.com;
    
    location / {
        root /var/www/vue-hwsystem-next;
        try_files $uri $uri/ /index.html;
    }
}

🤝 贡献指南

我们欢迎所有形式的贡献！请遵循以下步骤：

贡献流程

Fork 项目到你的 GitHub 账户
Clone 你的 Fork 到本地
创建分支 (git checkout -b feature/amazing-feature)
提交更改 (git commit -m 'feat: add amazing feature')
推送分支 (git push origin feature/amazing-feature)
创建 Pull Request

代码规范

遵循 ESLint 和 Prettier 配置
使用 TypeScript 编写类型安全的代码
编写清晰的提交信息
为新功能添加适当的测试

提交信息规范

使用 Conventional Commits 格式：

feat: 添加用户认证功能
fix: 修复作业提交问题
docs: 更新 API 文档
style: 优化代码格式
refactor: 重构用户服务层
test: 添加单元测试
chore: 更新依赖包

📄 许可证

本项目基于 MIT 许可证开源。详情请查看 LICENSE 文件。

🙏 致谢

感谢以下开源项目和贡献者：

Vue.js - 渐进式 JavaScript 框架
Vite - 下一代前端构建工具
Tailwind CSS - 实用优先的 CSS 框架
TypeScript - JavaScript 的类型超集
Pinia - Vue.js 状态管理库

📞 联系我们

项目地址: GitHub
问题反馈: Issues
功能建议: Discussions

⭐ 如果这个项目对你有帮助，请给我们一个星标！

让我们一起构建更好的教育技术！

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
.vscode		.vscode
public		public
src		src
.editorconfig		.editorconfig
.env.example		.env.example
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierrc.json		.prettierrc.json
.yarnrc.yml		.yarnrc.yml
README.md		README.md
env.d.ts		env.d.ts
eslint.config.ts		eslint.config.ts
index.html		index.html
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
tsconfig.vitest.json		tsconfig.vitest.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts
yarn.lock		yarn.lock

The-ESAP-Project/vue-hwsystem-next

Folders and files

Latest commit

History

Repository files navigation

作业管理系统 - 下一代

✨ 特性

🛠 技术栈

前端框架

UI 与样式

开发工具

HTTP 客户端

🚀 快速开始

环境要求

安装依赖

开发服务器

构建项目

📁 项目结构

🔧 主要功能

🎯 用户角色管理

学生 (Student)

教师 (Teacher)

课代表 (Monitor)

🌙 主题系统

🔐 认证与安全

📊 作业管理

📁 文件管理

📖 API 文档

主要 API 模块

🌐 环境配置

环境变量

开发环境要求

🧪 测试

📦 部署

构建优化

部署方式

🤝 贡献指南

贡献流程

代码规范

提交信息规范

📄 许可证

🙏 致谢

📞 联系我们

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 4

Uh oh!

Languages

Packages