企业官网建设流程全解析

聊《别急着换赛道：前端经验在 AI 项目里到底值多少？》之前，先说一句实在的：别急着背概念，先看它在真实项目里到底解决什么问题。

摘要

摘要：帮一家电商团队把AI客服系统从Demo推上线，流式输出只用了两周，权限配置和日志兜底却拖了一个月。前端做AI应用最大的认知差不是调接口，而是从"页面思维"切换到"系统思维"——用户体验好只是门槛，权限边界清晰、日志可追溯才是上线的关键。

---

目录

• 从Demo到上线，我被权限日志教做人
• 前端转AI应用：优势在哪，坑在哪
• 流式输出：前端最熟悉的领域
• 多模态交互：体验是加分项，不是护城河
• 作品集建议：别再只放聊天demo了
• 总结

---

从Demo到上线，我被权限日志教做人

去年接了个私活，帮一个做知识管理的团队搭AI笔记助手。前端部分我一周就搞定了：React + Vercel AI SDK，流式输出、Markdown渲染、打字机动画，功能演示视频一发，客户很满意。

结果真正上线前，运维团队甩过来三个问题：
1. 模型调用的API Key暴露在客户端， anyone can steal it
2. 用户权限没接入系统，A公司的员工能看到B公司的数据
3. 线上报错全凭用户截图反馈，定位问题靠猜

我花了整整两周重写了后端层，加了中间鉴权、请求链路追踪和错误分级上报。上线那一刻我才意识到：前端做AI应用的最后一道门槛，不是UI多好看，而是你能不能接受一个事实——AI系统的复杂性远高于普通CRUD。

---

前端转AI应用：优势在哪，坑在哪

优势：流式体验的天然土壤

前端做AI应用有几个天然优势：

• 流式响应：SSE、WebStream 这些技术前端玩得最溜，打字机效果、逐行渲染、进度反馈，这些是用户体验的核心
• 多模态输入：图片上传、音频录制、实时预览，前端处理起来驾轻就熟
• 状态管理：React/Vue 的响应式体系天然适合AI对话这种多状态切换的场景

坑：权限边界和错误处理

最大的坑在于后端思维的缺失。传统前端项目，权限通常由后端控制，前端只负责展示。但AI应用不一样：

• API Key绝对不能暴露在客户端
• 每次对话的上下文长度限制需要合理控制
• 模型调用失败时的降级策略
• 用户输入内容的安全过滤

我见过太多前端项目，Demo跑通后直接部署，结果线上被恶意调用刷爆API账单，或者模型输出了不该输出的内容。

---

流式输出：前端最熟悉的领域

这是前端最能发挥的地方。我用 Vercel AI SDK 实现了一个基础的流式对话接口：

// app/api/chat/route.ts import { streamText } from 'ai'; export async function POST(req: Request) { const { messages } = await req.json(); // 关键：在服务器端调用模型，API Key不会暴露 const result = streamText({ model: 'claude-3-5-sonnet', messages, // 设置最大token数，防止上下文溢出 maxTokens: 2048, // 流式输出，前端实时渲染 onFinish: ({ text, usage }) => { console.log(`使用了 ${usage.totalTokens} tokens`); } }); return result.toDataStreamResponse(); }

代码解释：

• streamText是核心函数，它接收消息列表，返回一个可流式传输的结果对象
• model参数指定使用哪个模型，这里用 Claude 3.5 Sonnet
• messages是历史对话上下文，注意每次请求都要带上完整的上下文
• maxTokens控制单次响应的最大长度，避免模型输出过长导致超时或费用激增
• onFinish回调可以在对话结束时记录token用量，用于成本监控

前端接收侧：

// 前端组件 const { messages, append } = useChat(); // append 会自动处理流式响应，前端只需处理渲染逻辑

排查过程：有一次线上出现流式输出中断的问题，现象是用户看到文字跑到一半就停了。我按以下步骤定位：
1. 检查浏览器网络面板，发现 SSE 连接在约15秒后断开
2. 查看服务器日志，发现是网关超时配置为15秒
3. 将网关超时调整为60秒，问题解决

这个案例说明：流式输出断连不一定是模型的问题，可能是网关或负载均衡器的超时配置。

---

多模态交互：体验是加分项，不是护城河

AI笔记助手支持图片输入，前端要做的事情是：

1. 图片上传前的压缩处理
2. 上传图片的预览和删除
3. 调用多模态模型时传递base64或URL

// 图片处理示例 async function compressImage(file: File): Promise<File> { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); return new Promise((resolve) => { img.onload = () => { // 限制最大边长 const maxSize = 1024; const ratio = Math.min(maxSize / img.width, maxSize / img.height, 1); canvas.width = img.width * ratio; canvas.height = img.height * ratio; ctx?.drawImage(img, 0, 0, canvas.width, canvas.height); canvas.toBlob((blob) => { resolve(new File([blob!], file.name, { type: 'image/jpeg' })); }, 'image/jpeg', 0.8); }; img.src = URL.createObjectURL(file); }); }

适用边界：

• 前端图片压缩适合小图（<5MB），大图应该走服务端处理
• 多模态模型调用的权限控制必须在后端完成，不能用前端传图片URL直接调用
• 如果涉及敏感图片（如用户隐私照片），必须做服务端中转，不能直接在前端透传

失败原因分析：我们最初尝试在前端直接调用多模态模型，结果导致API Key暴露。后来改为前端上传图片到OSS，再把图片URL传给后端处理。这个改动虽然增加了复杂度，但保证了安全性。

---

作品集建议：别再只放聊天demo了

很多前端转AI的求职者，作品集里全是"AI聊天机器人"。这类项目同质化严重，面试官已经审美疲劳了。

我的建议是做一个完整的AI应用，包含以下要素：

1. 权限隔离：演示不同角色看到不同的内容
2. 错误处理：模型调用失败时的降级策略，比如缓存兜底、默认回复
3. 成本监控：展示token用量统计，说明你对成本有概念
4. 日志追踪：每个请求有唯一ID，方便问题定位

我见过最好的前端转AI作品集，是一个内部工具平台，集成了多个AI能力（文本生成、图片理解、数据分析），并且有完整的权限管理和操作日志。这个项目不仅展示了前端能力，还体现了系统思维和工程化素养。

---

总结

前端转AI应用，最大的认知升级是从"页面思维"切换到"系统思维"。

• 流式输出、多模态交互这些前端擅长的领域，是你的入场券
• 权限控制、日志追踪、错误兜底这些后端领域，才是你的护城河
• 作品集要展示系统能力，而不仅仅是UI效果

我踩过的坑，希望成为你的路标。AI应用开发的真正门槛，从来不是调通一个API，而是让整个系统在复杂场景下稳定运行。

---

如果你对权限设计和可观测性搭建有具体问题，欢迎在评论区交流。

资料展示

下面是我整理的AI大模型学习资料和工具包预览，适合收藏后按主题逐步学习。

如果你想看完整资料目录，可以在评论区留言「资料」；也欢迎告诉我你更关注AI大模型里的哪类内容。