项目结构

目录结构分析

1. 根目录

   • vite.config.js：配置开发工具，包含路径别名、代理服务等。
   • package.json：项目依赖和脚本配置。
   • index.html：项目入口文件。
   • .env.*：存放环境变量配置。

2. src 目录

   • 核心文件
     • App.vue：应用根组件，负责布局和全局配置。
     • main.js：应用入口，挂载全局组件和插件。
   • 页面文件
     • views/：功能模块页面，包括 Dashboard.vue（首页概览）、Login.vue（登录页）、admin（管理员管理）、student（学生管理）、topic（主题管理）等。
   • 组件
     • components/: 存放可复用组件，如 HelloWorld.vue。
   • 路由
     • router/index.js：定义路由规则，支持路由懒加载和权限控制。
   • 状态管理
     • store/: 使用 Pinia/Vuex 管理全局状态，如用户登录状态和权限。
   • 工具类
     • utils/request.js：封装 API 请求，统一处理异常与响应数据。
     • utils/requestOptimize.js：对请求进行进一步优化。
   • 静态资源
     • assets/: 样式和图片资源，按功能模块分类存放。

3. public 目录

   • favicon.ico：应用图标。
   • 可存放公共资源，生产环境会直接复制到根目录。

功能模块说明

1. 登录与认证

   • 用户通过登录页面输入账号密码，验证成功后跳转至管理面板。
   • 使用 token 实现会话管理，状态存储于 Pinia。

2. 仪表盘

   • 在 Dashboard.vue 展示系统概览、统计数据和快速入口。

3. 模块管理

   • 管理员模块：添加、编辑、删除管理员。
   • 学生模块：查看、搜索、管理学生信息。
   • 公告模块：发布、管理公告。
   • 主题模块：创建、编辑、查看主题内容。

4. 权限控制

   • 路由守卫根据用户权限动态加载功能模块。