Plan-Design.md

📅 第一周 (12/02 - 12/08)：AMS 核心功能攻坚

目标：完成广告管理系统（Server 1）的所有业务逻辑，确保广告能录入、能审核，API 接口能通。

🟢 后端任务 (Spring Boot)

• 数据库建表：执行之前确定的 SQL（advertisements, ad_placements, users 等）。

• 文件上传接口：实现图片和视频文件的上传，保存到本地服务器目录，并返回可访问的 URL。

• 广告主业务：实现“创建广告”接口（存入数据库，状态设为待审核）。

• 管理员业务：实现“审核广告”接口（修改状态 pending -> active）。

• 站长业务：实现“新建广告位”接口（绑定网站 ID 和版式 layout）。

• 公共投放 API (基础版)：

  • 写好 GET /api/v1/ad/serve。本周只要求跑通：根据 placement_id 返回对应的广告，暂时不需要写复杂的推荐算法，随机返回一个通过审核的即可。

🔵 前端任务 (AMS Vue)

• 广告主面板：

  • 新建广告表单：标题、分类、上传素材（对接后端）、选择版式（Banner/Sidebar/Card）。

• 广告列表：显示状态（审核中/已通过）。

• 管理员面板：

  • 审核列表：点击“通过”或“驳回”。

• 站长面板：

  • 广告位管理：新建广告位。

• 获取代码页面：根据后端返回的 placement_id，拼接并显示那段 HTML+JS 代码（这是给老师看的重要交互点）。

本周验收标准： 登录广告主账号上传一张图 -> 登管理员账号审核通过 -> Postman 调用 serve 接口能拿到这张图的 URL。

---

📅 第二周 (12/09 - 12/15)：三大内容网站与 SDK 开发

目标：完成 3 个内容网站的前端开发，并实现广告的真实展示与视频插播。

🟢 后端任务

• 完善公共 API：

  • 升级 /serve 接口：加入 placement_id 的校验逻辑（确保横幅位只给横幅广告）。

• 开发 /track 接口：接收前端的上报，在数据库 ad_displays 表里 +1。

• 跨域配置 (CORS)：配置 Spring Boot 允许来自 localhost:xxxx (其他端口) 的请求携带 Cookie。

🔵 前端任务 (News / Shop / Video / SDK)

• 封装 SDK (sdk.js)：

  • 写一段通用的 JS：解析 URL 参数 -> 请求后端 API -> 创建 DOM (<img> 或 <video>) -> 插入页面 -> 发送 /track 上报。

• 新闻网站 (News)：

  • 用 Vue 写几个静态页面（数码新闻、体育新闻）。

• 在页面顶部放 Banner 容器，正文放 Card 容器。

• 埋点：进入页面时，确保 SDK 请求带上 tag=digital。

• 购物网站 (Shop)：

  • 写几个商品详情页。

• 在右侧放 Sidebar 容器。

• 埋点：确保请求带上 tag=clothes 或 tag=phone。

• 视频网站 (Video) - 🔥 技术难点：

  • 实现播放器逻辑：

• 监听 timeupdate -> 暂停主视频 -> 调 API (传 mime=video/mp4) -> 创建全屏覆盖层 -> 播放广告 -> 广告结束 -> 恢复主视频。

本周验收标准： 打开三个网站，都能看到广告。视频播放到指定时间能自动暂停播广告。数据库里能看到展示量的增长。

---

📅 第三周 (12/16 - 12/22)：精准算法、联调与部署

目标：实现“跨站追踪”的核心亮点，并将项目部署到模拟的 4 台服务器上。

🟢 后端任务

• 实现精准算法：

  • 修改 /serve 接口逻辑。

• 读取请求中的 Cookie -> 查数据库 user_interests 表。

• 逻辑：如果该 Cookie 之前看过“数码”类新闻 -> 优先返回“数码”类广告。

• 用户画像更新：

  • 在 /serve 接口中，根据传入的 context_tag 实时更新该 Cookie 对应的兴趣权重。

🔵 前端与部署任务

• 部署环境搭建：

• 修改前端代码里的 API 地址，指向统一的后端接口。

• 全链路联调 (场景测试)：

  • 测试剧本：清空浏览器缓存 -> 访问新闻网（猛看数码文章） -> 访问购物网。

• 验证：购物网的侧边栏是否变成了数码广告？（如果是，说明追踪成功）。

• Bug 修复：重点解决 Cookie 跨域写不进去、视频广告加载失败等问题。

本周验收标准 (12/23 演示前状态)： 完整的故事线跑通：广告主发广告 -> 审核 -> 匿名用户看新闻积累兴趣 -> 转到购物网被精准推荐 -> 视频插播正常。

---

📅 12 月 23 日：老师检查 (Checkpoint)

• 演示策略：不要只展示代码，要演示流程。

• 准备两个浏览器窗口：

  • 左边窗口：广告管理后台（展示数据变化）。
  • 右边窗口：内容网站（展示用户行为）。

• 操作：右边刷页面，左边数据实时变动，老师会很认可。

---

📅 第四周 (12/24 - 12/30)：展示准备与文档

目标：为全班 Pre 做准备，确保万无一失。

• PPT 制作：

  • 架构图：画出 4 个服务器是如何交互的。

• 难点解析：专门一页讲“如何在不登录的情况下追踪用户”（Cookie + IP/指纹）。

• 难点解析：专门一页讲“视频流中插技术”。

• 代码清理：

  • 把 console.log 删一删，注释补一补（万一老师要看源码）。

---

💡 关键时间管理建议

• 不要在内容网站的后台上浪费时间：新闻、商品数据直接写死在前端 JS 的 data 里**，**千万不要去建 news 表、**product** 表写后端 CRUD，那不是实验重点。
• 素材提前备好：本周日之前，找好 3 张横幅图、3 张竖图、1 个 15 秒以内的 MP4 广告视频。不要在开发时花几个小时找图。
• 先跑通，再精准：第一周不要管推荐算法，API 只要能随机返回图片就是胜利。算法是最后加的“调料”。