软件工程实践第二次作业——顶会热词统计平台(与 AI 结对编程)

༆✿Ailovill❀༻ 2026-09-24 22:38:07
这个作业属于哪个课程202601-福大-软件工程实践-W班
学号-姓名102400332-杨伟烨
这个作业要求在哪里软件工程实践第二次作业——与AI结对编程(顶会热词统计)
这个作业的目标与AI结对编程完成CV会议热词统计平台的需求理解与原型设计、编程实现与部署、记录结对过程并使用CodeArts代码托管
其他参考文献《构建之法》第3、4、8章;DBLP 公开数据;ECharts 文档

目录


一、Git 仓库链接、代码规范链接和 AI 工具说明


二、PSP 表格

子任务拆解:需求理解(NABCD)→ 学习原型工具(墨刀)→ 与 AI 讨论 → 界面原型设计 → 后端编码 → 前端编码 → 关键词统计 → 部署华为云 → 博客撰写。

PSPPersonal Software Process Stages预估耗时(分钟)实际耗时(分钟)
Planning计划
· Estimate· 估计这个任务需要多少时间3015
Development开发
· Analysis· 需求分析(含学习新技术:Node.js / Vue3 / 墨刀 / DBLP API)6043
· Design Spec· 生成设计文档(NABCD、原型复刻说明、博客骨架)60112
· Design Review· 设计复审(人工评审 NABCD/原型,多轮迭代修改)3022
· Coding Standard· 代码规范(编写 codestyle.md,标注来源)2038
· Design· 具体设计(系统架构、数据库表、REST API 设计)12097
· Coding· 具体编码(后端 5 功能 + 前端 5 页面 + 爬虫 + 关键词统计)600408
· Code Review· 代码复审(自我复审 + AI 结对复审)12070
· Test· 测试(功能测试、修复 bug、提交修改)12053
Reporting报告
· Test Report· 测试报告4028
· Postmortem & Process Improvement Plan· 事后总结,并提出过程改进计划6065
合计1260951

三、NABCD 需求分析

3.1 NABCD 总表

