102400103 李润君软件工程第二次实践作业

102400103 李润君 2026-09-24 22:58:14

一、作业描述
二、Git仓库、代码规范与AI工具说明
2.1 仓库与规范链接
2.2 AI编程助手说明
2.3 代码规范落地说明
三、PSP表格
1. PSP表格
四、NABCD 需求分析
1. 需求背景
2. NABCD 总体分析
3. 详细需求说明
4. Benefit（核心好处）
5. Competitors（竞品分析）
6. Delivery（交付成果）
7. 被否决的AI建议（真实人机协作记录）
8. NABCD 小结
五、原型设计与原型链接
5.1 整体设计思路
5.2 页面架构设计
5.3 数据结构设计
5.4 核心业务流程设计
5.5 关键问题与设计的解决方案
5.6 功能结构图
5.7 系统架构与数据流
5.8 数据库表结构（7 张表）
5.9 原型设计阶段：遇到的问题与解决方式
六、原型展示
6.1 原型成果以及功能展示
6.2 原型展示阶段：遇到的问题与解决方式
七、人机结对讨论过程（含 3 个代表性案例）
7.1 人机结对编程协作记录
7.2 人机结对编程反思
7.3 人机结对与人人结对的异同
7.4 本次人机结对的收获与经验
7.5 改进方向
7.5.1 数据层改进
7.5.2 前端可视化模块改进
7.5.3 交互与用户体验改进
7.5.4 架构与工程化改进
7.5.5 功能拓展方向
一、作业描述
二、Git仓库、代码规范与AI工具说明
2.1 仓库与规范链接
2.2 AI编程助手说明
2.3 代码规范落地说明
三、PSP表格
1. PSP表格
四、NABCD 需求分析
1. 需求背景
2. NABCD 总体分析
3. 详细需求说明
4. Benefit（核心好处）
5. Competitors（竞品分析）
6. Delivery（交付成果）
7. 被否决的AI建议（真实人机协作记录）
8. NABCD 小结
五、原型设计与原型链接
5.1 整体设计思路
5.2 页面架构设计
5.3 数据结构设计
5.4 核心业务流程设计
5.5 关键问题与设计的解决方案
5.6 功能结构图
5.7 系统架构与数据流
5.8 数据库表结构（7 张表）
5.9 原型设计阶段：遇到的问题与解决方式
六、原型展示
6.1 原型成果以及功能展示
6.2 原型展示阶段：遇到的问题与解决方式
七、人机结对讨论过程（含 3 个代表性案例）
7.1 人机结对编程协作记录
7.2 人机结对编程反思
7.3 人机结对与人人结对的异同
7.4 本次人机结对的收获与经验
7.5 改进方向
7.5.1 数据层改进
7.5.2 前端可视化模块改进
7.5.3 交互与用户体验改进
7.5.4 架构与工程化改进
7.5.5 功能拓展方向
二、Git仓库、代码规范与AI工具说明
2.1 仓库与规范链接
2.2 AI编程助手说明
2.3 代码规范落地说明
三、PSP表格
1. PSP表格
四、NABCD 需求分析
1. 需求背景
2. NABCD 总体分析
3. 详细需求说明
A1 首页展示需求
A2 热度走势页面需求
A3 论文管理页面需求
A4 论文导入页面需求
A5 关于页面需求
4. Benefit（核心好处）
5. Competitors（竞品分析）
项目差异化优势
6. Delivery（交付成果）
7. 被否决的AI建议（真实人机协作记录）
8. NABCD 小结
五、原型设计与原型链接
5.1 整体设计思路
5.2 页面架构设计
5.3 数据结构设计
5.4 核心业务流程设计
5.5 关键问题与设计的解决方案
5.6 功能结构图
5.7系统架构与数据流
5.8 数据库表结构（7 张表）
5 实现过程中遇到的问题与解决方式
七、人机结对讨论过程（含 3 个代表性案例）
案例A：需求分析与原型设计协作
案例B：编码实现，核对统计口径与功能逻辑
案例C：Bug定位、调试与修复验证
7.2 人机结对编程反思
7.3 人机结对与人人结对的异同
相同点
不同点
7.4 本次人机结对的收获与经验
7.5 改进方向

一、作业描述

二、Git仓库、代码规范与AI工具说明

2.1 仓库与规范链接

2.2 AI编程助手说明

2.3 代码规范落地说明

三、PSP表格

1. PSP表格

四、NABCD 需求分析

1. 需求背景

2. NABCD 总体分析

3. 详细需求说明

4. Benefit（核心好处）

5. Competitors（竞品分析）

6. Delivery（交付成果）

7. 被否决的AI建议（真实人机协作记录）

8. NABCD 小结

五、原型设计与原型链接

5.1 整体设计思路

5.2 页面架构设计

5.3 数据结构设计

5.4 核心业务流程设计

5.5 关键问题与设计的解决方案

5.6 功能结构图

5.7 系统架构与数据流

5.8 数据库表结构（7 张表）

5.9 原型设计阶段：遇到的问题与解决方式

六、原型展示

6.1 原型成果以及功能展示

6.2 原型展示阶段：遇到的问题与解决方式

七、人机结对讨论过程（含 3 个代表性案例）

7.1 人机结对编程协作记录

7.2 人机结对编程反思

7.3 人机结对与人人结对的异同

7.4 本次人机结对的收获与经验

7.5 改进方向

7.5.1 数据层改进

7.5.2 前端可视化模块改进

7.5.3 交互与用户体验改进

7.5.4 架构与工程化改进

7.5.5 功能拓展方向

一、作业描述

二、Git仓库、代码规范与AI工具说明

2.1 仓库与规范链接

2.2 AI编程助手说明

2.3 代码规范落地说明

三、PSP表格

1. PSP表格

四、NABCD 需求分析

1. 需求背景

2. NABCD 总体分析

3. 详细需求说明

4. Benefit（核心好处）

5. Competitors（竞品分析）

6. Delivery（交付成果）

7. 被否决的AI建议（真实人机协作记录）

