【项目实训】——管理员前端页面开发

在开发后端的题目管理功能时，发现手动在数据库添加题目内容十分繁琐，而且不符合一个项目开发的正常过程，因此开发一个管理员的前端页面。

一、项目整体开发流程
项目采用 Vite 作为构建工具，搭配 TypeScript 实现类型约束，提升代码健壮性与可维护性。
首先通过官方命令初始化 Vue3+TS 基础项目：

npm create vite@latest yotood-mp -- --template vue-ts cd yotood-mp npm install

初始化完成后，根据项目业务需求，修改 package.json 配置运行脚本、安装核心依赖，包括 Vue Router、Axios、TailwindCSS、shadcn-vue 系列工具库，同时配置类型校验、打包编译、接口自动生成等自定义指令。
随后完成 Vite、TS 全局配置，配置路径别名 @ 简化文件引入，配置开发环境代理解决跨域问题，同步完善 Tailwind 全局样式，统一项目视觉风格。
接着搭建标准化目录结构，按功能拆分不同模块：入口配置、路由管理、全局布局、业务页面、接口服务、工具函数、通用 UI 组件、自动生成接口层，清晰的目录划分让代码职责明确，便于后期迭代维护。
基础环境与架构搭建完成后，依次完成路由系统开发、后台布局封装、通用 UI 组件封装、全局请求拦截器编写，最后逐页开发登录页、数据仪表盘、题目管理、创建题目、帮助中心等业务页面，最终完成前后端对接与功能调试，保障系统稳定运行。

代码架构如下：

二、开发核心难点与解决过程
1. 难点一：多级路由布局嵌套混乱，页面联调显示异常
在开发后台管理系统布局时，我采用了公共布局（侧边栏 + 顶部栏）+ 子页面的嵌套路由模式。开发过程中遇到了严重问题：路由层级配置错误，导致页面无法正常渲染、布局与页面无法匹配、跳转后出现空白页，前后端联调时页面结构完全错乱。
因为后台所有页面都需要复用同一个布局，如果路由父子关系写错、component 引入错误、children 结构不规范，就会直接导致页面无法加载、样式失效、路由守卫不生效，严重影响联调进度。
解决思路与过程：
重新梳理路由结构，严格使用父子嵌套路由：AdminLayout 作为父路由容器，仪表盘、题目管理等页面作为子路由放在 children 中；
统一在布局组件中使用 <router-view> 渲染子页面，确保布局与页面正确挂载；
修正路由路径层级，避免路径重复、前缀错误；
重新配置路由守卫，确保登录状态判断与页面跳转逻辑正常；
重启开发服务器，逐页测试跳转、刷新、权限拦截，最终让布局嵌套恢复正常，联调时页面能够稳定显示。
难点二：前后端已配置接口文档，但前端始终找不到接口（404 / 跨域）
项目前后端已经配置好接口文档 http://localhost:8121/api/v3/api-docs，且前端可正常访问文档，但在实际联调时，前端调用接口始终报错 404 找不到接口，或直接出现跨域无法请求的问题。
我一度以为是接口地址写错、后端未成功启动，但检查后发现后端正常运行，接口文档可访问，前端自动生成的代码也无误，但请求就是无法到达后端。
解决思路与过程：
排查发现：后端配置了统一前缀 /api，端口为 8121，而前端直接请求会被浏览器跨域策略阻止；
在 vite.config.ts 中配置代理转发（proxy），将前端 /api 开头的请求转发到 http://localhost:8121/api；
修正接口请求的 baseURL，确保前端请求路径与后端接口一致；
检查 axios 封装逻辑，确认请求头、token、请求格式与后端匹配；
重启前端项目，再次调用接口，成功解决 404 与跨域问题，前后端实现正常联调。