模块要点
N 需求帮助小刚等 CV 入门者在三大顶会(CVPR/ICCV/ECCV)海量论文中,快速、直观了解近几年热门研究方向。
痛点量化:CVPR 2025 单届 13008 投稿 / 2878 录取,人工逐篇总结不可行。
核心痛点:① 信息过载 ② 方向迷茫 ③ 缺乏聚合 ④ 趋势难判断。
用户角色:小刚(兴趣小白)、研究生(找方向/开题)、导师(掌握动态)、助教(验证功能)。
A 做法构建「数据爬取 → 关键词抽取统计 → 可视化分析」一站式 Web 平台,聚焦三大顶会。
功能1 爬取/导入:单篇输入 + 批量导入,抓摘要/关键词/原文链接;数据源 DBLP 公开 API + 会议官网 + 数据集。
功能2 列表管理:增删改查 + 精确/模糊检索;本地无结果时联网爬取。
功能3 Top10:关键词抽取(英文分词 + 停用词过滤 + TF-IDF/TextRank)取 Top10,并做热门原因分析(体量/趋势/扩散/权威四维归因)+ 发展前景评级(🚀新兴 / 📈上升 / 📊成熟 / 📉降温)。
功能4 图谱:关键词共现力导向图,点击节点看相关论文。
功能5 动图:多年 × 多会议热度对比,6 种统计口径可切换(词频 / 文档占比 / TF-IDF / 热度 / 归一化 / 动量),ECharts 动态渲染导出 GIF。
横切能力:中英双语切换(论文保留原文、热词中英对照、界面文案双语)。
技术栈:Vue3 + Vite + ECharts(前端)· Node.js + Express(后端)· SQLite(数据库)· 英文分词 + 停用词过滤 + TF-IDF/TextRank(关键词)· axios + cheerio(爬虫)。
功能边界:仅覆盖 CVPR/ICCV/ECCV 三会 + 近若干年(2022 至今);抓取字段限于标题/摘要/关键词/原文链接,不解析全文 PDF;定位课程教学场景,不做账号体系/多租户/全文翻译。
性能考量:数万条论文 SQLite 建索引 + 分页查询;关键词统计离线预计算并缓存结果;爬虫限速 + 重试 + 失败降级;前端图表降采样与懒加载,保证单机部署流畅。
B 好处① 小刚零门槛几分钟看懂热点,省数十小时逐篇阅读;② 科研者快速找方向、找综述入口;③ 导师跨会跨年判断冷热趋势;④ 完整「爬取-分析-可视化」工程实践教学案例。
一句话卖点:不用读一篇论文,也能看懂 CV 顶会在研究什么。
C 竞品对标小刚痛点:通用检索(Google Scholar/知网)无热点榜单;DBLP 只有元数据无统计;AMiner 功能重、门槛高;Semantic Scholar/arXiv/Connected Papers 国内访问不稳、无热词趋势动图。
差异化:垂直聚焦三顶会 + 热词洞察 + 低门槛可视化 + 中英双语,抢占细分空白。
体验风险应对:图谱引导式交互防看不懂;分页 + 预计算防卡顿;多数据源容灾防爬取失败;明确统计口径防不信任。
行业趋势:知识图谱化、可视化动态化、数据开放化、垂直精细化——本项目以图谱 + 动图 + 开放数据 + 垂直定位顺势而为。
自身短板:① 数据质量受公开源限制(关键词字段缺失/不统一);② 仅覆盖三会、非全领域;③「热度」为自定义口径、非权威指标;④ 教学级规模,无账号/权限/高可用;⑤ 爬取可能不全、有时延。
短板应对:明确口径 + 注明数据来源 + 多源补全 + 迭代完善,用「垂直聚焦 + 可解释统计」弥补规模与权威性不足。
D 交付华为云 CodeArts/云服务器部署 + 原型网页链接 + 博客。
节奏:阶段一(NABCD+原型)→ 阶段二(编码+部署)→ 发布。
推广:现场演示 + 博客图文/GIF 展示 + 群内分享。
迭代:按反馈完善,预留「了解更多」「年度热词演变」加分项。

3.2 用户故事

角色用户故事
小刚(兴趣小白)① 首页一眼看 Top10 热门方向;② 每方向有「为什么热」原因 + 前景标签;③ 关键词图谱点击看论文;④ 热词中英对照;⑤ 热度走势动图看涨跌;⑥ 可切换多种统计口径;⑦ 中英文一键切换。
研究生(科研入门)⑧ 单篇输入题目爬取;⑨ 批量导入列表;⑩ 增删改查 + 模糊检索;⑪ 本地无结果自动联网爬取;⑫ 跨会议/跨词/跨年组合对比。
导师/科研人员⑬ 对比 CVPR vs ICCV vs ECCV 的热度差异。
管理员/助教⑭ 查看数据来源与统计口径,验证结果可复现。

3.3 页面原型清单

#页面核心内容对应功能
P1首页/热门方向总览Top10 卡片(热度 + 迷你趋势 + 热门原因 + 前景标签)+ 关键词图谱 + 热词云 + 会议分布功能 3、4
P2热度走势对比页会议多选 + 年份范围 + 口径切换 + 动态柱状图动图 + 多词折线功能 5
P3论文列表管理表格 + 增删改 + 精确/模糊检索 + 分页 + 无结果联网爬取功能 2
P4论文爬取/导入单篇输入 + 批量导入(txt/csv)+ 进度 + 结果反馈功能 1
P5关键词图谱页力导向关系图(节点大小 = 热度)+ 点击节点看论文功能 4
P6详情/关于论文详情(摘要保留原文)+ 三会背景 + 统计口径 + 数据来源附加

全局组件:顶部导航栏(含中英文切换按钮)。
数据流转:P4 入库 → P3 管理 → P1 总览 → P5 图谱 → P6 详情;P1 → P2 走势动图。

3.4 技术选型说明