8. NABCD 小结

五、原型设计与原型链接

5.1 整体设计思路

5.2 页面架构设计

5.3 数据结构设计

5.4 核心业务流程设计

5.5 关键问题与设计的解决方案

5.6 功能结构图

5.7 系统架构与数据流

5.8 数据库表结构（7 张表）

5.9 原型设计阶段：遇到的问题与解决方式

六、原型展示

6.1 原型成果以及功能展示

6.2 原型展示阶段：遇到的问题与解决方式

七、人机结对讨论过程（含 3 个代表性案例）

7.1 人机结对编程协作记录

7.2 人机结对编程反思

7.3 人机结对与人人结对的异同

7.4 本次人机结对的收获与经验

7.5 改进方向

7.5.1 数据层改进

7.5.2 前端可视化模块改进

7.5.3 交互与用户体验改进

7.5.4 架构与工程化改进

7.5.5 功能拓展方向

二、Git仓库、代码规范与AI工具说明

2.1 仓库与规范链接

项目	链接
CodeArts / Git 仓库地址	https://devcloud.cn-north-4.huaweicloud.com/b708e5b81e184cff980dda4de14ad9fd/VisionTrend%EF%BC%88%E9%A1%B9%E7%9B%AE%E5%90%8D%EF%BC%9A102400103）
代码规范（codestyle.md）	https://codehub.devcloud.cn-north-4.huaweicloud.com/b708e5b81e184cff980dda4de14ad9fd/VisionTrend.git
原型网页访问链接	【https://codehub.devcloud.cn-north-4.huaweicloud.com/b708e5b81e184cff980dda4de14ad9fd/VisionTrend/blob/main/codestyle.md】
云服务器访问链接	【http://113.44.129.70/%EF%BC%88%E5%8D%8E%E4%B8%BA%E4%BA%91 ECS · EulerOS 3.0 · Nginx 1.24）】

2.2 AI编程助手说明

工具	版本/形态	主要用途	使用占比感受
豆包AI编程助手	网页端，人机结对协作	在仓库内直接落地代码；采集管道、抽词算法、后端接口、文档撰写；配合我完成调试与口审验证	约70%的代码由它产出初稿或重构建议，我负责接口判断、验收与修改
通义千问	网页端	辅助查阅API文档、生成ECharts图表代码，核对论文数据处理逻辑，辅助博客文字润色	约20%，用于交叉校验豆包生成代码，补充可视化相关代码片段
ChatGPT	网页端	查询OpenAlex接口调用示例，排查Python语法细节，辅助理解第三方文献接口规则	约10%，用于疑难接口问题查询，做方案对比

2.3 代码规范落地说明

代码规范见仓库根目录 codestyle.md，其主体条款来自公开的官方规范与大公司规范，并在每一节标题后标注了来源：

覆盖范围	采用规范
Python（后端、数据管道）	PEP 8、PEP 257、Google Python Style Guide
SQL / 数据库	Google SQL Style Guide
JavaScript / Vue 前端	Airbnb JavaScript Style Guide、Vue.js官方风格指南、Google HTML/CSS Style Guide
接口设计	Google AIP / REST 资源命名惯例
提交信息	Conventional Commits 1.0.0
安全与数据合规	OWASP Secure Coding Practices

三、PSP表格

1. PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	20	15
· Estimate	·估计这个任务需要多少时间	20	15
Development	开发	480	425
· Analysis	·需求分析（包括学习新技术）	60	50
· Design Spec	·生成设计文档	30	25
· Design Review	·设计复审	20	15
· Coding Standard	·代码规范	30	25
· Design	·具体设计（页面/数据结构/交互流）	60	55
· Coding	·具体编码	200	180
· Code Review	·代码复审	30	25
· Test	·测试（自我测试、修改、提交）	50	50
Reporting	报告	100	90
· Test Report	·测试报告	30	20
· Size Measurement	·计算工作量	20	20
· Postmortem & Process Improvement Plan	·事后总结，并提出过程改进计划	50	50
	合计	600	530

偏差分析：整体比预估少约70分钟。主要原因是：①AI结对把“查资料 + 写初稿”的时间大幅压缩；②纯前端方案避开了后端联调。而测试环节与预估持平，因为浏览器兼容与响应式布局仍需逐项人工验证——AI给出的代码“看起来对”不等于“跑起来对”，验证时间无法省略。

偏差分析：整体比预估少约 70 分钟。主要原因是：①AI 结对把"查资料 + 写初稿"的时间大幅压缩（编码环节省时明显）；②纯前端方案避开了后端联调。而测试环节与预估持平，因为浏览器兼容与响应式布局仍需逐项人工验证——AI 给出的代码"看起来对"不等于"跑起来对"，验证时间无法省略。

四、NABCD 需求分析

1. 需求背景

在计算机视觉科研学习中，学生与科研人员需要梳理顶会论文研究热点、查看热度走势、归类论文方向。传统的文档整理、截图汇总方式杂乱无章，没有统一可视化页面，查看体验差、无法直观展示功能模块。

因此本次项目搭建计算机视觉顶会论文热词分析静态展示平台，通过 Flask 搭建轻量 Web 网站，整合首页、热度走势、论文管理、论文导入、关于五大功能页面，实现功能模块化展示、页面跳转交互，为后续对接数据接口、实现真实热词分析功能奠定原型基础。

2. NABCD 总体分析

维度	说明
N（Need）需求	学生在科研入门、课程作业展示时，需要一个规整的Web原型平台，集中展示CV顶会热词分析的全套功能模块。传统文档展示零散、无交互、无页面结构，需要标准化网页原型承载整套功能设计。
A（Approach）做法	使用 Flask 搭建极简Web后端，配置标准`templates`模板目录；基于墨刀完成5个功能页面原型设计；编写路由代码实现页面跳转；通过Git完成版本管理、代码规范约束，实现完整可运行的网页原型项目。
B（Benefit）好处	将零散的功能设计整合为完整Web网站原型，页面结构清晰、可跳转交互；标准化项目目录符合软件工程规范；方便作业展示、功能演示，为后续开发真实数据分析功能预留架构。
C（Competitors）竞争	网络现有论文分析平台均为成品功能网站，结构复杂、冗余度高，不适合课程原型作业；普通静态网页无后端路由、无规范项目结构。本项目轻量化、结构标准、专门适配课程结对作业需求。
D（Delivery）交付	交付标准化Flask项目代码、5个前端原型页面、规范文档、完整Git版本记录、人机结对开发博客，后续可部署华为云实现公网访问演示。

