“第八届传智杯AI WEB网页开发挑战赛练习题库”这个题目放在真正要参赛的选手面前其实是一道很实际的信息筛选题题库里究竟考什么、用什么技术栈能又快又稳地做出成品、哪些题眼是评委真正在意的“AI含量”而不是“花哨页面”。这篇文章不打算复述官方文档而是把练习题库当作一个训练场来拆解结合历届备赛过程中大家最常踩的坑聊聊AI与Web开发融合这条赛道上真正值得花时间的核心能力是什么以及怎么在有限时间内把练习效率拉满。先说明一下适用对象如果你是第一次参加传智杯准备选AI Web赛道或者已经有Web基础但没碰过大模型相关开发这篇文章可以直接当备赛路线图用。如果你是有经验的开发者想快速摸清这类竞赛的出题逻辑也可以重点看第二、三部分里面有不少关于“如何把AI能力变成可演示、可答辩的作品”的细节。1. 练习题库到底在练什么AI与Web开发的双线能力模型1.1 从“会写页面”到“会做AI应用”的跨越很多同学看到“AI WEB网页开发挑战赛”这个名字第一反应是AI部分是不是只要调用一个现成的接口把返回结果展示到页面上就可以了这个理解其实低估了题库的设计思路。从近几届的练习题目来看传智杯这项赛事的核心考察点并不是单独考前端或单独考AI算法而是考“如何在一个Web项目中合理集成AI能力并提升应用的实际可用性”。也就是说页面只是载体AI是增长引擎。哪怕你写的是一个看似简单的聊天机器人页面评委也会关注三个层面模型调用是否稳定高效、前端交互是否自然流畅、整个应用是否具备可扩展的产品化潜力。练习题库里的题目刻意设计成了梯次递进的结构。最低门槛的题目只要求你调用现成大模型API实现一个能对话的界面往上走会出现带流式输出、多轮上下文记忆、文件上传解析、特定领域知识库等需求的题目再往上就是有些像真实企业项目的题目比如“智能资产管理助手”“AI辅助专利信息整理工具”——这类题目的完整度要求就高多了需要前后端分离、数据库、用户体系甚至部署上线。这也是我最建议备赛选手认真刷练习题库的原因它不考偏题怪题而是把一个企业级AI Web应用从简单到复杂的能力点拆成了一个一个可训练的关卡。你每完成一道题就等于掌握了一个模块的工程能力所有题目练完你拥有的就是一套完整的AI Web应用开发工具箱。1.2 题库覆盖的核心技能地图根据我对传智杯练习题库和各路参赛经验帖的梳理这套题库涉及的核心技术点大致分成五个维度我用一张表来对应整理技能维度具体内容题库常见考查形式掌握难度AI模型接入大模型API调用、参数配置、提示词工程、流式输出、多轮对话聊天机器人、智能问答、内容生成工具中低前端Web开发HTML/CSS/JavaScript、Vue或React、状态管理、组件化页面交互、数据展示、移动端适配中后端服务Node.js、Java Spring、Python后端RESTful API设计业务逻辑、接口转发、鉴权、文件处理中高数据与存储本地存储、MySQL、文件上传、向量数据库基础用户会话记录、知识库检索、数据可视化中高部署与运维Nginx、服务器部署、Docker基础、域名配置作品展示、线上访问中很多人会在这张技能地图前犹豫我是不是每一项都得精通才能拿奖实际操作中并不需要。练习题库的设计逻辑是让你在每一道题里把其中一个维度做到80分其他维度做到能配合、不拖后腿就行。比如做聊天机器人题目AI接入是主干前端只要界面美观、消息流式展示正常后端用简单的Node或Python就行。反过来如果题目偏向数据处理AI部分只需要稳定调用前端的数据可视化能力反而会成为亮点。所以我的建议是拿到一道练习题先判断它的核心考点究竟落在哪个维度把80%的精力投在对应维度上剩余维度用熟悉的技术栈快速补齐。这才是高效利用练习题库的正确姿势。2. 备赛环境与工具链准备本地能跑起来才是硬道理2.1 一套干净可复现的开发环境练习题库里有一类问题让人很头疼题目本身不难但环境搭了一整天模型接口调不通最后连一个demo都跑不起来。以我辅导和参赛的经验来看赛前准备一套干净、可复现的开发环境比多刷几道题重要得多。先列出推荐的环境组合再逐个解释为什么这么选。操作系统建议Windows 10/11或macOSNode.js统一装18以上版本因为很多AI SDK要求较新的Node支持Java选手装JDK 17IDE方面Web前端用VS Code后端Java用IDEAPython后端用PyCharm。数据库本地装MySQL 8.x同时备一个Docker Desktop备用。这里有一个很实际的坑Node.js版本不对会直接导致依赖安装失败。比如某些版本的AI SDK对Node 16的支持会出现Undefined symbol错误而Node 18/20就非常稳。所以环境准备第一步就是把Node锁到18.20以上的LTS版本。用nvmNode Version Manager做版本管理的人要注意本地开发环境切换Node版本后node_modules需要重新安装很多报错其实就是缓存残留导致的rm -rf node_modules npm install能解决大部分玄学问题。前端框架方面练习题库的题目不限制框架但Vue3和React是两个主流选择。我给基础一般同学的建议是用Vue3因为中文社区资料丰富Element Plus组件库能快速搭出视觉专业的界面备赛时间紧张时非常吃香。React的优势在于生态更前沿如果你是奔着AI Agent类题目去的React生态里很多现成的流式渲染组件更容易找到参考这点可以先了解不必过度纠结。2.2 从IDE到浏览器调试AI Web应用的日常武器环境装好只是第一步真正影响刷题效率的是调试工具链。AI Web应用和传统Web的开发调试有个重要差异你不仅要看前端页面渲染还要跟踪每个请求有没有正确到达大模型API、API返回的数据流是怎么被解析的。这套链路缺一不可。浏览器开发者工具仍然是最常用的调试阵地。Network面板不只是看状态码还要养成看“响应内容”的习惯。比如调用大模型API返回了401你就需要去检查API Key是否有效返回了400通常是请求参数格式问题比如messages字段没有按格式传。还有一项容易被忽略流式接口的响应在Network里通常显示为text/event-stream如果状态码200但页面没有逐步出字就要去Console看流解析报错。API调试方面推荐直接用Apifox或Postman。很多同学习惯在前端代码里不断尝试调用其实非常低效。正确做法是在API调试工具里先把模型接口调通确认参数格式、返回字段、流式格式再集成到项目里。我偏好Apifox因为它的文档和Mock功能做得全而且支持导入OpenAPI规范某些练习题目提供OpenAPI文档时可以直接导入。还有一个小工具非常有用JSON格式化浏览器插件。大模型接口的返回JSON在没格式化之前特别难读很多选手在解析返回数据时找不到字段其实只是没看清结构。格式化后你会发现消息内容通常在choices[0].message.content里如果是流式输出则在choices[0].delta.content里这两个字段的差异就是普通输出和流式输出的核心区别务必提前熟悉。2.3 本地模型还是云端API赛题中最实用的选型策略练习题库里的AI能力接入方式大体上分两类云端大模型API和本地开源模型。这个选型会影响整个开发路线值得单独聊一聊。云端API主要代表是OpenAI兼容格式的各种大模型接口、国内大模型平台API。优点是接入快、稳定、效果强不需要消耗本地算力缺点是部分接口需要网络环境稳定比赛现场网络状况不可控时要准备备用方案。练习阶段我强烈建议以云端API为主因为你要集中精力练业务逻辑和产品交互不要一开始就和本地模型的部署配置纠缠。本地开源模型的方式常见方案是使用Ollama或LM Studio本地部署Qwen2.5、Llama3等模型。优点是数据不出内网、无网络依赖适合比赛演示缺点是模型参数量不能太大否则普通电脑跑不动而且回复质量和速度都不如云端API。练习题库里如果出现类似“本地知识库问答”的题目有时会要求本地模型配合向量检索这就是审题时要做的技术决策。我见过不少选手在备赛时花了一两周时间调本地模型的GPU加速结果耽误了前端和后端的整体进度。正确的做法是第一次刷题全部用云端API打通逻辑把本地部署当加分项等主流程跑通了再考虑要不要换成本地推理。记住比赛考察的是完整作品不是单点技术。3. 核心实战从题库里拆一道“AI对话助手”练手3.1 需求拆解与页面结构设计练习题库中出现频率最高的一类题就是“AI对话助手”或它的变体比如“AI学习助手”、“AI情感陪伴小工具”、“AI专利问答助手”。题型虽然叫法不同但核心都是多轮对话系统。我就以这道经典题为例拆一下从拿到题目到完成作品的全过程。先做需求拆解。题目通常会提供一段场景描述比如“开发一个校园生活AI助手帮助学生解答宿舍、食堂、选课等方面的问题能记住对话上下文界面美观且支持流式回答”。拆解完后核心需求有三个对话能力含上下文记忆、流式输出、界面美观。边缘需求包括多轮会话管理能开新对话、预设问题推荐、错误提示。页面结构设计上我建议采用三段式布局顶部导航栏显示产品名称和“新建对话”按钮左侧侧边栏展示历史会话列表如果题目有会话管理要求右侧主区域是聊天窗口底部是输入框和发送按钮。这套布局几乎是所有AI聊天应用的标准范式评委看着熟悉你自己也好实现。实现技术方案建议前端用Vue3 Element Plus后端用Node.js Express或Python FastAPIAI接口用云端大模型的OpenAI兼容接口。这个组合的好处是代码量少、博客和教程多、调试简单最适合备赛节奏。3.2 前端实现消息流式渲染与状态管理前端是实现对话体验的主战场流式渲染是最大的技术难点。所谓流式渲染就是模型生成一个字、前端就显示一个字而不是等全部生成完一起显示。用户体感上流式输出比“转圈等待然后一次性输出”好非常多也是AI产品体验的基本门槛。我用Vue3给出一个实用的实现思路。核心思路是消息列表中当前正在生成的AI消息用一个可变的字符串变量保存当收到流式数据块时不断追加到这个变量里页面由于响应式机制自动更新。// Vue3 Composition API 实现流式消息 const messages ref([]) const currentAIResponse ref() async function sendMessage() { const userMsg { role: user, content: inputText.value } messages.value.push({ role: user, content: userMsg.content }) messages.value.push({ role: assistant, content: }) currentAIResponse.value const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ messages: messages.value.filter(m m.content ! ) }) }) const reader response.body.getReader() const decoder new TextDecoder() while (true) { const { done, value } await reader.read() if (done) break const chunk decoder.decode(value, { stream: true }) currentAIResponse.value chunk const lastIndex messages.value.length - 1 messages.value[lastIndex] { role: assistant, content: currentAIResponse.value } } }代码虽然短但有几个重要细节。第一response.body.getReader()必须在fetch返回后立即调用第二TextDecoder需要启用stream: true否则中文多字节字符会乱码这是很多选手会踩的坑。第三流式数据块的解析依赖后端返回格式如果后端返回的是SSE格式还需要额外处理data:前缀。状态管理方面如果对话场景不复杂用Vue3的ref配合computed就够用了。如果题目涉及多会话并行、历史记录持久化可以引入Pinia来管理会话状态分模块存储会话列表、当前会话ID、消息列表。但要注意练习阶段不要为了上状态管理库而上库功能复杂度不够时useState/ref反而更直观。3.3 后端服务统一API网关与流式转发后端在对话助手中的角色很关键不只是简单转发请求而是要承担三个任务隐藏API密钥、拼接上下文、转发流式数据。先说为什么不能在前端直接调用大模型API。如果你把带API Key的请求直接发到模型厂商的接口Key会暴露在浏览器里比赛答辩时很容易被评委质询安全问题。所以一定要做一个后端中转层前端请求你的后端后端再带着Key去请求模型API。以Node.js为例一个实现流式转发的后端路由长这样// Node.js Express 实现流式转发 const express require(express) const router express.Router() router.post(/api/chat, async (req, res) { try { const { messages } req.body // 拼接系统提示词 const fullMessages [ { role: system, content: 你是一个校园生活助手回答要简洁实用。 }, ...messages ] // 设置响应头支持SSE流式输出 res.setHeader(Content-Type, text/event-stream; charsetutf-8) res.setHeader(Cache-Control, no-cache) res.setHeader(Connection, keep-alive) // 调用模型接口并透传流式内容 const modelResponse await fetch(https://api.example.com/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${process.env.API_KEY} }, body: JSON.stringify({ model: gpt-4o-mini, messages: fullMessages, stream: true }) }) // 将模型返回的流式数据直接转到前端 const reader modelResponse.body.getReader() const decoder new TextDecoder() while (true) { const { done, value } await reader.read() if (done) break const text decoder.decode(value, { stream: true }) // 从SSE格式中提取实际内容 const lines text.split(\n) for (const line of lines) { if (line.startsWith(data: ) line ! data: [DONE]) { const json JSON.parse(line.slice(6)) const output json.choices?.[0]?.delta?.content || res.write(output) } } } res.end() } catch (error) { console.error(Error:, error) res.status(500).end() } })这样前后端配合的核心逻辑就是后端拿到模型API返回的SSE格式流解析出文本内容后通过res.write直接写到前端前端再通过fetch的ReadableStream读取。两侧的流式衔接顺序很重要很多选手在后端做了一个奇怪的缓冲等全部数据拿到再返回那就等于没有流式了。正确的顺序是前端请求发起后后端立即开始逐块转发让用户看到字从第一秒就开始出现。另外如果题目要求支持上下文记忆记得把历史消息一起传给大模型。但实际开发中要注意对话轮数太多时历史消息会超出模型的上下文窗口。简单做法是只保留最近的10到20条消息形成一个滑动窗口。更高级的方法是用摘要压缩但练习阶段滑动窗口完全够用。3.4 AI能力接入提示词工程与模型选型练习题库里“AI含量”的体现除了调用模型接口更关键的是提示词设计。同一道题不同提示词会让AI回答质量和产品定位天差地别。以校园助手为例一个比较优秀的系统提示词会包含几个层次角色定位、回答风格、能力边界、数据格式要求。你可以这样写你是一名校园生活AI助手服务对象是在校大学生。 回答风格要求简洁、友善、使用口语化表达尽量在3句话内给出核心答案。 当用户询问宿舍报修、食堂开放时间、选课流程等问题时先给出操作步骤再说明注意事项。 如果遇到不确定的信息明确告知用户需要咨询学校相关部门不要编造。这段提示词的每个层次都有具体价值。角色定位决定了模型的回答视角风格约束让回答体验统一边界设定避免模型胡说八道这是AI产品落地最关键的一环。练习阶段建议专门花时间打磨每个题目的系统提示词为答辩时“你的AI能力是怎么设计的”这类问题积累素材。模型选型方面练习题库通常不会强制指定模型但不同模型适合的场景不同。通用对话能力强的模型适合聊天助手带长文档解析能力的模型适合做文档问答嵌入模型配合向量数据库适合做RAG检索增强生成类题目。备赛阶段可以把主力和备胎模型各准备一个主力模型负责效果备胎模型负责在主力不可用时顶上防止演示现场翻车。4. 部署与成型从本地调试到可展示的Web项目4.1 前端构建与静态资源托管练习题库的最终评分一般包含在线作品展示环节所以把项目从本地跑通变成线上可访问是备赛必须跨过的坎。前端构建这一步相对简单Vue和React项目打包命令分别是npm run build和npm run build构建产物默认放在dist目录。这里有两个细节要提前确认一是静态资源的路径如果在服务器上不是部署在根路径需要在vite.config.js里设置base属性二是构建时是否启用sourcemap比赛展示阶段建议关闭sourcemap既能减少体积又不会暴露源码结构。静态资源托管有多种方式最简单的做法是用Nginx托管dist目录适合你有云服务器的场景如果不想买服务器也可以部署在各大静态托管平台上。但比赛作品还是要优先考虑可控性用自己的服务器Nginx是最稳的选择。步骤很简单把dist目录传到服务器Nginx配置指向该目录监听80端口再把域名解析过来即可。4.2 API服务的部署与跨域配置前端部署好之后后端API服务的部署是重头戏。最头疼的问题就是跨域。如果前端域名是http://example.com后端服务跑在http://123.45.67.89:3000浏览器默认会拦截AJAX跨域请求因为请求头里带上了Origin而后端没允许。解决办法有两个一是后端开启CORS二是用Nginx做反向代理。CORS的配置很简单Express代码里加几行中间件即可app.use((req, res, next) { res.header(Access-Control-Allow-Origin, *) res.header(Access-Control-Allow-Headers, Content-Type, Authorization) res.header(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS) if (req.method OPTIONS) { return res.sendStatus(200) } next() })但我更推荐用Nginx反向代理的方案因为它在实际企业项目中用得更多也能解决“浏览器同源策略”这个问题的根本。Nginx配置反向代理的核心一段如下server { listen 80; server_name example.com; # 前端静态资源 location / { root /var/www/dist; index index.html; try_files $uri $uri/ /index.html; } # 后端API反向代理 location /api/ { proxy_pass http://127.0.0.1:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_buffering off; # 流式输出必须关闭缓冲 } }注意proxy_buffering off;这一行。如果你在前端实现了流式对话而后端却被Nginx缓冲住了前端依然要等全部内容生成完才收到流式效果就没了。这个坑藏得很深很多人本地调试正常部署到线上后发现不流式了十有八九就是因为没关缓冲。备赛期间把这个问题写在排查清单里。4.3 作品展示阶段的加分项部署上线只代表“能跑”作品要想拿高分还得在展示体验上做加分。练习题库里反复强调“可用性”“创新性”对应的就是产品完成度。最容易提升完成度的是异常处理。AI接口偶尔会超时、报错前端友好地提示“服务繁忙请稍后重试”和直接白屏评委感受是完全不同的。其次是加载状态发送消息后提交按钮应该变为不可用同时展示一个“正在输入”的动画这些细节在答辩时都是加分项。还有一个很多人忽视的点移动端适配。比赛评委可能会用电脑看也可能会用手机打开作品如果页面在移动端布局错乱、按钮点不到观感会大幅下滑。用Vue/React做响应式适配的成本并不高重点检查聊天窗口的高度是否自适应、输入框是否被键盘遮挡。最后给作品准备一个简短的项目说明页或README写清楚项目背景、技术栈、创新点。很多题目允许附上项目文档这份文档在答辩时就是你思路的表达照着讲比临场发挥稳定得多。5. 常见问题与备赛避坑指南5.1 环境问题依赖装不上、模型接口不通备赛阶段最让人崩溃的问题大概率是“代码看着没问题但就是跑不起来”。我梳理几个高频环境问题。第一npm install 卡死或安装失败。这在国内网络环境下非常常见。解决办法是设置镜像源npm config set registry https://registry.npmmirror.com。如果某个包版本冲突先升级Node到20版本再清缓存重装。第二后端依赖版本不一致。尤其提到OpenAI SDK不同大版本的用法可能完全不同。建议直接看官方文档里针对当前大版本的示例代码别把老帖子的代码直接搬过来。第三模型API调用报“APIConnectionError”或超时。首先检查环境变量里API Key是否正确其次确认底座URLbaseURL是否填对了。很多同学把OpenAI官方地址填到国内模型服务上自然调不通。用一个简单的Python脚本或curl命令先测通接口再集成到项目里。第四比赛现场网络限制导致API不可用。这个几乎是每年比赛都会出现的状况。备赛阶段一定准备好离线备胎方案要么用本地Ollama模型做最后一手兜底要么提前录制演示视频。不要心存侥幸现场网络永远可能出问题。5.2 开发问题跨域、鉴权、响应格式解析开发过程中还会遇到一些题型特有的难题。跨域问题虽然在上文已经给出了两个解决方案但这里再补充一个判断技巧如果前端请求报错信息是“CORS policy”说明是跨域问题如果报错是“401 Unauthorized”说明是后端鉴权失败别浪费时间去折腾CORS。响应格式解析的问题主要集中在流式接口。很多选手以为response.json()能直接拿到数据但流式接口的响应体是ReadableStream不是JSON。正确的判断标准是如果后端接口设置了Content-Type: text/event-stream那么前端必须用response.body.getReader()来读取而不能用response.json()。这个认知一旦建立流式相关的问题就好解决了。后端使用Java生态的选手可能还会遇到Spring WebFlux和Servlet的并发模型问题。流式SSE推荐用WebFlux或Spring MVC的SseEmitter传统的阻塞式Controller并不适合长连接场景。备赛时如果选了Java建议提前写一个SseEmitter的demo不要等到比赛时再摸索。5.3 比赛现场问题网络限制、答辩要点到了正式比赛现场时间紧、任务重节奏和平时刷题完全不一样。有几点经验值得提前分享。第一现场演示前一定要有一台所有依赖都装好、环境完全可用的备用电脑。不要指望现场临时配置环境。传智杯的比赛时间往往只有几个小时现场装环境基本等于放弃。第二演示顺序要设计好。先展示主功能再展示亮点功能最后如果有时间再展示技术细节。很多选手喜欢一开始就讲代码结构结果评委还没看到核心功能就被讲困了。正确的做法是直接打开成品跑一遍把最惊艳的效果先秀出来。第三答辩时主动讲清楚“AI能力是怎么集成的”。很多同学只会说“我调用了XX模型的API”这个回答太单薄。更好的表达方式是先说明模型选择的原因再说提示词设计思路最后说流式输出的实现链路。评委能从中看到你的工程思维这比堆功能名称更能拿分。第四提前预演两遍演示流程。特别是流式对话类应用如果AI回复得太慢演示就会很尴尬。可以准备几个预设问题让AI回答得更有条理。预演时注意PPT翻页器和网页切换不要冲突。5.4 常见问题速查表把备赛过程中高频出现的问题整理成一张速查表方便大家对照排查。问题现象可能原因解决方案npm安装依赖失败网络问题或镜像源未配置配置npmmirror镜像升级Node版本大模型API报401API Key错误或未设置环境变量检查环境变量和后端代码中的读取逻辑大模型API报400请求参数格式不对用Postman调通接口比对messages格式前端不流式输出后端没设置SSE响应头确认Content-Type是text/event-stream线上部署后不流式Nginx缓冲未关闭配置proxy_buffering off前端跨域报错后端未开启CORS配置CORS中间件或Nginx反向代理中文流式乱码TextDecoder未启用stream使用new TextDecoder(utf-8, { stream: true })后端内存不断上涨未限制历史消息长度实现滑动窗口只保留最近N条消息页面在手机上看布局乱缺少响应式CSS改用flex布局设置rem/vw单位演示时AI回复太慢模型参数或网络原因提前准备演示问题必要时缩短生成长度5.5 练习过程中的团队协作技巧传智杯允许组队参赛这是很多人会忽略的优势。练习题库里的题目复杂度尤其是涉及全栈和AI集成的题目一个人做起来很吃力但两个人以上如果分工不合理反而互相拖累。建议按照“前端AI后端”或“产品开发文档答辩”的分工来配合而不是两个人同时写前端或同时写后端。每周至少安排一次联调提前把接口文档定义清楚否则比赛当天两边各做各的接口对不上会非常痛苦。如果是单人参赛那就更要注意控制项目的规模。练习题库里的题目你可以选一个中等复杂度的做到极致比如AI对话助手加上知识库检索、多会话管理再配一套漂亮的前端界面这是比较稳妥的拿奖策略。不要试图在有限时间内把每个功能都加上最后每个功能都半成品。6. 针对练习题库的高效刷题节奏建议6.1 三段式刷题法从模仿、改写到独立实现练习题库里的题目数量不少怎么刷才有效率我推荐一个“三段式刷题法”刚好对应三个阶段。第一阶段叫“模仿期”花2到3天。找两三道简单题照着官方示例或优秀开源项目把完整代码跑通不做任何修改。这个阶段的目的是熟悉题目套路和技术栈操作解决环境问题。千万别跳过后面所有高效开发都建立在环境顺手的基础上。第二阶段叫“改写期”花3到5天。挑一道中等难度的题比如AI助手的变体在不看参考代码的情况下自己从零写一遍。遇到不会的地方可以查文档但核心功能必须自己敲出来。这个阶段会真正暴露你的薄弱环节比如状态管理不熟、跨域不足、流式解析理解不透。把这些问题记录在备赛笔记里。第三阶段叫“独立实现期”花2到3天。选一道比较综合的题目比如涉及完整产品功能的企业级题目独立完成从需求拆解、设计、编码到部署的全部流程。这个阶段要模拟比赛时间限制。做完后让朋友或队友试用收集反馈并迭代一版。到这一步你已经具备了参赛的基本能力。6.2 如何用题库题目构建属于自己的项目库刷题不能只追求数量还要学会沉淀。每次完成一道练习题建议把项目存到自己的Gitee或GitHub仓库里写清楚README。README不只说明项目功能还要记录技术选型、AI能力接入方式、遇到的问题和解决方案。这些项目就是你参赛时最宝贵的素材库。有个很实用的技巧准备一个“可复用组件目录”。每次刷题时把消息流式渲染组件、API封装模块、提示词模板这些通用模块抽出来单独存档。以后做新题时直接复用这些模块开发速度会快很多。比赛考察的虽然是你的综合能力但经验的累积恰恰通过这些细节模块体现。6.3 时间线规划距离比赛四周时该怎么安排如果距离比赛还有一个月我的建议时间规划如下。第一周做环境准备和基础题2到3道目标是跑通全套工具链。第二周做中等难度题2道目标是把AI接入、流式输出、状态管理这三个核心技能练熟。第三周做综合题1道同时把前端界面好好打磨目标是一个成品级作品。最后一周复盘总结把前几周积累的项目整理到代码仓库提前准备好答辩用的演示视频和文档。如果时间只剩两周优先级别是这样先保证能够独立完成一道中等难度题的全链路再考虑提高完成速度。与其贪多求快不如把一套流程做扎实。往届选手的普遍一个教训是准备了十几个半成品最后演示的却是一个没有打磨过的基础版本。练习题库的价值在于深度不在于广度这点大家一定要记住。7. 于我而言练习题库的最大价值是什么说点个人体会。我带过的参赛选手里有人拿练习题库当题库刷一道扔一道最后能回忆起来的没几个也有人认真对待每一道题结束后每人手里都有三四个能直接展示的作品后者拿奖的概率显然高得多。传智杯AI Web赛道这几年热度一直很高但真正拉开差距的并不是谁会的模型多、谁会的新框架多而是谁能把一个AI想法变成一个稳定、好用、能演示的产品。练习题库恰恰是训练这个能力最好的场地。每一道题都在逼你思考用户在什么场景下会用到这个AI功能这个功能流畅吗如果出错怎么办我该怎么把方案讲清楚。这些问题就是赛后真正留下来的财富。最后再分享一个备赛小技巧给自己定一个原则——每道练习题完成后三天内要把这个项目重新打开从零开始快速搭建核心功能一遍。这种“重做”训练看似浪费时间实则是在强化肌肉记忆。比赛现场的紧张氛围下能正常发挥靠的不是临时记忆而是身体已经熟悉的节奏。踏踏实实把练习题库吃透比赛时你会发现自己比想象中稳得多。 传智杯AI Web备赛：练习题库实战攻略与避坑指南
“第八届传智杯AI WEB网页开发挑战赛练习题库”这个题目放在真正要参赛的选手面前其实是一道很实际的信息筛选题题库里究竟考什么、用什么技术栈能又快又稳地做出成品、哪些题眼是评委真正在意的“AI含量”而不是“花哨页面”。这篇文章不打算复述官方文档而是把练习题库当作一个训练场来拆解结合历届备赛过程中大家最常踩的坑聊聊AI与Web开发融合这条赛道上真正值得花时间的核心能力是什么以及怎么在有限时间内把练习效率拉满。先说明一下适用对象如果你是第一次参加传智杯准备选AI Web赛道或者已经有Web基础但没碰过大模型相关开发这篇文章可以直接当备赛路线图用。如果你是有经验的开发者想快速摸清这类竞赛的出题逻辑也可以重点看第二、三部分里面有不少关于“如何把AI能力变成可演示、可答辩的作品”的细节。1. 练习题库到底在练什么AI与Web开发的双线能力模型1.1 从“会写页面”到“会做AI应用”的跨越很多同学看到“AI WEB网页开发挑战赛”这个名字第一反应是AI部分是不是只要调用一个现成的接口把返回结果展示到页面上就可以了这个理解其实低估了题库的设计思路。从近几届的练习题目来看传智杯这项赛事的核心考察点并不是单独考前端或单独考AI算法而是考“如何在一个Web项目中合理集成AI能力并提升应用的实际可用性”。也就是说页面只是载体AI是增长引擎。哪怕你写的是一个看似简单的聊天机器人页面评委也会关注三个层面模型调用是否稳定高效、前端交互是否自然流畅、整个应用是否具备可扩展的产品化潜力。练习题库里的题目刻意设计成了梯次递进的结构。最低门槛的题目只要求你调用现成大模型API实现一个能对话的界面往上走会出现带流式输出、多轮上下文记忆、文件上传解析、特定领域知识库等需求的题目再往上就是有些像真实企业项目的题目比如“智能资产管理助手”“AI辅助专利信息整理工具”——这类题目的完整度要求就高多了需要前后端分离、数据库、用户体系甚至部署上线。这也是我最建议备赛选手认真刷练习题库的原因它不考偏题怪题而是把一个企业级AI Web应用从简单到复杂的能力点拆成了一个一个可训练的关卡。你每完成一道题就等于掌握了一个模块的工程能力所有题目练完你拥有的就是一套完整的AI Web应用开发工具箱。1.2 题库覆盖的核心技能地图根据我对传智杯练习题库和各路参赛经验帖的梳理这套题库涉及的核心技术点大致分成五个维度我用一张表来对应整理技能维度具体内容题库常见考查形式掌握难度AI模型接入大模型API调用、参数配置、提示词工程、流式输出、多轮对话聊天机器人、智能问答、内容生成工具中低前端Web开发HTML/CSS/JavaScript、Vue或React、状态管理、组件化页面交互、数据展示、移动端适配中后端服务Node.js、Java Spring、Python后端RESTful API设计业务逻辑、接口转发、鉴权、文件处理中高数据与存储本地存储、MySQL、文件上传、向量数据库基础用户会话记录、知识库检索、数据可视化中高部署与运维Nginx、服务器部署、Docker基础、域名配置作品展示、线上访问中很多人会在这张技能地图前犹豫我是不是每一项都得精通才能拿奖实际操作中并不需要。练习题库的设计逻辑是让你在每一道题里把其中一个维度做到80分其他维度做到能配合、不拖后腿就行。比如做聊天机器人题目AI接入是主干前端只要界面美观、消息流式展示正常后端用简单的Node或Python就行。反过来如果题目偏向数据处理AI部分只需要稳定调用前端的数据可视化能力反而会成为亮点。所以我的建议是拿到一道练习题先判断它的核心考点究竟落在哪个维度把80%的精力投在对应维度上剩余维度用熟悉的技术栈快速补齐。这才是高效利用练习题库的正确姿势。2. 备赛环境与工具链准备本地能跑起来才是硬道理2.1 一套干净可复现的开发环境练习题库里有一类问题让人很头疼题目本身不难但环境搭了一整天模型接口调不通最后连一个demo都跑不起来。以我辅导和参赛的经验来看赛前准备一套干净、可复现的开发环境比多刷几道题重要得多。先列出推荐的环境组合再逐个解释为什么这么选。操作系统建议Windows 10/11或macOSNode.js统一装18以上版本因为很多AI SDK要求较新的Node支持Java选手装JDK 17IDE方面Web前端用VS Code后端Java用IDEAPython后端用PyCharm。数据库本地装MySQL 8.x同时备一个Docker Desktop备用。这里有一个很实际的坑Node.js版本不对会直接导致依赖安装失败。比如某些版本的AI SDK对Node 16的支持会出现Undefined symbol错误而Node 18/20就非常稳。所以环境准备第一步就是把Node锁到18.20以上的LTS版本。用nvmNode Version Manager做版本管理的人要注意本地开发环境切换Node版本后node_modules需要重新安装很多报错其实就是缓存残留导致的rm -rf node_modules npm install能解决大部分玄学问题。前端框架方面练习题库的题目不限制框架但Vue3和React是两个主流选择。我给基础一般同学的建议是用Vue3因为中文社区资料丰富Element Plus组件库能快速搭出视觉专业的界面备赛时间紧张时非常吃香。React的优势在于生态更前沿如果你是奔着AI Agent类题目去的React生态里很多现成的流式渲染组件更容易找到参考这点可以先了解不必过度纠结。2.2 从IDE到浏览器调试AI Web应用的日常武器环境装好只是第一步真正影响刷题效率的是调试工具链。AI Web应用和传统Web的开发调试有个重要差异你不仅要看前端页面渲染还要跟踪每个请求有没有正确到达大模型API、API返回的数据流是怎么被解析的。这套链路缺一不可。浏览器开发者工具仍然是最常用的调试阵地。Network面板不只是看状态码还要养成看“响应内容”的习惯。比如调用大模型API返回了401你就需要去检查API Key是否有效返回了400通常是请求参数格式问题比如messages字段没有按格式传。还有一项容易被忽略流式接口的响应在Network里通常显示为text/event-stream如果状态码200但页面没有逐步出字就要去Console看流解析报错。API调试方面推荐直接用Apifox或Postman。很多同学习惯在前端代码里不断尝试调用其实非常低效。正确做法是在API调试工具里先把模型接口调通确认参数格式、返回字段、流式格式再集成到项目里。我偏好Apifox因为它的文档和Mock功能做得全而且支持导入OpenAPI规范某些练习题目提供OpenAPI文档时可以直接导入。还有一个小工具非常有用JSON格式化浏览器插件。大模型接口的返回JSON在没格式化之前特别难读很多选手在解析返回数据时找不到字段其实只是没看清结构。格式化后你会发现消息内容通常在choices[0].message.content里如果是流式输出则在choices[0].delta.content里这两个字段的差异就是普通输出和流式输出的核心区别务必提前熟悉。2.3 本地模型还是云端API赛题中最实用的选型策略练习题库里的AI能力接入方式大体上分两类云端大模型API和本地开源模型。这个选型会影响整个开发路线值得单独聊一聊。云端API主要代表是OpenAI兼容格式的各种大模型接口、国内大模型平台API。优点是接入快、稳定、效果强不需要消耗本地算力缺点是部分接口需要网络环境稳定比赛现场网络状况不可控时要准备备用方案。练习阶段我强烈建议以云端API为主因为你要集中精力练业务逻辑和产品交互不要一开始就和本地模型的部署配置纠缠。本地开源模型的方式常见方案是使用Ollama或LM Studio本地部署Qwen2.5、Llama3等模型。优点是数据不出内网、无网络依赖适合比赛演示缺点是模型参数量不能太大否则普通电脑跑不动而且回复质量和速度都不如云端API。练习题库里如果出现类似“本地知识库问答”的题目有时会要求本地模型配合向量检索这就是审题时要做的技术决策。我见过不少选手在备赛时花了一两周时间调本地模型的GPU加速结果耽误了前端和后端的整体进度。正确的做法是第一次刷题全部用云端API打通逻辑把本地部署当加分项等主流程跑通了再考虑要不要换成本地推理。记住比赛考察的是完整作品不是单点技术。3. 核心实战从题库里拆一道“AI对话助手”练手3.1 需求拆解与页面结构设计练习题库中出现频率最高的一类题就是“AI对话助手”或它的变体比如“AI学习助手”、“AI情感陪伴小工具”、“AI专利问答助手”。题型虽然叫法不同但核心都是多轮对话系统。我就以这道经典题为例拆一下从拿到题目到完成作品的全过程。先做需求拆解。题目通常会提供一段场景描述比如“开发一个校园生活AI助手帮助学生解答宿舍、食堂、选课等方面的问题能记住对话上下文界面美观且支持流式回答”。拆解完后核心需求有三个对话能力含上下文记忆、流式输出、界面美观。边缘需求包括多轮会话管理能开新对话、预设问题推荐、错误提示。页面结构设计上我建议采用三段式布局顶部导航栏显示产品名称和“新建对话”按钮左侧侧边栏展示历史会话列表如果题目有会话管理要求右侧主区域是聊天窗口底部是输入框和发送按钮。这套布局几乎是所有AI聊天应用的标准范式评委看着熟悉你自己也好实现。实现技术方案建议前端用Vue3 Element Plus后端用Node.js Express或Python FastAPIAI接口用云端大模型的OpenAI兼容接口。这个组合的好处是代码量少、博客和教程多、调试简单最适合备赛节奏。3.2 前端实现消息流式渲染与状态管理前端是实现对话体验的主战场流式渲染是最大的技术难点。所谓流式渲染就是模型生成一个字、前端就显示一个字而不是等全部生成完一起显示。用户体感上流式输出比“转圈等待然后一次性输出”好非常多也是AI产品体验的基本门槛。我用Vue3给出一个实用的实现思路。核心思路是消息列表中当前正在生成的AI消息用一个可变的字符串变量保存当收到流式数据块时不断追加到这个变量里页面由于响应式机制自动更新。// Vue3 Composition API 实现流式消息 const messages ref([]) const currentAIResponse ref() async function sendMessage() { const userMsg { role: user, content: inputText.value } messages.value.push({ role: user, content: userMsg.content }) messages.value.push({ role: assistant, content: }) currentAIResponse.value const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ messages: messages.value.filter(m m.content ! ) }) }) const reader response.body.getReader() const decoder new TextDecoder() while (true) { const { done, value } await reader.read() if (done) break const chunk decoder.decode(value, { stream: true }) currentAIResponse.value chunk const lastIndex messages.value.length - 1 messages.value[lastIndex] { role: assistant, content: currentAIResponse.value } } }代码虽然短但有几个重要细节。第一response.body.getReader()必须在fetch返回后立即调用第二TextDecoder需要启用stream: true否则中文多字节字符会乱码这是很多选手会踩的坑。第三流式数据块的解析依赖后端返回格式如果后端返回的是SSE格式还需要额外处理data:前缀。状态管理方面如果对话场景不复杂用Vue3的ref配合computed就够用了。如果题目涉及多会话并行、历史记录持久化可以引入Pinia来管理会话状态分模块存储会话列表、当前会话ID、消息列表。但要注意练习阶段不要为了上状态管理库而上库功能复杂度不够时useState/ref反而更直观。3.3 后端服务统一API网关与流式转发后端在对话助手中的角色很关键不只是简单转发请求而是要承担三个任务隐藏API密钥、拼接上下文、转发流式数据。先说为什么不能在前端直接调用大模型API。如果你把带API Key的请求直接发到模型厂商的接口Key会暴露在浏览器里比赛答辩时很容易被评委质询安全问题。所以一定要做一个后端中转层前端请求你的后端后端再带着Key去请求模型API。以Node.js为例一个实现流式转发的后端路由长这样// Node.js Express 实现流式转发 const express require(express) const router express.Router() router.post(/api/chat, async (req, res) { try { const { messages } req.body // 拼接系统提示词 const fullMessages [ { role: system, content: 你是一个校园生活助手回答要简洁实用。 }, ...messages ] // 设置响应头支持SSE流式输出 res.setHeader(Content-Type, text/event-stream; charsetutf-8) res.setHeader(Cache-Control, no-cache) res.setHeader(Connection, keep-alive) // 调用模型接口并透传流式内容 const modelResponse await fetch(https://api.example.com/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${process.env.API_KEY} }, body: JSON.stringify({ model: gpt-4o-mini, messages: fullMessages, stream: true }) }) // 将模型返回的流式数据直接转到前端 const reader modelResponse.body.getReader() const decoder new TextDecoder() while (true) { const { done, value } await reader.read() if (done) break const text decoder.decode(value, { stream: true }) // 从SSE格式中提取实际内容 const lines text.split(\n) for (const line of lines) { if (line.startsWith(data: ) line ! data: [DONE]) { const json JSON.parse(line.slice(6)) const output json.choices?.[0]?.delta?.content || res.write(output) } } } res.end() } catch (error) { console.error(Error:, error) res.status(500).end() } })这样前后端配合的核心逻辑就是后端拿到模型API返回的SSE格式流解析出文本内容后通过res.write直接写到前端前端再通过fetch的ReadableStream读取。两侧的流式衔接顺序很重要很多选手在后端做了一个奇怪的缓冲等全部数据拿到再返回那就等于没有流式了。正确的顺序是前端请求发起后后端立即开始逐块转发让用户看到字从第一秒就开始出现。另外如果题目要求支持上下文记忆记得把历史消息一起传给大模型。但实际开发中要注意对话轮数太多时历史消息会超出模型的上下文窗口。简单做法是只保留最近的10到20条消息形成一个滑动窗口。更高级的方法是用摘要压缩但练习阶段滑动窗口完全够用。3.4 AI能力接入提示词工程与模型选型练习题库里“AI含量”的体现除了调用模型接口更关键的是提示词设计。同一道题不同提示词会让AI回答质量和产品定位天差地别。以校园助手为例一个比较优秀的系统提示词会包含几个层次角色定位、回答风格、能力边界、数据格式要求。你可以这样写你是一名校园生活AI助手服务对象是在校大学生。 回答风格要求简洁、友善、使用口语化表达尽量在3句话内给出核心答案。 当用户询问宿舍报修、食堂开放时间、选课流程等问题时先给出操作步骤再说明注意事项。 如果遇到不确定的信息明确告知用户需要咨询学校相关部门不要编造。这段提示词的每个层次都有具体价值。角色定位决定了模型的回答视角风格约束让回答体验统一边界设定避免模型胡说八道这是AI产品落地最关键的一环。练习阶段建议专门花时间打磨每个题目的系统提示词为答辩时“你的AI能力是怎么设计的”这类问题积累素材。模型选型方面练习题库通常不会强制指定模型但不同模型适合的场景不同。通用对话能力强的模型适合聊天助手带长文档解析能力的模型适合做文档问答嵌入模型配合向量数据库适合做RAG检索增强生成类题目。备赛阶段可以把主力和备胎模型各准备一个主力模型负责效果备胎模型负责在主力不可用时顶上防止演示现场翻车。4. 部署与成型从本地调试到可展示的Web项目4.1 前端构建与静态资源托管练习题库的最终评分一般包含在线作品展示环节所以把项目从本地跑通变成线上可访问是备赛必须跨过的坎。前端构建这一步相对简单Vue和React项目打包命令分别是npm run build和npm run build构建产物默认放在dist目录。这里有两个细节要提前确认一是静态资源的路径如果在服务器上不是部署在根路径需要在vite.config.js里设置base属性二是构建时是否启用sourcemap比赛展示阶段建议关闭sourcemap既能减少体积又不会暴露源码结构。静态资源托管有多种方式最简单的做法是用Nginx托管dist目录适合你有云服务器的场景如果不想买服务器也可以部署在各大静态托管平台上。但比赛作品还是要优先考虑可控性用自己的服务器Nginx是最稳的选择。步骤很简单把dist目录传到服务器Nginx配置指向该目录监听80端口再把域名解析过来即可。4.2 API服务的部署与跨域配置前端部署好之后后端API服务的部署是重头戏。最头疼的问题就是跨域。如果前端域名是http://example.com后端服务跑在http://123.45.67.89:3000浏览器默认会拦截AJAX跨域请求因为请求头里带上了Origin而后端没允许。解决办法有两个一是后端开启CORS二是用Nginx做反向代理。CORS的配置很简单Express代码里加几行中间件即可app.use((req, res, next) { res.header(Access-Control-Allow-Origin, *) res.header(Access-Control-Allow-Headers, Content-Type, Authorization) res.header(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS) if (req.method OPTIONS) { return res.sendStatus(200) } next() })但我更推荐用Nginx反向代理的方案因为它在实际企业项目中用得更多也能解决“浏览器同源策略”这个问题的根本。Nginx配置反向代理的核心一段如下server { listen 80; server_name example.com; # 前端静态资源 location / { root /var/www/dist; index index.html; try_files $uri $uri/ /index.html; } # 后端API反向代理 location /api/ { proxy_pass http://127.0.0.1:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_buffering off; # 流式输出必须关闭缓冲 } }注意proxy_buffering off;这一行。如果你在前端实现了流式对话而后端却被Nginx缓冲住了前端依然要等全部内容生成完才收到流式效果就没了。这个坑藏得很深很多人本地调试正常部署到线上后发现不流式了十有八九就是因为没关缓冲。备赛期间把这个问题写在排查清单里。4.3 作品展示阶段的加分项部署上线只代表“能跑”作品要想拿高分还得在展示体验上做加分。练习题库里反复强调“可用性”“创新性”对应的就是产品完成度。最容易提升完成度的是异常处理。AI接口偶尔会超时、报错前端友好地提示“服务繁忙请稍后重试”和直接白屏评委感受是完全不同的。其次是加载状态发送消息后提交按钮应该变为不可用同时展示一个“正在输入”的动画这些细节在答辩时都是加分项。还有一个很多人忽视的点移动端适配。比赛评委可能会用电脑看也可能会用手机打开作品如果页面在移动端布局错乱、按钮点不到观感会大幅下滑。用Vue/React做响应式适配的成本并不高重点检查聊天窗口的高度是否自适应、输入框是否被键盘遮挡。最后给作品准备一个简短的项目说明页或README写清楚项目背景、技术栈、创新点。很多题目允许附上项目文档这份文档在答辩时就是你思路的表达照着讲比临场发挥稳定得多。5. 常见问题与备赛避坑指南5.1 环境问题依赖装不上、模型接口不通备赛阶段最让人崩溃的问题大概率是“代码看着没问题但就是跑不起来”。我梳理几个高频环境问题。第一npm install 卡死或安装失败。这在国内网络环境下非常常见。解决办法是设置镜像源npm config set registry https://registry.npmmirror.com。如果某个包版本冲突先升级Node到20版本再清缓存重装。第二后端依赖版本不一致。尤其提到OpenAI SDK不同大版本的用法可能完全不同。建议直接看官方文档里针对当前大版本的示例代码别把老帖子的代码直接搬过来。第三模型API调用报“APIConnectionError”或超时。首先检查环境变量里API Key是否正确其次确认底座URLbaseURL是否填对了。很多同学把OpenAI官方地址填到国内模型服务上自然调不通。用一个简单的Python脚本或curl命令先测通接口再集成到项目里。第四比赛现场网络限制导致API不可用。这个几乎是每年比赛都会出现的状况。备赛阶段一定准备好离线备胎方案要么用本地Ollama模型做最后一手兜底要么提前录制演示视频。不要心存侥幸现场网络永远可能出问题。5.2 开发问题跨域、鉴权、响应格式解析开发过程中还会遇到一些题型特有的难题。跨域问题虽然在上文已经给出了两个解决方案但这里再补充一个判断技巧如果前端请求报错信息是“CORS policy”说明是跨域问题如果报错是“401 Unauthorized”说明是后端鉴权失败别浪费时间去折腾CORS。响应格式解析的问题主要集中在流式接口。很多选手以为response.json()能直接拿到数据但流式接口的响应体是ReadableStream不是JSON。正确的判断标准是如果后端接口设置了Content-Type: text/event-stream那么前端必须用response.body.getReader()来读取而不能用response.json()。这个认知一旦建立流式相关的问题就好解决了。后端使用Java生态的选手可能还会遇到Spring WebFlux和Servlet的并发模型问题。流式SSE推荐用WebFlux或Spring MVC的SseEmitter传统的阻塞式Controller并不适合长连接场景。备赛时如果选了Java建议提前写一个SseEmitter的demo不要等到比赛时再摸索。5.3 比赛现场问题网络限制、答辩要点到了正式比赛现场时间紧、任务重节奏和平时刷题完全不一样。有几点经验值得提前分享。第一现场演示前一定要有一台所有依赖都装好、环境完全可用的备用电脑。不要指望现场临时配置环境。传智杯的比赛时间往往只有几个小时现场装环境基本等于放弃。第二演示顺序要设计好。先展示主功能再展示亮点功能最后如果有时间再展示技术细节。很多选手喜欢一开始就讲代码结构结果评委还没看到核心功能就被讲困了。正确的做法是直接打开成品跑一遍把最惊艳的效果先秀出来。第三答辩时主动讲清楚“AI能力是怎么集成的”。很多同学只会说“我调用了XX模型的API”这个回答太单薄。更好的表达方式是先说明模型选择的原因再说提示词设计思路最后说流式输出的实现链路。评委能从中看到你的工程思维这比堆功能名称更能拿分。第四提前预演两遍演示流程。特别是流式对话类应用如果AI回复得太慢演示就会很尴尬。可以准备几个预设问题让AI回答得更有条理。预演时注意PPT翻页器和网页切换不要冲突。5.4 常见问题速查表把备赛过程中高频出现的问题整理成一张速查表方便大家对照排查。问题现象可能原因解决方案npm安装依赖失败网络问题或镜像源未配置配置npmmirror镜像升级Node版本大模型API报401API Key错误或未设置环境变量检查环境变量和后端代码中的读取逻辑大模型API报400请求参数格式不对用Postman调通接口比对messages格式前端不流式输出后端没设置SSE响应头确认Content-Type是text/event-stream线上部署后不流式Nginx缓冲未关闭配置proxy_buffering off前端跨域报错后端未开启CORS配置CORS中间件或Nginx反向代理中文流式乱码TextDecoder未启用stream使用new TextDecoder(utf-8, { stream: true })后端内存不断上涨未限制历史消息长度实现滑动窗口只保留最近N条消息页面在手机上看布局乱缺少响应式CSS改用flex布局设置rem/vw单位演示时AI回复太慢模型参数或网络原因提前准备演示问题必要时缩短生成长度5.5 练习过程中的团队协作技巧传智杯允许组队参赛这是很多人会忽略的优势。练习题库里的题目复杂度尤其是涉及全栈和AI集成的题目一个人做起来很吃力但两个人以上如果分工不合理反而互相拖累。建议按照“前端AI后端”或“产品开发文档答辩”的分工来配合而不是两个人同时写前端或同时写后端。每周至少安排一次联调提前把接口文档定义清楚否则比赛当天两边各做各的接口对不上会非常痛苦。如果是单人参赛那就更要注意控制项目的规模。练习题库里的题目你可以选一个中等复杂度的做到极致比如AI对话助手加上知识库检索、多会话管理再配一套漂亮的前端界面这是比较稳妥的拿奖策略。不要试图在有限时间内把每个功能都加上最后每个功能都半成品。6. 针对练习题库的高效刷题节奏建议6.1 三段式刷题法从模仿、改写到独立实现练习题库里的题目数量不少怎么刷才有效率我推荐一个“三段式刷题法”刚好对应三个阶段。第一阶段叫“模仿期”花2到3天。找两三道简单题照着官方示例或优秀开源项目把完整代码跑通不做任何修改。这个阶段的目的是熟悉题目套路和技术栈操作解决环境问题。千万别跳过后面所有高效开发都建立在环境顺手的基础上。第二阶段叫“改写期”花3到5天。挑一道中等难度的题比如AI助手的变体在不看参考代码的情况下自己从零写一遍。遇到不会的地方可以查文档但核心功能必须自己敲出来。这个阶段会真正暴露你的薄弱环节比如状态管理不熟、跨域不足、流式解析理解不透。把这些问题记录在备赛笔记里。第三阶段叫“独立实现期”花2到3天。选一道比较综合的题目比如涉及完整产品功能的企业级题目独立完成从需求拆解、设计、编码到部署的全部流程。这个阶段要模拟比赛时间限制。做完后让朋友或队友试用收集反馈并迭代一版。到这一步你已经具备了参赛的基本能力。6.2 如何用题库题目构建属于自己的项目库刷题不能只追求数量还要学会沉淀。每次完成一道练习题建议把项目存到自己的Gitee或GitHub仓库里写清楚README。README不只说明项目功能还要记录技术选型、AI能力接入方式、遇到的问题和解决方案。这些项目就是你参赛时最宝贵的素材库。有个很实用的技巧准备一个“可复用组件目录”。每次刷题时把消息流式渲染组件、API封装模块、提示词模板这些通用模块抽出来单独存档。以后做新题时直接复用这些模块开发速度会快很多。比赛考察的虽然是你的综合能力但经验的累积恰恰通过这些细节模块体现。6.3 时间线规划距离比赛四周时该怎么安排如果距离比赛还有一个月我的建议时间规划如下。第一周做环境准备和基础题2到3道目标是跑通全套工具链。第二周做中等难度题2道目标是把AI接入、流式输出、状态管理这三个核心技能练熟。第三周做综合题1道同时把前端界面好好打磨目标是一个成品级作品。最后一周复盘总结把前几周积累的项目整理到代码仓库提前准备好答辩用的演示视频和文档。如果时间只剩两周优先级别是这样先保证能够独立完成一道中等难度题的全链路再考虑提高完成速度。与其贪多求快不如把一套流程做扎实。往届选手的普遍一个教训是准备了十几个半成品最后演示的却是一个没有打磨过的基础版本。练习题库的价值在于深度不在于广度这点大家一定要记住。7. 于我而言练习题库的最大价值是什么说点个人体会。我带过的参赛选手里有人拿练习题库当题库刷一道扔一道最后能回忆起来的没几个也有人认真对待每一道题结束后每人手里都有三四个能直接展示的作品后者拿奖的概率显然高得多。传智杯AI Web赛道这几年热度一直很高但真正拉开差距的并不是谁会的模型多、谁会的新框架多而是谁能把一个AI想法变成一个稳定、好用、能演示的产品。练习题库恰恰是训练这个能力最好的场地。每一道题都在逼你思考用户在什么场景下会用到这个AI功能这个功能流畅吗如果出错怎么办我该怎么把方案讲清楚。这些问题就是赛后真正留下来的财富。最后再分享一个备赛小技巧给自己定一个原则——每道练习题完成后三天内要把这个项目重新打开从零开始快速搭建核心功能一遍。这种“重做”训练看似浪费时间实则是在强化肌肉记忆。比赛现场的紧张氛围下能正常发挥靠的不是临时记忆而是身体已经熟悉的节奏。踏踏实实把练习题库吃透比赛时你会发现自己比想象中稳得多。