层选型说明
前端Vue3 + Vite + ECharts单页应用,ECharts 做柱状/折线/力导向图/动态柱状图
后端Node.js + ExpressREST API(论文 CRUD、爬取、统计、图谱数据)
数据库SQLite(better-sqlite3)嵌入式免安装,部署零维护
爬虫axios + cheerio优先 DBLP 公开 API
关键词英文分词 + 停用词过滤 + TF-IDF / TextRankCV 论文为英文
动图ECharts 动态渲染 + 录屏导出 GIF前端动画后录屏

四、原型设计与原型链接

4.1 原型工具

  • 正式原型:墨刀
  • 交互参考稿:原型/网页原型.html(HTML + ECharts,用于与 AI 对齐交互逻辑)

4.2 原型发布链接

https://modao.cc/proto/sqrKRAZtlupd1AC18zz2D/sharing?view_mode=read_only&screen=rbpVW6leXWSLpharm

4.3 原型截图

原型设计/墨刀图片/

img

img

img

img

img

img

P1-首页总览 / P2-热度走势 / P3-论文列表 / P4-爬取导入 / P5-关键词图谱 / P6-详情关于。

4.4 交互设计

  • 顶部导航 6 页面跳转 + 中英文切换;
  • P3 检索无结果自动联网爬取;P4 单篇/批量爬取;
  • P1/P5 点击图谱节点展示相关论文;P2 会议/口径/年份联动更新动图与折线;
  • 详细跳转表见 原型设计/原型复刻说明.md。

4.5 与 AI 协作设计

AI 先产出 HTML 交互参考稿;人工评审后确定 6 页面信息架构、配色(主色 #4F46E5、强调 #06B6D4)、组件与交互规则,再由人工在墨刀中复刻正式原型。


五、成品展示

部署链接:http://120.46.74.215:3000/

图 1:首页 / 热门方向总览(功能 3 + 4)

首页总览


)

说明:首页展示统计概览、Top10 热门方向卡片(每张含热度值、热门原因、🚀新兴/📈上升/📊成熟/📉降温前景标签)与关键词图谱。

图 2:热度走势对比动图(功能 5)

热度走势动图


)

说明:多年 × 多会议热度对比,动态柱状图自动播放(可导出 GIF),支持会议多选、6 种统计口径切换、年份范围选择。

图 3:论文列表管理(功能 2)

论文列表


)

说明:论文列表以表格展示编号/题目/会议/年份/关键词/链接,支持分页。

图 4:论文新增 / 编辑,精确 / 模糊检索,本地无结果自动联网爬取(功能 2)

增删改弹窗

说明:点击"新增/编辑"弹出表单,可填写题目、会议、年份、关键词、原文链接,保存后列表即时刷新。输入论文编号、题目或关键词实时模糊检索,支持按会议筛选。检索的论文本地不存在时,自动联网爬取并入库返回,页面提示"本地无结果,已联网爬取并入库"。