3. 详细需求说明

A1 首页展示需求

需求项	说明
功能描述	搭建平台首页，展示项目简介、功能导航入口
输入信息	用户网页点击操作
输出信息	平台主页面、各功能模块跳转入口
技术实现	Flask路由渲染home首页模板
异常处理	路由错误自动匹配默认首页，保证页面稳定性

A2 热度走势页面需求

需求项	说明
功能描述	提供CV论文热度趋势展示页面，预留图表展示位置
输入信息	用户页面访问
输出信息	热度走势原型页面
技术实现	独立路由绑定trends页面模板
异常处理	模板文件缺失提示页面加载异常

A3 论文管理页面需求

需求项	说明
功能描述	设计论文列表管理原型页面，预留论文展示、分类管理功能区域
输入信息	用户页面访问
输出信息	论文管理原型页面
技术实现	路由匹配papers页面模板
异常处理	统一页面加载异常提示

A4 论文导入页面需求

需求项	说明
功能描述	设计论文数据导入功能原型页面，预留数据录入、上传功能区域
输入信息	用户页面访问
输出信息	论文导入原型页面
技术实现	路由匹配import页面模板
异常处理	页面资源加载容错处理

A5 关于页面需求

需求项	说明
功能描述	展示项目介绍、开发说明、作业背景、人机结对开发说明
输入信息	用户页面访问
输出信息	项目说明原型页面
技术实现	路由匹配about页面模板
异常处理	基础页面稳定加载

4. Benefit（核心好处）

好处维度	说明
结构标准化	严格遵循Flask官方项目结构，统一`templates`模板存放规范，符合软件工程开发标准，杜绝文件杂乱、路径错误问题。
展示效果直观	相较于文档、截图展示，Web网页可点击跳转，完整还原产品使用逻辑，作业展示更专业、完整。
可拓展性强	基础后端路由架构搭建完成，后续只需新增接口、JS代码即可实现真实热词统计、数据分析功能，无需重构项目。
工程化规范	配备专属代码规范文档、完整Git版本提交记录，满足软件工程结对作业的规范性要求。
人机协作高效	本人主导项目结构设计、文件配置、代码校验，AI辅助生成路由代码、规范文档、作业文案，高效完成原型搭建。

5. Competitors（竞品分析）

竞品	优势	缺陷	本项目优势
成品数据分析网站	功能完整、可真实运算	代码冗余、结构复杂、不适配课程作业	轻量化、极简架构、专为课程作业定制
纯静态HTML网页	无需后端、搭建简单	无路由规范、无工程结构、无法拓展迭代	标准化Flask工程结构，具备完整软件项目雏形
文档PPT原型展示	制作简单、无需代码	无交互、无跳转、不符合软件开发流程	可交互跳转、工程化、符合结对编程要求

项目差异化优势

适配课程作业场景：不做冗余复杂功能，专注原型搭建、工程规范、人机结对实践，完全贴合本次软件工程作业要求。
架构规范标准：严格遵循Flask目录规范、Git版本规范、代码编写规范，是标准的入门级Web工程项目。
低门槛可部署：项目轻量化、依赖少，可快速部署华为云，完成作业最终交付要求。
人机结对落地：完整保留人机协作开发流程，区别于单人开发，契合《构建之法》结对编程核心思想。

6. Delivery（交付成果）

交付项	详细说明
标准化Flask项目	含app.py后端路由、标准templates模板文件夹、5个功能HTML原型页面
规范化文档	根目录codestyle.md代码规范文档，统一项目编码标准
Git版本仓库	Gitee远程仓库dev分支托管，完整提交记录、分支管理
原型设计成果	墨刀全套5页面原型设计，完整产品功能原型
作业博客文档	完整记录需求分析、原型设计、人机结对、项目搭建全过程
云端部署能力	项目架构支持华为云ECS部署，可实现公网在线访问

7. 被否决的AI建议（真实人机协作记录）

AI初始建议	否决原因（贴合本人项目）	最终采用方案
自动编写爬虫、数据解析代码	本次作业阶段仅需原型展示，无需真实数据功能，超出当前开发范围	只搭建页面路由与原型，预留后续功能拓展空间
自定义复杂动态图表代码	当前为静态原型阶段，无需实现可视化运算功能	保留原型页面布局，后续迭代再实现图表功能
新增数据库存储功能	原型展示阶段无需数据持久化，增加项目冗余度	轻量化开发，仅保留基础网页架构
批量修改HTML文件名	容易导致本地文件与路由不匹配，引发页面报错	人工核对文件名，统一路由与模板名称

8. NABCD 小结

本次项目立足课程作业原型开发真实需求，以轻量化Flask Web架构为核心，完成了全套CV热词分析平台原型搭建。
项目不追求复杂功能，重点落地软件工程规范、人机结对编程、标准化项目搭建三大核心要求。需求真实贴合学生作业场景、实现方案简单高效、交付成果完整规范，完全满足本次软件工程第二次作业的全部要求，同时为后续功能迭代、云端部署预留了充足空间。

五、原型设计与原型链接

5.1 整体设计思路

本项目 VisionTrend 是面向计算机视觉学习者的 CV 顶会情报分析原型，采用单页面 Tab 切换架构。整体设计遵循作业需求，优先保证核心业务功能完整，兼顾交互友好性，原型采用墨刀完成，编码使用 HTML+Tailwind + 原生 JS+ECharts 实现，全部数据运行在浏览器内存，无需后端服务，可直接打开文件演示。

设计核心思路：

