🧾 考试报名系统前端

一、项目简介

本项目为考试报名信息管理系统的 前端部分，基于 Vue3 + Vite 实现，主要功能包括：

• 用户注册与登录
• 按角色区分普通用户（考生）与管理员
• 用户个人主页（类似博客首页风格）
• 顶部导航栏（根据角色动态显示菜单）
• 管理员用户管理（分页查询 + 删除）
• 与 Spring Boot 后端通过 /api 接口联调

前端默认通过 Vite 代理，将 /api 请求转发到后端 http://localhost:8081。

---

二、技术栈

模块	技术
前端框架	Vue 3 + Vite
路由管理	Vue Router 4
状态管理	Pinia
UI 组件库	Element Plus（中文语言包）
HTTP 请求	Axios
用户状态存储	本地 Pinia + localStorage（可选）

早期的 mockApi.js 仅用于预研阶段，目前主流程已改为真实后端 API，对接 Spring Boot。

---

三、本地运行

# 克隆项目
git clone https://github.com/yourname/test-system-frontend.git
cd test-system-frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev

启动后访问：

• 前端：http://localhost:5173/
• 后端（需单独启动）：http://localhost:8081/

请确保后端已经运行且 Vite 代理配置正确（见下文）。

---

四、目录结构

src/
├── App.vue
├── main.js
│
├── router/              # 前端路由
│   └── index.js
│
├── store/               # Pinia 状态管理
│   └── userStore.js     # 存储当前登录用户与 token
│
├── api/                 # 前端接口封装
│   ├── http.js          # Axios 实例（baseURL: /api）
│   ├── auth.js          # 登录 / 注册相关接口
│   ├── adminUser.js     # 管理员用户管理接口
│   └── mockApi.js       # 旧版本地 Mock 接口（目前主流程已不使用）
│
└── components/          # 页面组件
    ├── NavBar.vue       # 顶部导航栏（根据角色动态显示“后台管理”）
    ├── Home.vue         # 网站主页（全局入口，暂为简单内容）
    ├── Login.vue        # 登录页面
    ├── Register.vue     # 注册页面（含身份证校验与自动生日）
    ├── Profile.vue      # 用户个人主页（dashboard / 类博客布局）
    ├── NotFound.vue     # 404 页面
    └── admin/
        ├── AdminHome.vue   # 管理员后台布局（包含侧边菜单）
        └── UserManage.vue  # 用户管理（分页列表 + 删除）

---

五、路由与导航说明

1. 路由表（src/router/index.js）

主要路由如下：

• /login：登录页（公开访问）
• /register：注册页（公开访问）
• /home：网站主页（普通页面）
• /user/profile：用户个人主页（登录后访问）
• /admin：管理员后台入口，重定向到 /admin/users
• /admin/users：管理员用户管理页面
• /:pathMatch(.*)*：404 页面

2. 路由守卫（权限控制）

在 router.beforeEach 中：

• 若未登录（Pinia 中没有 token），且访问的不是 /login 或 /register：
  • 自动跳转到 /login
