从题库到 AI 面试学习平台：我如何用 React、SSE 和分层题解做「面试边注」

摘要「面试边注」是一个面向前端、Java 与 AI 应用开发者的免费面试学习平台。它把传统的“打开题目直接看答案”改成先作答、再对照、再由 AI 追问和评分的学习过程。本文介绍平台目前的内容结构、为什么采用分层题解、AI 流式链路为何选择 SSE以及游客体验和登录后学习记录之间如何划分。https://interview.linsk27.dpdns.orghttps://github.com/linsk27/interview-margin一、为什么还要做一个技术面试题库准备面试时常见资料往往落在两个极端只有一句结论背得出来却解释不了为什么一整页都是术语和长段落看完觉得懂了真正开口时仍然组织不出来。比如“BM25 与向量召回怎样融合”只记住“归一化后加权”并不够。面试官还可能继续问两种分数为什么不能直接相加什么时候应该更相信关键词检索什么时候应该更相信语义检索如果不能把这些因果关系说清楚答案仍然只是记忆片段。因此「面试边注」不是单纯扩大题目数量而是让每道题尽量回答四件事是什么、为什么、怎么做、哪里容易错。首页先说明平台能解决什么问题再把“开始刷题”和“了解功能”分开第一次访问不需要先注册。二、当前内容规模与组织方式平台目前整理了14 个题库、50 个大章节、762 道公开题主要覆盖前端基础、JavaScript、React、工程化和浏览器原理Java 基础、并发、JVM、Spring、数据库和分布式系统RAG、Agent、MCP、Skill、Tool Calling 与 AI 应用工程SSE 流式交互、安全、评测、成本和可靠性项目表达、真实追问和面试复盘。分类采用“大方向 章节”的方式搜索可以匹配题目、原理或项目关键词避免为了找一道题在许多过细分类之间反复跳转。题库中心按大方向展示内容规模、学习状态和入口。三、题解为什么要分层一段很长的标准答案通常不适合直接记忆也不适合口述。平台会尽量把一道题拆成以下层次层次解决的问题短回答先给一段面试时能够直接表达的主结论关键词翻译把抽象术语换成更容易理解的白话原理与因果说明为什么这样设计而不只是陈述结果代码或场景展示技术在项目中怎样落地继续追问提前准备面试官可能顺着问的问题常见误区标出容易背错、混淆或过度概括的地方资料来源便于继续核对官方文档和社区资料这种结构不是为了让答案更长而是让读者先抓住主线再按自己的薄弱点深入。以 Java HashMap 为例阅读页把可口述结论、概念解释和实现原理放在同一条学习路径里读者不必在多份资料之间来回切换。RAG 题目除了说明“检索后再生成”还继续展开完整流程、工程边界和面试官可能追问的落地点。四、把“阅读题库”改成主动练习打开题目就看到完整答案很容易产生“我看懂了所以我会了”的错觉。平台提供了一条更接近真实面试的流程先用自己的话写下答案再揭晓标准答案并逐项对照由 AI 按固定面试官规则返回简短评分与改进建议将题目标记为未开始、学习中、需复习或已掌握按需要安排 1 天、3 天或 7 天后的复习。AI 评分用于帮助学习者发现遗漏不代表真实招聘或录用结论。五、AI 助手如何围绕当前题继续解释标准答案仍然难懂时可以直接围绕当前题追问“能不能换成更白话的说法”“给一个真实项目里的例子。”“为什么这里不用 WebSocket”“面试官继续追问时我应该怎么回答”请求会携带当前题目的必要上下文所以不需要再次复制整道题。单次讲解会引用当前题的上下文适合把某个术语改写成白话或者补充代码与项目场景。连续追问保留当前题的讨论线索后续问题可以直接针对上一轮回答继续深入。六、为什么 AI 流式回答使用 SSE这里的交互通常是“浏览器发出一次提问服务端持续返回文本”主要通信方向是服务端到浏览器。因此相比为了流式效果直接建立 WebSocketSSE / EventSource 的模型更贴合这个场景。整体链路可以概括为当前题目 用户追问 ↓ 项目自己的同源 AI 代理 ↓ 解析模型返回的 SSE / NDJSON / JSON ↓ 统一输出 SSE ↓ 前端增量解码并逐段渲染 Markdown浏览器不会直接持有模型密钥。服务端还负责限流、并发控制、超时、取消传播、错误转换和备用服务切换。这里真正需要解决的不是“让文字一个字一个字出现”而是让上游格式不同、网络中断和超时等情况都能被前端统一处理。七、游客和登录用户的能力边界游客打开题库后可以阅读、搜索全部公开题目切换题目、版式和字体使用先答后看的练习模式体验 AI 学习助手和模拟评分。登录后才保存学习进度、收藏、批注和复习安排。这样既降低了第一次体验的门槛也避免游客必须先注册才能判断内容是否适合自己。八、项目技术组成项目目前包含React、TypeScript与 Vite前端Express同源 API 与 SQLite数据存储题库分片、按需加载、静态快照和故障回退AI 流式代理、评分规则、限流与并发治理学习状态、批注、收藏、复习计划与管理员内容维护阿里云 ECS、systemd、Cloudflare Tunnel、自动备份与健康检查。如果你正在学习 RAG、Agent、MCP、SSE 或 AI 应用工程也可以从源码继续查看实现而不只把它当作一个刷题网站。九、体验与反馈「面试边注」仍在持续整理。题库内容可能有遗漏AI 回答和评分也仅适合作为学习参考。https://interview.linsk27.dpdns.orghttps://github.com/linsk27/interview-margin如果你发现某道题只讲结论、术语太多或者缺少代码和真实场景欢迎直接反馈。相比继续堆数量我更希望先把已有问题讲清楚。如果这套思路对你的面试准备或 AI 应用开发有帮助也欢迎顺手给 GitHub 仓库 一个 Star让我知道哪些方向值得继续完善不 Star 也完全没关系实际使用后的问题反馈更有价值。