业务分层：划分为热词总览、热度动态走势、论文库管理、顶会背景说明 4 个模块，模块之间职责隔离；
数据驱动视图：所有页面展示由内存论文、热词数组驱动，修改数据源后直接重新渲染页面 DOM 与图表；
联动下钻设计：热词榜单、图谱节点、论文关键词标签支持点击，一键切换到论文检索，实现 “看热点→看对应论文” 的业务闭环；
模拟能力实现作业要求：爬虫为前端模拟逻辑，完成论文新增、批量导入；图表使用 ECharts 实现力导向图谱、Bar‑Race 动态竞赛图；
容错交互设计：删除二次确认、表单必填校验、爬虫状态提示、图表自适应，提升原型易用性。
5.2 页面架构设计

模块	页面组件	设计说明
Header 导航栏	4 个 Tab 切换按钮	固定页面顶部；点击切换对应 section；tab-active 样式标记当前激活页面
dashboard 热词总览	指标卡片、Top10 榜单、ECharts 力导向图谱	首页仪表盘，展示统计概况、热门方向、关键词技术关联；元素支持点击下钻检索论文
trends 热度动态走势	Bar-Race 图表容器、播放 / 暂停按钮、提示说明块	专门承载多年热词演变动画；切换到本 Tab 之后再初始化图表，规避 display:hidden 隐藏 DOM 造成 ECharts 画布空白问题
papers 论文库管理	检索筛选栏、爬虫状态提示条、论文表格、新增 / 编辑 Modal 弹窗	实现论文查询、增删改、模拟爬虫；复用同一弹窗区分新增、编辑两种业务场景
about 顶会背景说明	顶会介绍卡片、统计口径文本	展示 CVPR/ICCV/ECCV 会议信息，公开热度计算公式，保证统计结果可解释
Footer 页脚	作业信息文本	标注作业来源、数据来源声明

5.3 数据结构设计

对象名称	字段	设计说明
论文 Paper 对象	id、conf、year、title、keywords、link、abstract	id 作为唯一主键；conf 存储会议；keywords 为关键词数组；保存标题、摘要、原文链接，支撑表格渲染和关键词筛选
Top 热词统计对象	name、count、growth、category	存储热词名称、论文数量、增长率、所属分类；用于渲染 Top10 排行榜，区分热度涨跌颜色
Bar-Race 时序数据对象	key 为年份字符串，value 为热度分数数组	按年份保存各个主题热度数值，为动态条形竞赛图每一帧提供数据源

热度得分计算公式：

Heat_Score = 词频 (TF) × 逆文档频率 (IDF) × (1 + 年增长率 × 0.5)

参数	设计说明
TF	关键词在全部论文集合的出现频次，代表基础热度
IDF	逆文档频率，降低宽泛通用词汇权重，突出专业术语
年增长率	热词相对上一年热度变化，0.5 系数适度放大新兴热点权重
文本预处理规则	过滤英文停用虚词；同义词缩写归一，例 3D-GS 统一规范为 Gaussian Splatting

5.4 核心业务流程设计

流程名称	流程设计说明
页面初始化流程	DOM 加载完成；渲染 Top10 榜单、初始化关键词图谱、渲染论文表格；监听窗口 resize，图表跟随窗口自适应重绘
Tab 标签切换流程	点击导航，隐藏其余 section，显示目标 section；切换 trends 模块，延时执行图表初始化与 resize，解决隐藏容器高度为 0 图表空白
热词下钻检索流程	点击榜单条目 / 图谱节点 / 论文关键词标签 → 自动切换 papers 标签页，回填搜索输入框，执行筛选查询
论文检索与模拟爬虫流程	输入关键词执行查询；本地匹配成功直接渲染表格；无匹配展示爬虫加载状态，延时模拟爬取完成，新增论文至内存数组，刷新表格展示结果
论文新增 / 编辑流程	打开复用弹窗；校验标题为必填；保存后更新内存论文数组；关闭弹窗，刷新论文表格；删除操作弹出确认框，确认后过滤删除对应 id 论文数据
Bar-Race 动画流程	setInterval 定时器循环切换年份索引，调用渲染函数绘制每一帧；增加播放状态布尔锁，防止快速点击按钮产生无限递归栈溢出；维护定时器变量，避免定时器重复叠加运行

5.5 关键问题与设计的解决方案

问题场景	问题描述	设计解决方案
ECharts 图表在隐藏 Tab 中空白	Tab 使用 display:hidden 隐藏，DOM 不可见，ECharts 拿不到容器宽高，画布渲染失败	切换至对应 Tab、DOM 可见后，调用 chart.resize() 重新适配容器尺寸
Bar-Race 动画栈溢出报错	原始代码播放、暂停函数内部互相调用，快速点击按钮触发无限递归	新增 isPlaying 布尔状态锁；函数内部禁止互相调用，仅由页面按钮点击驱动执行
模拟爬虫并发错乱	短时间多次搜索，多个 setTimeout 爬虫逻辑并发，页面状态提示条互相覆盖	增加爬虫运行状态标记，爬虫执行期间屏蔽新的爬虫请求
弹窗关键词分割产生空值	关键词输入中英文逗号混合分割，会产出空字符串元素	分割字符串之后使用 .filter(Boolean) 过滤空关键词
数据持久化	全部数据保存在 JS 内存数组，浏览器刷新页面，新增、爬虫生成数据全部丢失	原型演示阶段接受该限制；预留拓展方案，使用 localStorage 实现浏览器本地持久化存储

5.6 功能结构图