• 若访问 /admin 或 /admin/*，且当前用户角色不是 admin：
  • 自动跳转到 /home 或 /user/profile

示例逻辑（简化版）：

router.beforeEach((to, from, next) => {
  const store = useUserStore()
  const publicPages = ['/login', '/register']

  if (!store.token && !publicPages.includes(to.path)) {
    next('/login')
  } else if (to.path.startsWith('/admin') && store.user.role !== 'admin') {
    next('/home')
  } else {
    next()
  }
})

---

六、页面功能概览

1. Login.vue（登录页）

• 输入用户名和密码，调用后端 POST /api/auth/login
• 成功后：
  • 将用户信息与 “假 token” 存入 Pinia
  • 跳转到 /user/profile（用户个人主页）

2. Register.vue（注册页）

• 表单字段：
  • 用户名、密码、确认密码
  • 真实姓名
  • 身份证号（中国身份证格式校验，18 位，末位为数字或大写 X）
  • 性别（男 / 女）
  • 出生日期（灰色不可点击，由身份证自动解析）
  • 在读高校
  • 年级（如“2022级”“大三”）
• 核心特性：
  • 身份证号失焦后：
    • 自动转成大写
    • 校验格式是否合法（正则 + 日期合法性）
    • 从身份证中解析出生日期 YYYY-MM-DD，写入 form.dateOfBirth
  • 出生日期组件为 disabled，只能由身份证自动生成
• 提交时调用 POST /api/auth/register，成功后提示“注册成功，请登录”，并跳转到 /login。

3. Profile.vue（用户个人主页）

• 整体类似“博客首页”/“Dashboard” 布局：
  • 左侧卡片：头像（首字母）、用户名、真实姓名、角色、学校与年级、基础信息列表
  • 快捷操作按钮：
    • “去网站主页” /home
    • 若为管理员，显示“进入后台管理”（跳转 /admin/users）
  • 右侧卡片：系统公告与更新、我的考试动态（目前为占位内容，可接后端）

4. NavBar.vue（顶部导航）

• 显示菜单：
  • “首页” → /home
  • “个人中心” → /user/profile
  • “后台管理” → 仅在 user.role === 'admin' 时显示，指向 /admin/users
  • “退出” → 清空 Pinia 中用户信息，跳转 /login

5. admin/UserManage.vue（管理员用户管理）

• 通过 GET /api/admin/users?page=&size= 分页拉取用户列表
• 使用 Element Plus 的 el-table 展示：
  • ID、用户名、角色（使用 Tag 标记管理员 / 考生）
• 分页组件 el-pagination：
  • 使用中文语言包，layout 包含 prev, pager, next, jumper, total
  • prev-text="上一页"，next-text="下一页"
• 删除用户：
  • 点击“删除”按钮，弹出确认框
  • 确认后调用 DELETE /api/admin/users/{id}，成功后刷新当前页

---

七、与后端接口对接

1. Axios 实例（src/api/http.js）

import axios from 'axios'

const http = axios.create({
  baseURL: '/api', // 通过 Vite 代理转发到后端
  timeout: 5000
})

export default http

2. 认证相关接口（src/api/auth.js）

import http from './http'

export function login(username, password) {
  return http.post('/auth/login', { username, password }).then(res => {
    const body = res.data
    if (body.code !== 0) {
      return Promise.reject({ msg: body.message || '登录失败' })
    }
    const user = body.data
    const fakeToken = 'dummy-token-' + user.id
    return { data: user, token: fakeToken }
  })
}

export function register(payload) {
  return http.post('/auth/register', payload).then(res => {
    const body = res.data
    if (body.code !== 0) {
      return Promise.reject({ msg: body.message || '注册失败' })
    }
    return body.data
  })
}

3. 管理员用户管理接口（src/api/adminUser.js）

import http from './http'
import { ElMessage } from 'element-plus'

export function fetchUsers(page = 1, size = 10) {
  return http
    .get('/admin/users', { params: { page, size } })
    .then(res => {
      const body = res.data
      if (body.code !== 0) {
        ElMessage.error(body.message || '获取用户列表失败')
        return Promise.reject(body)
      }
      return body.data    // { total, records }
    })
}

export function deleteUserApi(id) {
  return http
    .delete(`/admin/users/${id}`)
    .then(res => {
      const body = res.data
      if (body.code !== 0) {
        ElMessage.error(body.message || '删除用户失败')
        return Promise.reject(body)
      }
      return body.data
    })
}

---

八、Vite 代理配置

为方便本地联调，在 vite.config.js 中添加 /api 代理：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 5173,
    host: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8081', // Spring Boot 后端
        changeOrigin: true
      }
    }
  }
})

---

九、与后端对接流程（简要）

1. 启动后端（Spring Boot），确保可访问 http://localhost:8081/api/auth/login
2. 启动前端（Vite），访问 http://localhost:5173/
3. 在注册页 /register 注册新用户：
   • 身份证号合法时自动填充出生日期
4. 使用注册好的账号在 /login 登录
5. 成功后跳转到 /user/profile，查看个人主页信息
6. 若使用管理员账号登录，可在：
   • 顶部导航“后台管理” 或
   • 个人主页的“进入后台管理”按钮
     进入 /admin/users，进行用户列表查看与删除

---

十、后续扩展建议

• 在前端引入真正的 token（例如 JWT），并在 Axios 拦截器中统一附带到请求头
• 增加考试列表、报名页、我的考试记录等页面
• 将用户管理与考试管理整合进统一的后台布局（侧边菜单 + 顶部导航）
• 使用组件化/模块化方式抽离通用表格、表单与弹窗
• 编写 Vitest 单元测试与 Cypress 端到端测试，提升代码质量

本 README 旨在为课程/实训中的前端部分提供清晰的结构与说明，便于后续报告撰写和答辩展示。