# exam-backend **Repository Path**: Mineing/exam-backend ## Basic Information - **Project Name**: exam-backend - **Description**: 高考报名系统前端vue - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: dev - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-10-15 - **Last Updated**: 2025-11-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 高考报名系统前端 基于 Vue 3 + Element Plus 的高考报名系统前端项目。 ## 技术栈 - **Vue 3** - 渐进式 JavaScript 框架 - **Vue Router 4** - 官方路由管理器 - **Pinia** - Vue 状态管理库 - **Element Plus** - Vue 3 UI 组件库 - **Axios** - HTTP 客户端 - **Vue CLI 3** - 项目脚手架 ## 功能特性 ### 🔐 用户认证 - 登录页面，支持用户名密码登录 - 路由守卫，未登录用户自动跳转到登录页 - 登录状态持久化存储 ### 📋 主要功能模块 1. **首页仪表板** - 显示报名进度和用户信息 2. **照片确认** - 上传和确认考生照片 3. **报考信息** - 填写和提交报考信息 4. **缴费** - 在线支付报名费用 ### 🎨 界面设计 - 响应式布局，支持不同屏幕尺寸 - 浅蓝色主题，简洁美观 - 左侧导航菜单，右侧内容展示 - Element Plus 组件库，统一的交互体验 ## 项目结构 ``` src/ ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── layout/ # 布局组件 │ └── MainLayout.vue ├── router/ # 路由配置 │ └── index.js ├── stores/ # Pinia 状态管理 │ └── auth.js ├── utils/ # 工具函数 │ └── request.js # Axios 配置 ├── views/ # 页面组件 │ ├── Login.vue │ ├── Dashboard.vue │ ├── PhotoConfirm.vue │ ├── Registration.vue │ └── Payment.vue ├── App.vue # 根组件 └── main.js # 入口文件 ``` ## 快速开始 ### 安装依赖 ```bash npm install ``` ### 启动开发服务器 ```bash npm run serve ``` ### 构建生产版本 ```bash npm run build ``` ## 页面说明 ### 登录页面 - 路径：`/login` - 功能：用户登录认证 - 验证：用户名和密码必填，密码最少6位 ### 主布局 - 左侧：导航菜单（首页、照片确认、报考、缴费） - 顶部：面包屑导航、用户信息、退出登录 - 右侧：页面内容展示区域 ### 首页 - 显示报名进度统计 - 展示个人信息 - 提供各功能模块的快捷入口 ### 照片确认 - 支持拖拽上传照片 - 照片格式和大小验证 - 照片要求说明 - 照片预览功能 ### 报考信息 - 个人信息填写（姓名、身份证、联系方式等） - 报考类别选择（文科、理科、艺术类、体育类） - 科目选择 - 加分政策申请 ### 缴费 - 费用明细展示 - 多种支付方式（支付宝、微信、银行卡） - 缴费状态查询 - 缴费须知说明 ## API 接口 项目使用 Axios 进行 HTTP 请求，配置文件在 `src/utils/request.js`： - 请求拦截器：自动添加 Authorization 头 - 响应拦截器：统一处理错误和状态码 - 基础 URL：可通过环境变量 `VUE_APP_API_BASE_URL` 配置 ## 状态管理 使用 Pinia 管理应用状态： - `auth.js`：用户认证状态（登录状态、用户信息、token） ## 路由守卫 - 登录验证：未登录用户自动跳转到登录页 - 权限控制：基于路由 meta 配置 - 登录重定向：已登录用户访问登录页自动跳转到首页 ## 主题定制 - 主色调：浅蓝色（#409eff） - 渐变色按钮：紫蓝色渐变 - 自定义 CSS 变量支持 - 响应式设计 ## 开发说明 1. 项目使用 Vue 3 Composition API 2. 组件采用 `