1 CV 热点分析平台
2 ├─功能1 论文信息爬取
3 │ ├─单篇抓取（论文标题 / CVF·ECVA 官方论文页链接）
4 │ ├─批量导入（每行一个标题 / CSV(title,venue,year) / BibTeX）
5 │ └─爬取审计日志（查询、命中链接、状态、来源、时间）
6 ├─功能2 论文列表管理
7 │ ├─增删改（含批量删除、手工补充关键词）
8 │ ├─模糊查询（论文编号 / 关键词 / 题目 / 作者）
9 │ ├─精确查询（完整题目）
10 │ └─查不到自动联网爬取 → 返回摘要、关键词、原文链接
11 ├─功能3 热门方向分析
12 │ ├─Top10 榜单（三会合并 / CVPR / ICCV / ECCV × 2022-2026）
13 │ └─热度公式：Heat_Score = 词频(TF) × 逆文档频率(IDF) × (1 + 年增长率 × 0.5)
14 ├─功能4 关键词图谱
15 │ ├─力导向共现图（节点大小=论文数，颜色=方向类型）
16 │ └─点击关键词 → 跨会热度折线 + 共现邻居 + 相关论文分页
17 ├─功能5 热度走势对比
18 │ ├─网页动画（bar chart race，可暂停、可点选年份）
19 │ └─离线 GIF（三会同屏版 / 三合并并版，同一份数据）
20 └─扩展功能
21 ├─年度热词演变（各年 Top10 逐行对比）
22 ├─关于与统计口径页（防答辩质疑）
23 └─论文详情与相关论文推荐

5.7系统架构与数据流

1 [CVF Open Access / ECVA / Semantic Scholar / arXiv]
2 │ ① 采集（限速+缓存）
3 ▼
4 data/raw/.json 原始列表与摘要缓存
5 │ ② 清洗与分词（去LaTeX、还原HTML实体、正则分词）
6 ▼
7 data/processed/corpus.jsonl 论文正文数据集
8 │ ③ 抽词：TF-IDF + TextRank 双轨投票 → 同义归一
9 ▼
10 paper_terms.jsonl / term_meta.json（论文-关键词权重 + 词表）
11 │ ④ 建库：热点榜单 + 共现网络
12 ▼
13 data/cv_papers.db（SQLite，7 张表）
14 │ ⑤ 读取
15 ▼
16 前端JS逻辑 → HTML+Tailwind+ECharts（5个视图页面）
17 │
18 └─matplotlib → outputs/assets/hot_race_.gif

5.8 数据库表结构（7 张表）

表	作用	关键字段
paper	论文主表	paper_no、conf、year、title、keywords、link、abstract
keyword	关键词表（归一后）	name、surface、zh、type、n_papers
paper_keyword	论文-关键词关联	paper_id、keyword_id、weight、algo
kw_edge	关键词共现边	src、dst、weight（共现篇数）
hot_score	热度榜单（派生表）	keyword_id、conf(含ALL)、year、freq、growth、heat
crawl_log	爬取审计日志	query、url、status、note、created_at
meta	建库元信息	k、v（论文数、关键词数、构建时间、公式口径）

5 实现过程中遇到的问题与解决方式

阶段	问题现象	定位过程	解决方式
原型图表渲染	ECharts图表在隐藏Tab页面空白	Tab采用display:hidden隐藏，DOM不可见，ECharts无法获取容器宽高，画布渲染失败	切换至对应Tab、DOM可见后，调用chart.resize()重新适配容器尺寸
动画交互	Bar-Race动画快速点击发生栈溢出报错	播放暂停函数内部互相调用，高频点击触发无限递归	新增isPlaying布尔状态锁；函数内部禁止互相调用，仅由页面按钮点击驱动执行
模拟爬虫	多次连续搜索，爬虫状态提示错乱	短时间多次搜索，多个setTimeout爬虫逻辑并发，页面状态条互相覆盖	增加爬虫运行状态标记，爬虫执行期间屏蔽新的爬虫请求
表单处理	关键词输入框分割后产生空字符串	中英文逗号混合分割字符串，会产生空数组元素	分割字符串之后使用 .filter(Boolean) 过滤空关键词
数据存储	浏览器刷新页面，新增论文数据全部丢失	全部数据保存在JS内存数组，页面刷新内存清空	原型演示阶段接受该限制；预留拓展方案，使用localStorage实现浏览器本地持久化存储

#六、原型展示
6.1原型成果以及功能展示

截图 1：热词总览首页。展示指标卡片、Top10 榜单、关键词力导向图谱完整页面效果。

截图 2：Top10 榜单交互效果。展示榜单 hover 高亮，点击条目跳转论文筛选页面的界面。

截图 3：关键词图谱交互效果。展示图谱拖拽缩放，点击节点执行下钻筛选的页面。

动图 1：bar‑race 动画演示.gif。演示 2022‑2026 时间段内热词排名动态更迭完整过程。

截图 4：热度动态走势页面。Bar‑Race 竞赛图处于播放状态，显示年份标题以及条形动画。

截图 5：论文库检索成功页面。关键词检索命中数据，论文表格渲染结果，同时展示爬虫成功提示条。

截图 6：模拟爬虫运行界面。检索无匹配结果，页面显示爬虫加载状态提示。

截图 7：新增 / 编辑论文弹窗。展示复用弹窗表单，各个输入项以及表单必填校验效果。

截图 8：批量导入完成界面。点击批量导入按钮之后，论文列表更新的页面效果。

)

截图 9：顶会背景说明页面。三大会议介绍卡片，热度统计口径公式展示页面

