个人总结——网络安全与软件工程综合实践角色前端开发所属团队Zeroday项目名称OWASP Juice Shop AI 提示注入安全插件本文是我在《网络安全与软件工程综合实践》课程中的个人总结记录了我在团队项目中的学习历程、技术收获、协作经验以及对软件工程的思考。项目地址https://github.com/rafayel-306/juice-shop分支ai-challenge-plugin一、回顾1. 目标达成掌握 Angular 独立组件开发通过本项目我从零开始学会了使用 Angular CLI 生成组件、配置独立组件standalone: true、手动导入CommonModule、FormsModule、HttpClientModule并成功实现了 AI 挑战页面的前端交互。这是我在课程中最大的技术突破。熟练使用 Git 分支与 PR 协作学会了创建 feature 分支、提交 Pull Request、参与代码评审并解决了合并冲突。从最初不敢动代码到能独立管理分支进步明显。理解前后端分离接口设计通过与后端同学联调我掌握了定义请求/响应格式、处理challengeMode参数、调试跨域/路由问题的能力。掌握前端状态管理及本地持久化利用activeChallenge变量管理挑战激活状态并通过localStorage实现进度保存刷新页面不丢失。2. 不足响应式布局不完善前端界面在窄屏设备下挑战卡片会出现错位。原因开发时主要使用宽屏测试未充分进行移动端或小窗口适配且对 CSS 媒体查询掌握不够熟练。自动化测试缺失未编写前端单元测试如 Angular 的 TestBed。原因时间安排上前置任务耗时过多后期急于联调忽略了测试脚本的编写。3. 改进计划学习 CSS 媒体查询与 Flex/Grid 布局完成项目后我计划专门练习响应式设计确保类似项目能适配多种屏幕尺寸。补写前端单元测试使用 Jasmine/Karma 为AiAssistantComponent编写核心交互测试并集成到 CI 流程中。4. 【人机协作】记录使用的 AI 工具DeepSeek、ChatGPT、Kimi。AI 帮助AI 为我总结了 Angular 独立组件的关键步骤并生成了组件模板的初稿还帮我分析了localStorage的用法。采纳采纳了 AI 关于“将activeChallenge定义为number | null类型”的建议因为这样能更准确地表达未激活状态。拒绝AI 建议使用ngx-cookie-service存储挑战进度我拒绝了因为localStorage更简单且无需额外依赖符合项目轻量化需求。效果评分4 分。AI 快速提供了代码模板和概念解释节省了约 30% 的查阅文档时间但在具体布局调优时建议不够精准仍需手动调试。二、耕耘1. 时间与产出统计总学习时间按周分布周次小时数主要工作第1周10环境搭建、学习Angular基础、理解Juice Shop前端架构第2周14编写ai-assistant组件、样式、与后端联调第3周8修复Bug、录制演示视频、编写文档总计约32 小时。代码量与注释项目数据独立编写代码量LOC约 170 行TypeScript HTML SCSS注释量 / 注释率约 20 行 / 12%文档页数个人参与部分约 10 页含SOLUTIONS.md挑战说明、PPT 前端部分代码提交次数8 次Git 记录2. 关键产出物代码仓库https://github.com/rafayel-306/juice-shop分支ai-challenge-plugin包含frontend/src/app/ai-assistant/全部前端代码。演示视频已录制完整操作流程展示激活挑战、注入成功、卡片状态变化等。文档SOLUTIONS.md挑战解法、环境配置说明、PPT 前端部分。3. 【人机协作】记录AI 使用我让 AI 生成了绘制折线图的 Matplotlib 代码Python以便展示时间分布。效果AI 生成的代码基本可用但坐标轴标签需要手动调整。AI 建议我将每周时间拆分为“编码/调试/文档”三类堆叠柱状图这确实提升了可读性我采纳了该建议。评分4 分节省了图表设计时间但需人工微调。三、收获1. 量化成果用户量项目组内及邀请的 5 位同学试用功能满意度平均 4.6 分5 分制。代码影响力前端组件代码被组内复用项目仓库未公开发布推广暂无 Star/Fork。2. 技能提升技术能力Angular 独立组件开发从零到完成完整组件掌握了Component元数据、生命周期钩子、依赖注入。Angular Material 使用熟练使用mat-icon、mat-button、mat-toolbar等组件并自定义主题色。前端调试能力熟练使用 Chrome DevTools 检查网络请求、断点调试、查看 localStorage。软技能团队协作沟通每日站会中清晰汇报进度主动向后端同步接口字段变更。代码评审Code Review在 GitHub PR 中能指出逻辑错误和样式不规范问题并接受他人建议。文档编写用 Markdown 撰写了清晰的挑战使用说明条理分明。3. 使用的软件/工具类别工具用途开发VS Code、PyCharm编写 TypeScript、HTML、SCSS版本控制Git、GitHub提交代码、PR 协作调试Chrome DevTools查看网络请求、Console 日志协作微信、腾讯会议每日站会、问题讨论文档Typora、Markdown编写SOLUTIONS.md演示OBS Studio、剪映录制、剪辑演示视频4. 【人机协作】记录AI 帮助AI 在聊天中问我“你是否还提升了 CSS 布局能力”这让我意识到我确实改进了 Flex 布局的使用。是否赞同不完全赞同AI 还说我提升了“项目管理能力”但前端角色对项目管理的直接参与较少我认为这属于组长职责。因此我删除了这一条保留了确实提升的技能。评分4 分AI 能辅助发现盲点但需要人工过滤。四、结构化的理解布鲁姆分类1. 知识(Knowledge)Angular 独立组件Angular 14 新特性组件可标记standalone: true不再依赖NgModule。来源课程资料、Angular 官方文档。提示注入Prompt Injection攻击者通过构造特殊输入使 AI 执行非预期指令。来源OWASP Top 10 for LLM 文档、项目实践。localStorage浏览器提供的键值对存储 API数据不会过期同源下可跨页面访问。来源MDN Web Docs。2. 理解(Comprehension)前端路由Hash 模式URL 中的#后面的部分不会发送给服务器由前端框架如 Angular接管。Juice Shop 使用useHash: true所以自定义页面必须通过/#/ai-assistant访问。理解了这一点后我成功配置了新路由。声明式 UI 与响应式更新Angular 中数据绑定如[(ngModel)]和属性绑定如[class.completed]使视图自动响应数据变化。我深刻体会到这种模式比传统的 jQuery 手动操作 DOM 更清晰、更少 Bug。3. 应用(Application)场景一在 Juice Shop 中添加新页面步骤① 创建独立组件② 在app.routing.ts中添加路由{ path: ai-assistant, component: AiAssistantComponent }③ 在导航栏navbar.component.html添加routerLink链接。结果成功集成新页面且不破坏原有路由。场景二实现挑战激活状态管理步骤① 在组件中定义activeChallenge: number | null null② 在sendMessage()中用正则/^挑战([123])$/检测用户输入若匹配则设置activeChallenge并返回激活提示不发送后端③ 普通消息时将challengeMode: this.activeChallenge加入请求体。结果前端独立管理激活状态后端只需无状态处理。场景三保存挑战进度到本地步骤① 在ngOnInit中读取localStorage.getItem(ai_challenge_progress)② 解析 JSON 后恢复challenges数组的completed字段和totalScore③ 每次挑战完成时调用saveProgress()更新存储。结果刷新页面后进度保留用户体验提升。4. 分析(Analysis)复杂问题路由顺序冲突导致 API 请求被前端拦截成因后端 Express 中间件注册顺序中app.use(serveAngularClient())在自定义 API 路由之后导致任何未匹配请求都被 Angular 前端路由捕获。解决方案将自定义 AI 路由放在configureApp函数最开头在所有app.use之前。分析这体现了 Express 中间件“先注册先匹配”的原则。我虽然主要负责前端但通过协助调试也理解了后端路由机制并帮助团队整理了 API 文档。5. 综合(Synthesis)工具整合将 Angular、Git、GitHub Projects、Markdown 文档整合为完整的工作流。具体收获我使用 GitHub Projects 看板To Do/In Progress/Done跟踪前端任务每天更新状态。同时将设计稿、组件清单、接口文档汇总到 Markdown 文件中方便组员查阅。通过这种整合我们避免了“文档分散、进度不清”的问题。6. 评价(Evaluation)项目优势我们的前端界面与 Juice Shop 原生风格高度一致挑战卡片设计简洁清晰用户学习成本低。相比同类安全靶场如 Garak 命令行工具我们的交互更友好适合教学演示。不足响应式适配较差移动端体验不佳。相比之下Juice Shop 官方页面本身在小屏上已做了优化我们未完全继承其媒体查询。改进方向下一版本可参考官方 Navbar 的响应式类如hide-lt-md扩展至挑战面板。【人机协作】记录AI 帮助AI 生成了布鲁姆分类的框架示例并给出了每个层次的定义解释。判断我根据自己的实际经历修改了示例例如将“知识”中的例子替换为 Angular 独立组件而非通用概念。AI 的示例虽然标准但与我的项目关联度不够需要人工订正。评分3 分框架有帮助但内容填充完全依赖自己。五、属于我们的人月神话团队协作经验 前后端接口字段不一致导致联调失败问题描述前端发送{ mode: 1 }后端却期望challengeMode导致挑战始终无法激活。解决方案统一接口文档采用后端定义的challengeMode为标准前端修改代码后端做兼容优先取challengeMode若不存在再取mode。实例佐证修改后联调一次通过此后所有接口变更都先行更新 Markdown 文档并同步给全员。【人机协作】记录AI 提供案例AI 向我介绍了“人月神话”中关于沟通成本的概念并举例“不同模块负责人接口定义不一致导致返工”。迁移应用我将这个案例迁移到我们的“字段不一致”问题上意识到事先的接口评审比事后修复更重要。AI 的经典案例帮助我理解了问题本质。评分5 分AI 提供了理论支撑让我能更有依据地向团队提议“先定接口后编码”。六、对团队的分析1. 团队发展阶段形成阶段初期三人分工我负责前端组长负责后端杨雯惠负责原型。我们确立了 Git 工作流feature 分支 PR。磨合阶段因路由冲突问题组员对“谁的问题”有争议组长主动调试并分享日志最终统一认识。另外挑战3 评论提交的顺序问题也经历了讨论。规范阶段制定了代码规范ESLint、PR 评审必须包含具体意见、接口文档先行。我学会了每次提交前npm run lint。创造阶段我们自主设计了“挑战-激活分离”模式并实现了 localStorage 进度保存这些不是作业强制要求而是团队自发的创新。2. 是否达到“创造”阶段是。我们不仅完成了三个基础挑战还增加了积分卡片、重置按钮、激活提示条等增强功能且界面风格完全贴合 Juice Shop。这些设计是我们团队内部 brainstorming 的结果没有照搬任何现成模板。【人机协作】记录AI 帮助分析AI 解释了塔克曼团队发展模型并举例各阶段的典型行为。是否认同认同。AI 将“形成”描述为“成员客气、探索”我们初期确实如此。AI 的分类帮助我们定位到了“规范”阶段还需要强化代码审查清单我们据此改进了 PR 流程。评分4 分提供了分析框架具体判断仍依赖团队实际情况。七、证明学会了软件工程1. 研发出符合用户需求的软件自评达成。我们通过原型设计邀请 5 位同学试用收集反馈后调整了挑战3 的提示语。证据用户满意度调查表4.6/5、典型评语“挑战3 让我理解了评论污染”。问卷截图见附件。2. 通过一定软件流程在预计时间内发布“足够好”的软件自评基本达成但自动化测试未完成比计划延迟 2 天。证据Sprint BacklogTrello 看板截图、燃尽图手绘简图、Git 版本发布记录v1.0 tag。3. 能证明所开发的软件是可维护和可继续发展的自评较好达成。代码结构清晰组件独立注释充分。证据代码规范ESLint Prettier 配置单元测试覆盖率暂未达 70%计划后续补充API 文档SOLUTIONS.md中包含前端与后端交互的完整说明。4. 综合掌握理论理解前后端分离、RESTful 风格、路由 Hash 模式等。使用工具熟练使用 Angular CLI、Git、Chrome DevTools、Markdown。工程能力完成从需求分析、原型设计、编码、联调、测试、文档到演示的全流程。【人机协作】记录AI 协助AI 为我生成了本报告中“测试用例”的表格模板并建议使用localStorage存储用户设置。AI 生成注释质量AI 生成的代码注释有时太啰嗦有时忽略关键逻辑。我倾向于自己写关键注释AI 注释作为检查的参考。评分3.5 分辅助作用明显但不可替代人工审查。八、建议1. 对下一届学生问题对 Angular 独立组件模式不熟悉容易陷入传统 NgModule 陷阱。建议先快速过一遍 Angular 官方教程的“独立组件”章节并动手创建一个最小示例。不要直接套用旧版代码否则会浪费很多时间在模块声明上。2. 对大一的自己问题大一的我惧怕命令行和 Git只用拖拽上传代码。建议尽早学习 Git 基础命令和 GitHub Flow。可以参加 Git 的互动游戏如learngitbranching弄懂分支、合并、冲突解决这对团队协作是必修课。3. 对课程改进问题课程缺少对“大型开源项目扩展”的专项指导导致我们在 Juice Shop 路由集成上花费大量时间。建议增加一次讲座或实验专门讲解如何为大型开源项目如 Juice Shop添加新功能包括分析项目启动流程、路由注册方式、编译配置等。或者提供一份常见的“踩坑清单”帮助学生快速定位类似问题。【人机协作】记录AI 建议AI 曾建议“下一届学生应尽早使用 AI 编程助手”。我认为这个建议最不切实际因为对新生来说手动编码理解基础语法更重要过早依赖 AI 可能削弱调试能力。评分3 分部分建议有价值但需结合实际情况筛选。报告日期2026年5月24日团队Zeroday附项目截图、代码片段详见 GitHub 仓库分支ai-challenge-plugin。
