ARCHITECTURE.md 4.42 KB

Raw Blame History Permalink



架构实现与工程配置


入口与初始化


应用入口：/src/main.js


创建 App、注册全局 Icon 组件、挂载路由
全局注入 axios 到 app.config.globalProperties.$http


根组件：/src/App.vue


初始化全局认证与购物车：provideAuth / provideCart
生产环境 + 微信环境：初始化微信 JSSDK（配置签名 URL）
生产环境：版本更新探测（弹窗提示刷新）


路由与权限


路由入口：/src/router/index.js


Hash 路由：createWebHashHistory(import.meta.env.VITE_BASE || '/')
beforeEach：统一登录页回跳处理，并在必要时探测“是否已登录”


鉴权策略：/src/router/guards.js


白名单 + meta.requiresAuth 双策略判断
未登录时重定向 /login 并带 redirect


微信授权策略：/src/router/guards.js


不在路由守卫自动触发授权，避免循环
仅在用户触发（如点击微信图标/购买流程探测）时调用 startWxAuth


请求与登录态注入


Axios 封装：/src/utils/axios.js


请求拦截：动态读取本地 user_info 并注入 User-Id / User-Token
响应拦截：code=401 时，仅当当前路由确实需要登录才跳转登录（公开页面不强制跳转）


登录态管理：/src/contexts/auth.js


provide/inject 维护 currentUser/loading/login/logout
localStorage 持久化 currentUser
初始化流程中会探测授权/登录态并拉取用户信息


购物车与结算


购物车上下文：/src/contexts/cart.js


单品/多品两种模式（App.vue 默认使用单品模式）
localStorage 带时间戳的过期策略（默认一天过期）
handleCheckout 负责构建订单数据并提交订单


上传与预览


上传工具：/src/utils/upload.js、/src/utils/qiniuFileHash.js


前端计算文件 Hash，支持“秒传检测 + 直传对象存储”


关键业务复用：/src/composables/useCheckin.js


打卡/作业提交流程：校验、上传、提交、编辑回填等


预览组件：/src/components/media


视频/音频播放器、PDF/Office 预览等


Vite 配置与环境变量


Vite 配置：/vite.config.js


自动按需引入 Vant 组件（unplugin-auto-import / unplugin-vue-components）
别名：@ / @components / @utils / @api 等
本地代理：createProxy(viteEnv.VITE_PROXY_PREFIX, viteEnv.VITE_PROXY_TARGET)


环境变量示例：.env


VITE_PORT：开发端口
VITE_PROXY_TARGET / VITE_PROXY_PREFIX：接口代理目标与前缀
VITE_OUTDIR：构建输出目录
VITE_CONSOLE：调试开关


目录结构（详细）

mlaj/
├── build/                 # Vite 代理封装
├── docs/                  # 项目文档（本目录）
├── public/                # 静态资源
├── src/
│   ├── api/               # 按业务域拆分的接口封装（auth/course/checkin/teacher/...）
│   ├── assets/            # 图片等资源
│   ├── common/            # 常量
│   ├── components/        # 组件（按业务域归类）
│   ├── composables/       # 组合式函数（逻辑复用，含单测）
│   ├── contexts/          # 全局状态（provide/inject：auth/cart）
│   ├── router/            # 路由定义与守卫
│   ├── utils/             # 工具层（axios、上传、鉴权存储、版本更新等）
│   └── views/             # 页面（按业务域归类）
├── tailwind.config.js     # Tailwind 配置
└── vite.config.js         # Vite 配置