##6.2 代码说明
以下为关键代码（约 300 行，均为 AI 生成初稿、经我审查修改；思路说明附后）。
###6.2.1 Top 10 榜单渲染（功能3）
function renderTop10List() {
const container = document.getElementById('top10-container');
container.innerHTML = '';
topKeywordsData.forEach((item, index) => {
const badgeColor = index === 0 ? 'bg-rose-500 text-white'
: (index === 1 ? 'bg-amber-500 text-white'
: (index === 2 ? 'bg-orange-500 text-white' : 'bg-slate-200 text-slate-700'));
const isUp = item.growth.startsWith('+');
const row = document.createElement('button');
row.className = 'w-full text-left p-2.5 rounded-lg hover:bg-slate-100 transition flex items-center gap-3';
row.onclick = () => filterByKeyword(item.name);
row.innerHTML = <span class="w-6 h-6 flex-shrink-0 rounded-md ${badgeColor} text-xs font-bold flex items-center justify-center">${index + 1}</span> <div class="flex-1 min-w-0"> <div class="text-sm font-semibold text-slate-800 truncate">${item.name}</div> <div class="text-xs text-slate-400">${item.category} · ${item.count} 篇</div> </div> <span class="text-xs font-bold ${isUp ? 'text-emerald-600' : 'text-rose-500'}">${item.growth}</span>;
container.appendChild(row);
});
}
思路：榜单项同时是"可点击的查询入口"——点击任意热词直接跳转论文管理页并自动填充搜索词，把"看榜单"和"查论文"两个动作串起来。前三名用暖色徽标突出，增长率按正负着色（涨绿跌红遵循国内习惯应为涨红，此处沿用国际配色方案于增长率语义，仅表达上升/下降趋势）。
###6.2.2关键词力导向图谱（功能4）
function initGraphChart() {
const dom = document.getElementById('graph-chart');
if (!dom) return; // 容器不存在时跳过，避免在异常状态下报错
if (!graphChartInstance) {
graphChartInstance = echarts.init(dom);
}
const categories = [
{ name: '核心主干', itemStyle: { color: '#4f46e5' } },
{ name: '新兴技术', itemStyle: { color: '#0ea5e9' } },
{ name: '多模态/生成', itemStyle: { color: '#10b981' } }
];
const nodes = graphNodes.map(n => ({ ...n, category: n.cat, symbolSize: n.size }));
const links = graphLinks.map(l => ({ ...l }));
const option = {
tooltip: { formatter: p => p.dataType === 'node'
? <b>${p.data.name}</b><br>相关论文 ${p.data.value} 篇<br>点击查看详情
: ${p.data.source} ↔ ${p.data.target} },
legend: { data: categories.map(c => c.name), bottom: 10 },
series: [{
type: 'graph', layout: 'force', roam: true, draggable: true,
categories, data: nodes, links,
force: { repulsion: 320, edgeLength: [60, 140], gravity: 0.08 },
label: { show: true, fontSize: 11, color: '#334155' },
lineStyle: { color: '#cbd5e1', width: 1.5, curveness: 0.1 },
emphasis: { focus: 'adjacency', lineStyle: { width: 3 } }
}]
};
graphChartInstance.setOption(option);
graphChartInstance.on('click', p => {
if (p.dataType === 'node') filterByKeyword(p.data.name); // 点击节点联动下钻
});
}
思路：force 布局自动按关联度排布节点；roam: true 提供缩放拖拽；emphasis.focus: 'adjacency' 让 hover 时高亮邻接子图，快速看清"这个词跟谁相关"。核心交互是 click 事件回调——节点点击统一走 filterByKeyword，实现图谱 → 论文列表的联动下钻。
###6.2.5热度走势 Bar Race 动图（功能5）
function startRaceAnimation() {
const pauseBtn = document.getElementById('btn-pause-race');
clearInterval(raceTimer);
pauseBtn.textContent = '⏸ 暂停';
raceTimer = setInterval(() => {
currentYearIdx = (currentYearIdx + 1) % raceYears.length;
renderRaceFrame(raceYears[currentYearIdx]);
}, 2600);
}

function persistPapers() {
try { localStorage.setItem('vt_papers', JSON.stringify(papersData)); }
catch (e) { console.warn('localStorage 写入失败', e); }
}
思路：作业允许"纯前端 + storage 持久化"，故用 localStorage 保存论文库变更，刷新不丢；写入包了 try/catch，隐私模式下写失败不影响页面其余功能。

七、人机结对讨论过程（含 3 个代表性案例）

##7.1人机结对编程协作记录

案例A：需求分析与原型设计协作

给AI的提问：

项目：CV热点分析平台，结合作业要求、原型文档，按NABCD模型完成项目分析，请具体说明：

目标用户和需要解决的核心问题是什么；
论文采集、关键词统计、热度趋势对比、关键词图谱分别解决哪些用户痛点；
CVF/ECVA、Google Scholar、Semantic Scholar、Papers with Code、手工整理表格，各自优势和局限；
将平台功能分为【已实现】和【建议补充拓展】两部分，不要把建议当作已完成现状；
输出一份可以直接放到课程博客的简洁中文NABCD分析。
备注：缺少材料的地方标记待核实，禁止编造用户调研、虚假竞品数据。

AI输出摘要：

输出完整NABCD五维度分析，明确目标用户为计算机视觉方向学生、科研入门学习者；
梳理各类论文数据源优缺点；
区分已完成（前端原型、模拟爬虫、Top10榜单、力导向图谱、Bar‑Race动图）与待拓展（后端真实爬虫、TF‑IDF真实抽词、持久化存储）；
同时额外生成登录、个人收藏等不在作业范围内的伪需求。

我的判断与修改：

采纳：NABCD主体分析、数据源优缺点梳理；
剔除：AI生成的登录、用户收藏等伪需求，作业无身份权限业务；
人工结合墨刀原型页面，把分析结果适配到5个原型页面；
整理PSP任务拆解表格，用于预估与统计各环节耗时。

![案例A需求原型协作对话]

案例B：编码实现，核对统计口径与功能逻辑

给AI的提问：

阅读本项目前端JS业务代码，核对热门Top10榜单、Bar‑Race年度热度趋势、关键词力导向共现图谱的业务逻辑是否与设计文档保持一致。请重点检查下面边界场景：

同一篇论文中重复出现同一个关键词会不会被重复统计；
热度得分计算公式参数是否正确应用；
关键词共现边的计数逻辑；
无数据、空关键词输入的容错处理。
发现问题给出最小修改方案与测试用例；没有问题如实说明；区分静态代码阅读得出结论和需要浏览器运行验证的部分，不要虚构测试通过。

AI输出摘要：

梳理JS中热词统计、热度计算、图谱构造的实际逻辑；
指出原型当前为模拟固定数据集，没有做论文内关键词去重逻辑；
给出空关键词过滤的代码片段.filter(Boolean)；
提示：热度公式仅模拟演示，真实版本需要后端做批量计算。

