牛客刷题追踪系统开发：Vue+Spring Boot实战

1. 项目背景与核心价值

最近在牛客网刷题时发现一个痛点：虽然平台提供了丰富的题库资源，但缺乏系统的刷题进度追踪和每日任务管理功能。作为参加过多次算法竞赛的老手，我深知持续性的刻意练习对编程能力提升的重要性。于是花了两个周末时间，开发了这个名为"多米诺骨牌"的牛客刷题追踪系统。

这个工具主要解决三个核心问题：

1. 自动记录用户在牛客网的刷题轨迹，形成可视化的能力图谱
2. 根据用户历史数据智能推荐每日一题
3. 通过成就系统激励持续刷题习惯养成

2. 技术架构设计

2.1 整体技术栈选型

采用前后端分离架构：

• 前端：Vue3 + TypeScript + ECharts
• 后端：Spring Boot 2.7 + MyBatis-Plus
• 数据库：MySQL 8.0 + Redis缓存
• 爬虫：Python + Playwright

选择这套组合主要考虑：

1. Vue3的Composition API更适合复杂状态管理
2. Playwright比Selenium更稳定且支持多语言
3. 牛客网前端有反爬机制，需要模拟真实用户行为

2.2 关键模块设计

mermaid复制graph TD
    A[用户系统] --> B[爬虫引擎]
    B --> C[数据处理]
    C --> D[题目推荐]
    D --> E[可视化报表]

3. 核心功能实现

3.1 牛客数据爬取

通过分析牛客网接口，发现其题目数据主要通过GraphQL接口获取。需要先模拟登录获取cookie，然后构造合规请求：

python复制async def get_nc_questions(page: Page):
    await page.goto("https://www.nowcoder.com/login")
    await page.fill("#jsEmailIpt", "your_email")
    await page.fill("#jsPasswordIpt", "your_password")
    await page.click(".btn-login")
    
    # 等待登录完成
    await page.wait_for_selector(".nav-user")
    
    # 获取题目数据
    resp = await page.request.post(
        "https://www.nowcoder.com/graphql",
        headers={...},
        json={
            "operationName": "questionList",
            "variables": {...},
            "query": "..."
        }
    )
    return await resp.json()

3.2 刷题进度追踪

设计了三层进度指标体系：

1. 基础维度：每日/周/月刷题量
2. 质量维度：通过率/平均耗时
3. 能力维度：各知识点的掌握程度

sql复制CREATE TABLE user_progress (
    user_id BIGINT PRIMARY KEY,
    daily_count JSON COMMENT '每日刷题统计',
    category_stats JSON COMMENT '分类统计',
    streak_days INT COMMENT '连续打卡天数'
) ENGINE=InnoDB;

4. 智能推荐算法

4.1 推荐策略

采用混合推荐模式：

1. 基于内容的推荐：根据用户薄弱知识点
2. 协同过滤：相似水平用户的刷题路径
3. 热度加权：近期企业高频考题

推荐公式：
$$
score = 0.4K_{mastery} + 0.3K_{similar} + 0.2K_{hot} + 0.1K_{random}
$$

4.2 冷启动方案

对于新用户，采用分级题库策略：

1. 前3天：基础语法题
2. 4-7天：经典算法题
3. 第二周：企业真题

5. 可视化展示

使用ECharts实现多维数据展示：

javascript复制const renderRadarChart = () => {
  const chart = echarts.init(document.getElementById('radar'));
  const option = {
    radar: {
      indicator: [
        { name: '数组', max: 100 },
        { name: '字符串', max: 100 },
        // ...其他知识点
      ]
    },
    series: [{
      data: [{
        value: [85, 72, 65, 58, 91],
        name: '能力图谱'
      }]
    }]
  };
  chart.setOption(option);
}

6. 部署与优化

6.1 性能优化

1. 爬虫结果缓存：Redis设置2小时过期
2. 批量写入：MySQL使用LOAD DATA优化
3. 前端懒加载：非核心图表延迟渲染

6.2 安全措施

1. 用户密码：BCrypt加密存储
2. 爬虫频率：限制每分钟不超过10次请求
3. 数据备份：每日凌晨全量备份到OSS

7. 使用效果

上线三个月后的数据：

• 日均活跃用户：327人
• 平均每日刷题量提升41%
• 用户留存率：次日62%，7日35%

典型用户反馈：

"终于不用每天纠结该刷什么题了"
"看到知识图谱的空白区域就有刷题动力"

8. 踩坑经验

1. 牛客网的反爬策略会不定期更新，需要准备多套Header方案
2. 连续打卡功能要注意时区问题，建议统一使用UTC时间
3. ECharts大数据量渲染需要开启渐进式渲染配置
4. 推荐算法需要定期用新数据重新训练模型

9. 未来迭代方向

1. 增加代码自动评测功能
2. 开发移动端小程序版本
3. 引入社交PK玩法
4. 支持其他OJ平台数据导入

这个项目给我的最大启示是：工具类产品要抓住用户的"最小痛点"，用尽可能轻量的方式解决问题。下一阶段会重点优化推荐算法的精准度，计划引入深度学习的CTR预测模型。