图 5:关键词图谱(功能 4)
![关键词图谱(https://i-blog.csdnimg.cn/communtity/4d1f26b24fe1417a8bdcce3abdcdd67d.png)

说明:关键词共现关系图,节点大小代表热度,点击节点在下方展示相关论文。

图 6:中英双语切换

中英双语

说明:点击
导航栏"中文/EN"切换界面语言,热词保留英文原文并显示中文对照。


六、结对(AI)讨论过程描述

6.1 AI 工具说明

DeepSeek(deepseek-v4-pro),用于需求分析、原型设计、后端编码,逐步迭代。

6.2 关键提示词与迭代记录

轮次我的提示词(要点)AI 输出 / 修改采纳情况
1完成 NABCD + 用户故事 + 页面清单输出完整 NABCD采纳,但提出功能3要加"热门原因+前景"、功能5要"多口径"
2功能3加原因+前景、功能5加多口径补热门原因归因(体量/趋势/扩散/权威)+ 前景评级 + 6 种口径采纳
3C 对接小刚痛点 + 体验风险 + 行业趋势以小刚痛点为主线重写 C,补体验风险表、行业趋势采纳
4加中英双语切换增加 i18n 双语方案采纳
5加 AI 对话功能设计 DeepSeek 对话助手后觉太复杂,去掉
6A 补边界+性能、C 补自身短板补功能边界/性能考量/自身短板/短板应对采纳
7技术栈定为 Node.js(Express)+Vue3+SQLite+ECharts更新技术选型采纳
8后端 Express+SQLite生成 db/crawler/routes/server/seed,语法校验通过采纳

6.3 代表性案例

  • 案例 A(需求分析):NABCD 的 A/C 多轮迭代——功能3"原因+前景"、C"自身短板"等;
  • 案例 B(编码实现):后端爬虫 + CRUD(第 4 步,DBLP API + Semantic Scholar 摘要);
  • 案例 C(调试 Bug):发现 GraphView.vue 点击图谱节点看论文时报错——原代码 const chart = setOption({...}) 误把 setOption 的返回值当实例,而 setOption 实际不返回实例,导致 chart.value.on(...) 取不到实例。修正:从 useChart() 解构出 chart(shallowRef),mount 后用 chart.value.on('click', ...) 绑定点击事件。

七、设计实现过程

7.1 技术栈

前端 Vue3 + Vite + ECharts;后端 Node.js + Express;数据库 SQLite(better-sqlite3);爬虫 axios + cheerio。

7.2 系统架构

浏览器(Vue3 + ECharts) ──HTTP──▶ Express API ──▶ SQLite
                                     │
                                     └──▶ 爬虫(DBLP API / Semantic Scholar)

7.3 后端实现

文件职责
db.jsSQLite 建库建表(papers 表,keywords 存 JSON)
crawler.jsDBLP API 抓元数据 + Semantic Scholar 补摘要 + 会议归一化
routes/papers.js论文 CRUD + 检索(未命中联网爬取)+ 单篇/批量爬取
server.jsExpress 入口 + 健康检查
seed.js12 条示例数据
analyze.js关键词抽取(TF-IDF)+ 聚合统计(Top10/趋势/共现/前景评级)
routes/stats.js统计 API:Top10 / 热度走势(多口径)/ 图谱 / 摘要

7.4 功能结构图

顶会热词统计平台
├── 功能1 论文爬取/导入(单篇 + 批量)
├── 功能2 论文列表管理(增删改查 + 精确/模糊检索 + 未命中联网爬取)
├── 功能3 Top10 热门方向分析(前后端已实现:TF-IDF)
├── 功能4 关键词图谱(前后端已实现:共现关系)
└── 功能5 热度走势动图(前后端已实现:多年多会多口径)

7.5 遇到的问题与解决

  • DBLP 无摘要/关键词字段 → 摘要用 Semantic Scholar 补,关键词统一由「关键词抽取」步骤生成;
  • 会议名不统一 → normalizeVenue 归一化到 CVPR/ICCV/ECCV;
  • 简单分词只能得到单词关键词(如 diffusion),暂未做多词短语抽取,后续可扩展 n-gram;
  • 前端 GraphView 点击节点报错 → setOption 不返回实例,改为解构 chart 实例绑定 click 事件(详见案例 C)。

7.6 统计分析 API(功能 3/4/5)

方法路径说明
GET/api/stats/top10Top10 热门方向(热度 + 热门原因 + 前景评级)
GET/api/stats/trend?caliber=热度走势(6 种口径:tf / df / tfidf / heat / norm / mom)
GET/api/stats/graph关键词图谱(节点 + 共现边)
GET/api/stats/summary论文总数 + 口径/会议列表

7.7 前端实现(Vue3 + Vite + ECharts)

文件职责
src/main.js / App.vue应用入口与整体布局
src/router.js路由(6 页面,hash 模式)
src/api.jsaxios 封装后端 API
src/i18n.js中英双语(响应式 lang)
src/composables/useChart.jsECharts 复用封装
src/components/NavBar.vue顶部导航 + 语言切换
src/views/HomeView.vue首页总览(Top10 + 图谱)
src/views/TrendView.vue热度走势(动图 + 折线)
src/views/PapersView.vue论文列表(增删改查 + 检索)
src/views/CrawlView.vue爬取导入
src/views/GraphView.vue关键词图谱(点击看论文)
src/views/AboutView.vue详情/关于

本地运行:frontend/ 下 npm install && npm run dev(开发环境自动代理 /api → localhost:3000)。

7.8 联调结果(已实测通过)

  • 后端 node server.js 正常启动,示例数据 12 篇;
  • 接口实测:/api/health、/api/stats/summary、/api/stats/top10、/api/stats/trend、/api/stats/graph、/api/papers、/api/search?q=diffusion 全部返回正确;
  • 前端 vite build 构建成功(646 模块,dist 生成),校验通过;
  • 环境说明:Node v24 + npm 11,better-sqlite3 预编译二进制可用;npm 11 默认拦截 install 脚本,需用 npm.cmd(Windows)绕过 PowerShell 执行策略。

7.9 部署准备与 Git(已完成)

  • server.js 生产环境自动托管 frontend/dist(前端用 hash 路由,无需 history 回退),前后端合成单进程可部署;
  • 部署步骤详见 docs/部署说明.md(华为云 ECS + pm2/nohup + 安全组);
  • 本地已 git init(main 分支)+ 建 dev 分支,待提交;.gitignore 排除 node_modules / dist / *.db;
  • README.md 含作业要求的 5 项(作业链接/学号/项目介绍/数据来源/AI使用说明),codestyle.md 标注来源(Airbnb + Vue 官方)。

八、代码说明

8.1 整体结构

项目分前后端两部分,后端提供 REST API + 统计分析,前端 Vue3 + ECharts 可视化。下面按模块解释关键代码的设计思路(完整代码见 CodeArts 仓库)。

8.2 爬虫模块 crawler.js

设计思路:优先用 DBLP 公开 API 抓元数据(标题/年份/会议/链接),摘要用 Semantic Scholar 尽力补,关键词留空交给统计模块统一生成。会议名归一化到 CVPR/ICCV/ECCV。

async function crawlPaper(title) {
  const hits = await searchDBLP(title);      // DBLP API 检索
  const best = pickBest(hits, title);        // 选最匹配结果
  if (!best) return null;
  const conf = normalizeVenue(best.venue);   // 归一化会议名
  const abstract = await fetchAbstract(best.title);  // Semantic Scholar 补摘要
  return { id: genId(conf, year), title: best.title, conference: conf,
           year, abstract, keywords: [], link: best.ee || dblpUrl };
}

8.3 关键词抽取 analyze.js

设计思路:英文分词 + 停用词过滤 → 标题加权 3x、摘要 1x 算词频 → 计算 DF/IDF → 每篇取 TF-IDF top5 作为关键词 → 聚合出 Top10、趋势矩阵、共现图。

// 标题词权重更高,避免摘要噪声主导
tokenize(p.title).forEach(w => tf.set(w, (tf.get(w)||0) + 3));
tokenize(p.abstract).forEach(w => tf.set(w, (tf.get(w)||0) + 1));
// TF-IDF 打分,取 top5
const scored = [...tf.entries()].map(([w, tf]) => [w, tf * idf.get(w)]);

8.4 统计口径 stats.js

设计思路:原始矩阵存词频,按请求的 caliber 参数做口径换算(tf/df/tfidf/heat/norm/mom),让同一份数据支持 6 种统计角度。

if (caliber === 'heat') val = Math.round(v * (1 + Math.max(0, growth)));
else if (caliber === 'norm') val = Math.round((v - min) / (max - min) * 100);
else if (caliber === 'mom') val = prev === null ? 0 : v - prev;

8.5 前端图谱点击(功能4,含 bug 修复)

设计思路:useChart 封装 ECharts 的挂载/设值/清理;点击节点时用 chart.value.on('click') 绑定回调,按节点名查询相关论文。原代码误把 setOption 返回值当实例导致报错,修正为直接解构 chart 实例(详见案例 C)。

博客正文这里贴出约 300 行关键代码(crawler.js、analyze.js、stats.js、GraphView.vue 各截取核心片段),并配上面的思路解释。


九、心路历程、收获

9.1 从"重头开始"到跑通全流程

本次项目我完整走了一遍「需求分析 → 原型设计 → 后端 → 前端 → 联调 → 部署」。印象最深的有几点:

  1. NABCD 不是一次成型的:一开始的 A 只写了"功能清单",在 AI 结对中反复被追问——"功能3除了 Top10 还要给什么?功能5 的热度口径是不是太单一?C 有没有分析自身短板?"这让我意识到,需求分析要主动补上边界、性能、自身短板这些容易被忽略的维度,而不是只罗列功能。

  2. 原型先行省了大量返工:先用 HTML 交互参考稿 + 可导入墨刀的页面图对齐交互,再动手编码,页面结构和数据流转都提前定好了,编码时很少纠结"这里该长什么样"。

  3. **"看似写完"不等于"能跑"**:前端 6 个页面的代码都在,但联调时发现 GraphView 点击图谱节点会报错——setOption 不返回实例,却被当成实例用了 .value。这个 bug 是我让 AI 逐行审查时抓出来的,修正后还顺手成了博客的"案例 C"。

  4. 环境坑比想象多:Windows 下 npm 被 PowerShell 执行策略拦截(要改用 npm.cmd)、npm 11 默认拦截 install 脚本……这些都不是算法问题,却会实打实卡住部署。

9.2 人机结对 vs 人人结对(结合《构建之法》第4章)

维度人人结对人机结对(AI)
响应速度受对方时间限制随时可用、秒回
情绪/疲劳会累、有情绪无情绪、始终稳定
领域直觉有经验、会主动质疑靠训练数据,会"幻觉"、有知识截止
责任双方共同担责AI 不担责,最终要人来把关
审查互相 review人必须主动审查 AI 输出

核心体会:AI 结对是"强执行、弱判断"的伙伴——它写代码、生成文档又快又全,但判断对错、验收质量、承担责任的是人。所以我的工作重心从"自己写"变成了"给清晰提示词 + 审查验证 AI 输出 + 修改迭代"。

9.3 收获

  • 掌握了 NABCD 需求分析方法,并学会主动补边界/性能/短板;
  • 走通 Vue3 + Express + SQLite + ECharts 全栈开发;
  • 学会用 Git 分支(dev → main)+ release 管理版本;
  • 最重要:学会如何审查 AI 的代码——不盲抄、逐行理解、发现错误敢纠正。

十、对 AI 结对伙伴的评价

10.1 贡献

  • 需求分析:产出 NABCD、用户故事、页面清单,并在多轮迭代中补充"热门原因/前景评级""多口径""功能边界/性能""自身短板"等维度;
  • 原型:产出 HTML 交互参考稿 + 复刻说明;
  • 编码:完成后端(爬虫、TF-IDF 统计、CRUD API)并审查前端,抓到并修复 GraphView 的 bug;
  • 文档:PSP、Git 提交计划、README、codestyle、部署说明等基本一次成型。

10.2 局限

  • 幻觉与想当然:容易把"功能清单"当成完整方案,需要人追问"边界在哪、性能如何"才补全;
  • 不主动质疑:倾向于顺着我的要求做,很少反过来挑战决策(如"AI 对话功能太复杂"是我自己意识到后才去掉的);
  • 会写错且不自知:GraphView 的 bug 就是隐患,不逐行审查根本发现不了;
  • 知识有截止:某些库的最新用法、版本差异需要人工核实。

10.3 总评

作为结对伙伴,DeepSeek 在"速度、广度、文档产出"上远超人类伙伴,但在"判断力、责任感、主动质疑"上是短板。它是放大器,不是替身——用得好能大幅提效,前提是人始终掌握主导权和验收标准。


...全文
86 回复 打赏 收藏 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

101

社区成员

发帖
与我相关
我的任务
社区描述
202601福大-软件工程实践-W班
软件工程 高校 福建省·福州市
社区管理员
  • 202601福大-软件工程实践-W班
  • 李之尹
  • 123
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

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