我的判断与修改：

采纳空关键词过滤修复方案，加入弹窗关键词分割处理；
明确当前原型使用模拟写死热词，真实统计属于后续拓展，不在本作业原型范围内；
整理测试用例，手动在浏览器做边界测试验证。

![案例B编码口径核对对话]

案例C：Bug定位、调试与修复验证

给AI的提问：

当前前端原型存在3个问题：

Tab标签切换之后ECharts图表空白，容器display:hidden；
Bar‑Race播放/暂停按钮快速点击，报Maximum call stack size exceeded栈溢出；
多次快速搜索，模拟爬虫多个setTimeout并发，页面提示条状态错乱。
结合HTML与JS源码，分析最可能的原因，区分【代码推断得出原因】和【浏览器运行确认】，给出低风险修复思路和回归测试建议，不要大改现有业务逻辑。

AI输出摘要：

图表空白：display:hidden元素无法获取DOM宽高，DOM可见后调用chart.resize()；
栈溢出：startRaceAnimation()和pauseRaceAnimation()函数内部互相调用，触发无限递归；需要新增布尔状态锁isPlaying，禁止函数内部互调，只由按钮驱动；
爬虫并发：缺少运行状态标记，多次触发定时器，需要增加标记，爬虫运行期间拦截新请求；
给出回归测试的操作步骤。

我的判断与修改：

按照方案增加isPlaying状态锁；
在switchTab切换trends页面后延时执行resize；
新增爬虫运行标记，避免并发；
在浏览器反复点击按钮、多次搜索，完成回归测试。

![案例C bug调试修复对话]

7.2 人机结对编程反思

项目开发难点不仅仅是页面UI的编写。计算机视觉顶会论文数据来源复杂，需要统一字段、处理重复记录；热度趋势对比必须明确统计口径，如果只简单统计论文篇数，会被各会议每年收录规模干扰，造成热度判断偏差；模拟爬虫场景下还会遇到外部接口限流429等异常，会直接影响用户体验。

PSP表格用来记录、回顾项目各个阶段预估与实际耗时；NABCD模型帮助梳理用户真实需求、实现方案、竞品替代方案以及最终交付产物。
人机结对模式中，AI可以作为随时提问的搭档，但不能当作最终审查者。AI负责给出候选方案、检查清单、模板代码；而我本人承担阅读原型/代码、运行测试、判断是否采纳方案的全部责任。

对比传统人人结对：人机结对反馈速度快，可以一次性输出多种方案；但是AI不会自动承担项目责任，容易产生幻觉、误解上下文，会编造伪需求。因此人工复核、测试验证是必不可少的环节。

7.3 人机结对与人人结对的异同

相同点

都符合《构建之法》结对编程的基本思想：搭档共同完成需求分析、设计、编码、代码审查，持续互相检查，减少 bug。
都需要分工、互相评审产出物，不能单方面直接采纳对方输出，需要持续沟通、确认需求。
都可以在遇到卡点时，搭档提供思路、方案，共同讨论技术选型，一起排查 bug。

不同点

搭档角色：人人结对双方都是主动思考的开发者，可以双向提出质疑；AI 结对中 AI 是被动协作工具，AI 不会主动发现逻辑漏洞，所有审查责任落在人身上。
沟通方式：人人结对可以口头实时讨论；人机结对需要人把需求、约束、边界条件清晰描述给 AI，需求描述模糊就会产出错误代码。
代码审查：人人结对可以互相交替领航 / 驾驶员；人机结对只能由人担任领航者，AI 负责写代码，人负责 Review、验证、修正。
主动性：人类搭档会主动提出优化建议、发现隐藏需求；AI 只会根据当前 prompt 输出，不会主动发现需求缺陷、业务逻辑漏洞。
记忆与上下文：人人结对全程记住项目全局；AI 容易丢失上下文，前后输出不一致，需要人工持续对齐。

7.4 本次人机结对的收获与经验

人机结对时，增量式开发是最高效模式：不要一次性让 AI 完成整个项目，每次只分配小任务，写完一段就运行、审查，有问题立刻迭代。
必须建立严格的人工验证机制：AI 给出原型、代码、算法方案之后，都要手动跑用例、检查边界情况，不能直接信任 AI 结果。
适合让 AI 做重复工作：写模板、生成 ECharts 绘图代码、写 SQL 建表语句、生成 Git 命令；复杂业务逻辑、系统架构、边界校验必须由人主导设计。
对照《构建之法》，人机结对不能完全替代人人结对：AI 擅长快速生成方案，但缺少全局思考、需求权衡，人的审查与验证是人机结对的核心。

7.5 改进方向

###7.5.1数据层改进

接入真实后端服务，使用 Python 搭建后端接口，解决前端浏览器跨域限制，实现对 CVF、Semantic Scholar 等平台真实论文元数据抓取，替换当前模拟固定数据集。
引入 TF-IDF、TextRank 算法自动提取论文关键词，不再手动录入关键词；增加关键词清洗，统一同义词、缩写（如 Transformer / Transformer 模型），避免同一概念被拆分为多个关键词。
增加数据持久化，使用localStorage实现浏览器本地存储，刷新页面后论文、统计数据不会丢失；长期版本可接入数据库，支持多组数据保存与切换。
完善数据校验规则：导入论文时校验年份、会议名称合法性，过滤脏数据；增加数据导出功能，支持将论文列表、热词统计结果导出为 Excel。

###7.5.2前端可视化模块改进

ECharts 图表统一实例管理：统一监听窗口大小变化，批量 resize 所有图表；页面组件销毁时调用dispose()销毁图表实例，避免内存泄漏；增加图表加载占位、无数据友好提示页面。
Bar-Race 动态竞赛图：增加播放速度调节、进度拖拽条；暂停时保存当前播放位置，续播从当前进度继续；增加防抖，限制按钮短时间重复点击；支持自定义时间范围筛选。
关键词共现图谱：增加节点筛选、按会议 / 年份过滤图谱数据；支持节点拖拽布局保存；增加点击节点高亮关联边；图谱支持下载图片。
Top10 热词榜单：支持按会议、年份组合筛选榜单；增加热词详情弹窗，展示该关键词对应的全部论文。

