MyUCSpace

简体中文

English

简体中文

English

Appearance

MyUCSpace - Web 前端 ​

作者：Sixu Wei reisa@sust.edu.cn，最后更新于 2026 年 1 月 29 日

本文档介绍课堂管理器 Web 管理后台的核心架构、功能模块和开发规范。

架构与技术栈 ​

  • 框架：Vue 3 + Vite
  • UI 组件库：Element Plus
  • 状态管理：Pinia
  • 路由：Vue Router 4
  • HTTP 客户端：Axios
  • 加密：SM2（国家商用密码算法，用于密码传输）
  • 反向代理：Nginx（负责反向代理、SSL 终结及静态资源托管）

项目结构 ​

text
web/src/
├── api/          # API 请求封装
├── assets/       # 静态资源
├── components/   # 公共组件
├── layouts/      # 页面布局
├── router/       # 路由配置
├── stores/       # Pinia 状态仓库
├── utils/        # 工具函数
└── views/        # 页面视图

功能模块 ​

  • 用户认证

    • 邮箱 + 密码登录；密码使用 SM2 加密传输
    • JWT 令牌认证（Access + Refresh 双令牌方案）
    • WebAuthn 无密码登录支持
    • TOTP 两步验证

  • 教室管理

    • 教室列表与详情视图
    • 教室状态管理（可用 / 维修中 / 使用中）
    • 空闲教室查询

  • 预约管理

    • 预约申请与审批流程
    • 申请状态跟踪
    • 时间冲突检测

  • 报修管理

    • 报修工单处理
    • 状态生命周期（待处理 → 处理中 → 已完成）
    • 图片附件支持

  • 违规管理

    • 违规报告处理
    • 处置记录留存

  • 课程中心（新增）

    • 课表数据查询
    • 实时课程状态展示

快速开始 ​

bash
# 安装依赖
npm install

# 启动开发服务器（默认端口 3000）
npm run dev

# 生产环境构建
npm run build

开发配置 ​

后端代理 ​

前端开发服务器默认将 /api 请求代理到 http://localhost:8000，配置位于 vite.config.js。web/package.json 中声明了 "type": "module"，因此前端工具链配置以 ESM 格式维护。

javascript
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8000',
      changeOrigin: true
    }
  }
}

开发规范 ​

  • 组件命名：使用 PascalCase，例如 ClassroomList.vue
  • API 封装：按模块组织在 src/api/ 目录下
  • 状态管理：全局状态使用 Pinia Store；组件内部状态使用 ref/reactive
  • 错误处理：API 请求通过拦截器统一处理错误，并通过 Element Plus 消息通知展示