D12 作业：给 D10 的 users API 做一个管理页

目标

• 验证：能启动 Vite+Vue3、调后端 API、展示与增删数据、处理 CORS。

场景

• 本地开发机。D10 的 fastcrud 服务继续跑（uvicorn main:app --port 8000），D12 前端 5173。

任务

任务 1：启动项目 + 列表页

• npm create vite@latest mypanel -- --template vue，启动 npm run dev。
• 写 UserList.vue：fetch GET /api/users（用 Vite 代理指向 http://localhost:8000）渲染表格（id/name/balance）。

任务 2：带鉴权的写操作

• 加一个"新建用户"输入区（name + balance），POST /api/users 时带 X-Admin-Key: secret-123。
• 演示"带错 key"被后端 401 拦截的提示。
• 加"删除"按钮调 DELETE。

任务 3：CORS/代理说明 + 提交

• 在 README 里写清：为什么前端 5173 直接调 8000 会被拦（CORS），Vite 代理怎么解决的。
• 提交进 docs/training/学员/<姓名>/D12/，PR 中文提交信息，如：D12 作业：users管理页（姓名）。

验收标准（讲师核验用）

• 项目能 npm run dev 启动，列表页渲染 D10 的数据
• 新建/删除调用成功，错 key 有 401 提示
• 代理配置正确（vite.config 里 proxy /api）
• README 的 CORS 说明正确

参考

• 课程.md 第 2、4、6 节
• 学习网站.md → D12 分组