###7.5.3交互与用户体验改进

搜索模块增加防抖机制，短时间连续搜索只执行最后一次请求；新增任务中断能力，发起新搜索时取消上一个未完成模拟爬虫任务；消息提示使用消息队列，多条提示依次弹出，防止提示重叠错乱。
表单优化：导入论文表单增加输入校验，自动剔除空关键词；批量导入支持 JSON 文件上传，批量添加多篇论文。
增加全局加载状态、异常提示：数据加载失败、网络异常时给出友好提示，控制台日志分级，方便调试。

###7.5.4架构与工程化改进

代码模块化拆分，将统计计算、绘图、数据处理逻辑拆分为独立 JS 文件，降低耦合，便于维护；增加代码注释，统一代码规范。
增加单元测试，针对关键词去重、热度计算、共现统计等核心函数编写测试用例，防止后续修改引入逻辑 bug。
版本管理优化：Git 提交信息规范化，按功能 / BUG 修复拆分 commit；增加 README 文档，写明项目部署步骤、统计口径说明。

###7.5.5功能拓展方向

多会议筛选：支持单独查看 CVPR / ICCV / ECCV 单会议的热点趋势，对比不同会议研究方向差异。
论文筛选增强：支持按论文年份、作者、会议多条件联合筛选。
导出可视化图表，将榜单、趋势图、关键词图谱保存为图片，方便写文献综述直接引用。

后续人机结对可以预先制定代码规范文档，每次交给 AI 任务前，先明确约束条件；每一轮 AI 输出后，固定执行 Code Review 流程，记录 bug，形成项目的问题日志，提升协作效率。

...全文

73 回复打赏收藏举报

写回复

用AI写文章

切换为时间正序

请发表友善的回复…

发表回复

Qt插件机制示例V3 plugin

科易网基于40亿+科创知识图谱数据库，深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，研究科技创新领域的AI+数智化解决方案，推动科技创新与产业创新智能化发展。

「基于SpringBoot的考试报名网站」计算机毕业设计完整材料包。本系统采用 Java 与 Spring Boot 框架搭建后端，Vue.js 构建前端，MySQL 存储数据，B/S 架构。系统设置考生、教师、管理员三类角色，涵盖考生管理、教师管理、考试报名管理、考试信息管理、准考证管理、考试成绩管理、新闻资讯管理等七大模块，覆盖考试报名、准考证发放、成绩查询的全流程。材料包含：完整的系统源码（Spring Boot 后端 + Vue 前端，含数据库脚本）；毕业论文含 13 张设计图（用例图、B/S 架构图、功能模块图、实体属性图）与 8 张数据表；汇报 PPT；开题报告；设计图源文件（Visio 格式）与 xmind 功能模块图；完整使用教程。另配套视频教程约 57 分钟，覆盖 Java 与 MySQL 环境安装、Spring Boot 项目部署与代码讲解、毕设答辩讲解，零基础照着操作即可完成环境搭建、项目运行与答辩准备。

2601_FZU_SE

社区成员

149

社区内容

发帖

与我相关

我的任务

软件工程高校福建省·福州市

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章

102400103 李润君 软件工程第二次实践作业

目录

一、作业描述

二、Git仓库、代码规范与AI工具说明

2.1 仓库与规范链接

2.2 AI编程助手说明

2.3 代码规范落地说明

三、PSP表格

1. PSP表格

四、NABCD 需求分析

1. 需求背景

2. NABCD 总体分析

3. 详细需求说明

4. Benefit（核心好处）

5. Competitors（竞品分析）

6. Delivery（交付成果）

7. 被否决的AI建议（真实人机协作记录）

8. NABCD 小结

五、原型设计与原型链接

5.1 整体设计思路

5.2 页面架构设计

5.3 数据结构设计

5.4 核心业务流程设计

5.5 关键问题与设计的解决方案

5.6 功能结构图

5.7 系统架构与数据流

5.8 数据库表结构（7 张表）

5.9 原型设计阶段：遇到的问题与解决方式

六、原型展示

6.1 原型成果以及功能展示

6.2 原型展示阶段：遇到的问题与解决方式

七、人机结对讨论过程（含 3 个代表性案例）

7.1 人机结对编程协作记录

7.2 人机结对编程反思

7.3 人机结对与人人结对的异同

7.4 本次人机结对的收获与经验

7.5 改进方向

7.5.1 数据层改进

7.5.2 前端可视化模块改进

7.5.3 交互与用户体验改进

7.5.4 架构与工程化改进

7.5.5 功能拓展方向

一、作业描述

二、Git仓库、代码规范与AI工具说明

2.1 仓库与规范链接

2.2 AI编程助手说明

2.3 代码规范落地说明

三、PSP表格

1. PSP表格

四、NABCD 需求分析

1. 需求背景

2. NABCD 总体分析

3. 详细需求说明

4. Benefit（核心好处）

5. Competitors（竞品分析）

6. Delivery（交付成果）

7. 被否决的AI建议（真实人机协作记录）

8. NABCD 小结

五、原型设计与原型链接

5.1 整体设计思路

5.2 页面架构设计

5.3 数据结构设计

5.4 核心业务流程设计

5.5 关键问题与设计的解决方案

5.6 功能结构图

5.7 系统架构与数据流

5.8 数据库表结构（7 张表）

5.9 原型设计阶段：遇到的问题与解决方式

六、原型展示

6.1 原型成果以及功能展示

6.2 原型展示阶段：遇到的问题与解决方式

七、人机结对讨论过程（含 3 个代表性案例）

7.1 人机结对编程协作记录

7.2 人机结对编程反思

7.3 人机结对与人人结对的异同

7.4 本次人机结对的收获与经验

7.5 改进方向

7.5.1 数据层改进

7.5.2 前端可视化模块改进

7.5.3 交互与用户体验改进

102400103 李润君软件工程第二次实践作业