企业官网建设流程全解析

1. 从“豆包”到“菜包”：一个AI全栈新手的真实起点

最近“豆包”挺火的，身边不少朋友都在讨论。作为一个对AI应用开发有点兴趣，但一直停留在“看教程”阶段的程序员，我总感觉隔着一层纱。那些成熟的AI产品功能强大，但背后的技术栈、工程化细节，对新手来说就像黑盒。直到有一天，我盯着“豆包”的界面，脑子里蹦出一个念头：它叫“豆包”，那我能不能从零开始，搞一个属于自己的“菜包”？不是那种调用个API就完事的玩具，而是一个能跑通前后端、有基础对话逻辑、能部署上线的、完整的AI聊天助手。

这个想法听起来有点“菜”，但恰恰是“菜”的真实。我不打算一开始就追求多模态、长上下文、复杂记忆这些高级特性。我的目标是：用最直接的方式，理解一个现代AI聊天应用从构思到上线的全链路。工具我选择了最近在开发者圈子里口碑不错的Cursor，它集成了强大的AI辅助编程能力，正好可以充当我这个“新手”的“外挂大脑”，帮我跨越一些初始的工程门槛。所以，这篇内容不是什么高深的技术分享，而是一个“菜包”开发者的实战踩坑记录，我会把从环境搭建、技术选型、核心实现到最终部署的每一步，包括那些看似愚蠢但绕不过去的坑，都摊开来聊聊。如果你也对“自己动手做一个AI应用”感兴趣，但又觉得无从下手，那咱们可以一起试试。

2. 项目蓝图与技术栈选型：为什么是这些“配料”？

在真正动手写代码之前，花点时间想清楚“菜包”要做什么、以及用什么工具来做，至关重要。盲目开始很容易陷入“写到一半推倒重来”的困境。

2.1 定义“菜包”的最小可行产品

一个聊天助手最核心的功能是什么？我的定义很简单：

1. 用户能输入文字：需要一个聊天界面。
2. 助手能回复文字：需要调用大语言模型的API。
3. 对话有连续性：需要能记住上下文，不能每句话都独立。
4. 能部署访问：不能只在我本地电脑跑。

基于这四点，我画出了一个极简的架构图：前端页面负责展示和输入，后端服务负责处理逻辑和调用AI，中间通过API通信，最后找个地方把前后端都放上去。功能上，第一期就实现纯文本对话，支持清空上下文，界面干净就行。先追求“跑通”，再考虑“做好”。

2.2 技术栈的“家常菜”选择

选技术栈就像配菜，不求山珍海味，但求顺手、易得、能快速出活。

• 前端：Vue 3 + Element Plus

  • 为什么选它？我对Vue的语法更熟悉，其响应式系统和组件化开发对于构建一个动态的聊天界面非常高效。Element Plus提供了丰富且美观的UI组件，像输入框、按钮、布局容器、消息气泡等，几乎可以拿来即用，能让我把精力集中在业务逻辑而非样式调试上。用Vite作为构建工具，启动和热更新速度极快，开发体验流畅。

• 后端：Node.js + Express

  • 为什么选它？JavaScript/TypeScript全栈的诱惑力很大，前后端语言统一，心智负担小。Express是Node.js生态里最轻量、最灵活的Web框架，足够用来快速搭建RESTful API。对于“菜包”这种IO密集型（主要是网络请求AI API）的应用，Node.js的异步非阻塞特性很合适。后期如果需要，加入TypeScript也能提供更好的类型安全。

• AI能力核心：OpenAI API (GPT-3.5-Turbo)

  • 为什么选它？这是当前最稳定、文档最完善的主流LLM API之一。虽然国内访问需要一些配置，但其可靠性和效果经过了广泛验证。对于新手项目，稳定性和可预测性比追求最新模型更重要。我也可以很方便地切换为其他兼容OpenAI API格式的服务（如一些国内合规的模型平台），只需修改API地址和密钥。

• 开发环境与辅助：Cursor + Git

  • Cursor是本项目的“秘密武器”。它不仅仅是一个编辑器，其深度集成的AI能力（如通过Cmd+K进行自然语言编程、自动补全、代码解释、生成测试等）能极大提升开发效率，尤其是在我不熟悉的领域快速生成代码框架或排查错误。
  • Git用于版本控制，这是现代软件开发的基本素养，哪怕是一个人开发。

• 部署：Vercel (前端) + Railway / 云服务器 (后端)

  • Vercel对前端项目的部署体验是无与伦比的，关联Git仓库后自动部署，自带CDN、HTTPS，非常适合部署我们的Vue应用。
  • 后端的选择更灵活。对于演示级项目，Railway或Render这类平台即服务非常友好，能自动配置环境、部署Node.js应用。如果想更自主，购买一台最基础的云服务器（如各大云厂商的轻量应用服务器），自己用PM2守护进程，也是经典且可控的方案。

这个技术栈组合，每一项都是当前领域内成熟、社区活跃的选择，意味着遇到问题很容易找到解决方案。它构成了我们“菜包”的厨房和基础厨具。

3. 搭建开发环境与项目骨架

工欲善其事，必先利其器。这一步的目标是把代码仓库、本地开发环境、以及项目的基本目录结构建立起来。

3.1 初始化项目与目录结构

首先，我在本地创建一个项目总目录，比如my-ai-chatbot。然后，分别初始化前端和后端子项目。

前端项目初始化：

# 在项目根目录下 npm create vue@latest frontend # 根据提示选择：TypeScript, JSX, Vue Router, Pinia, ESLint等可按需，本项目暂不需要路由和状态管理，可以先不选。 cd frontend npm install npm install element-plus @element-plus/icons-vue # 安装Element Plus及其图标库

后端项目初始化：

# 回到项目根目录 mkdir backend && cd backend npm init -y npm install express express-rate-limit cors dotenv npm install --save-dev @types/express @types/cors typescript ts-node nodemon # 安装核心依赖和开发依赖

初始化完成后，我的项目结构大致如下：

my-ai-chatbot/ ├── frontend/ # Vue前端项目 │ ├── public/ │ ├── src/ │ │ ├── assets/ │ │ ├── components/ # 存放聊天组件等 │ │ ├── App.vue │ │ └── main.ts │ ├── index.html │ ├── package.json │ └── vite.config.ts ├── backend/ # Node.js后端项目 │ ├── src/ │ │ ├── index.ts # 主入口文件 │ │ └── routes/ # 路由文件 │ ├── .env # 环境变量（API密钥等） │ ├── package.json │ └── tsconfig.json └── README.md

3.2 配置Cursor与基础代码生成

打开Cursor，将整个my-ai-chatbot文件夹作为项目打开。Cursor的优势在这里开始体现。例如，当我在backend/src/index.ts中新建文件后，我可以直接使用Cmd+K，输入提示：“创建一个基本的Express服务器，监听3000端口，启用CORS，并添加一个健康检查端点/health。”

Cursor很快会生成类似下面的代码：

import express from 'express'; import cors from 'cors'; import dotenv from 'dotenv'; dotenv.config(); const app = express(); const port = process.env.PORT || 3000; // 中间件 app.use(cors()); // 允许前端跨域请求 app.use(express.json()); // 解析JSON请求体 // 健康检查端点 app.get('/health', (req, res) => { res.json({ status: 'OK', message: '菜包后端服务运行正常' }); }); app.listen(port, () => { console.log(`🚀 菜包后端服务已启动，监听端口: ${port}`); });

同样，在前端，我可以让Cursor帮我快速搭建一个基于Element Plus的聊天界面骨架。在frontend/src/components/ChatWindow.vue中，通过提示生成包含消息列表、输入框和发送按钮的模板代码。

注意：Cursor生成的代码是很好的起点，但绝不能无脑信任。你必须理解每一行代码的作用。例如，它可能不会自动添加请求超时处理、错误边界或者安全相关的中间件（如速率限制），这些都需要我们后续手动补充和完善。把Cursor当作一个强大的代码建议工具，而非自动编程机。

3.3 解决初始依赖与配置问题

在前后端关联开发时，第一个坑往往是跨域问题。虽然我们在后端使用了cors()中间件，但在开发环境下，前端Vite服务器运行在localhost:5173，后端运行在localhost:3000，端口不同属于跨域。我们的CORS配置已经解决了这个问题。

另一个常见问题是环境变量。后端的OpenAI API密钥绝对不能硬编码在代码里。我们在后端项目根目录创建.env文件：

OPENAI_API_KEY=sk-your-actual-api-key-here PORT=3000

并在代码中通过process.env.OPENAI_API_KEY读取。记得将.env添加到.gitignore中，防止密钥泄露。

至此，我们的“厨房”已经准备就绪，灶台（本地服务器）可以点火了。分别在前端和后端目录运行npm run dev（具体命令看package.json中的scripts配置），如果能在浏览器中看到前端页面，并且访问http://localhost:3000/health能看到{“status”: “OK”}的返回，那么基础环境就搭建成功了。

4. 核心功能实现：对话逻辑与前后端联调

环境搭好，接下来就是烹饪的核心环节：实现聊天功能。这部分需要前后端紧密配合。

4.1 后端API：连接OpenAI并管理对话上下文

后端的核心任务是提供一个API端点（比如POST /api/chat），接收用户消息，将其与历史对话组合成符合OpenAI API要求的格式，发送请求，再将AI的回复返回给前端。

首先，安装OpenAI官方Node.js库：

cd backend npm install openai

然后，创建处理聊天的路由逻辑。在backend/src/routes/chat.ts中：

import { Router, Request, Response } from 'express'; import OpenAI from 'openai'; import { rateLimit } from 'express-rate-limit'; const router = Router(); // 配置速率限制：每个IP每15分钟最多100次请求 const chatLimiter = rateLimit({ windowMs: 15 * 60 * 1000, max: 100, message: '请求过于频繁，请稍后再试。', }); // 初始化OpenAI客户端 const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY, }); // 内存中存储对话上下文（仅用于演示，生产环境需用数据库） const userSessions: Map<string, Array<OpenAI.ChatCompletionMessageParam>> = new Map(); router.post('/', chatLimiter, async (req: Request, res: Response) => { try { const { message, sessionId = 'default' } = req.body; if (!message || typeof message !== 'string') { return res.status(400).json({ error: '无效的请求：消息内容不能为空且必须为字符串' }); } // 获取或初始化当前会话的历史记录 if (!userSessions.has(sessionId)) { userSessions.set(sessionId, [ { role: 'system', content: '你是一个乐于助人的AI助手，名字叫“菜包”。请用友好、简洁的语气回答用户的问题。' }, ]); } const conversationHistory = userSessions.get(sessionId)!; // 将用户新消息加入历史 conversationHistory.push({ role: 'user', content: message }); // 调用OpenAI API const completion = await openai.chat.completions.create({ model: 'gpt-3.5-turbo', // 可根据需要更换模型 messages: conversationHistory, temperature: 0.7, // 控制创造性，0-2之间 max_tokens: 1000, // 限制回复长度 }); const aiResponse = completion.choices[0]?.message?.content || '抱歉，我没有收到回复。'; // 将AI回复加入历史 conversationHistory.push({ role: 'assistant', content: aiResponse }); // 可选：限制历史记录长度，防止token超限 if (conversationHistory.length > 20) { // 保留最近10轮对话 conversationHistory.splice(1, conversationHistory.length - 20); // 保留system prompt } // 返回AI回复 res.json({ reply: aiResponse }); } catch (error: any) { console.error('调用AI API出错：', error); // 更友好的错误信息 let errorMessage = '服务器内部错误'; if (error.response) { errorMessage = `AI服务错误 (${error.response.status}): ${error.response.data.error?.message || '未知'}`; } else if (error.request) { errorMessage = '网络错误，无法连接到AI服务'; } res.status(500).json({ error: errorMessage }); } }); // 清空上下文的端点 router.post('/clear', (req: Request, res: Response) => { const { sessionId = 'default' } = req.body; userSessions.delete(sessionId); res.json({ message: '对话上下文已清空' }); }); export default router;

关键点解析与踩坑记录：

1. 速率限制：使用express-rate-limit非常重要。OpenAI API本身有调用频率和额度限制，后端再加一层限制可以防止恶意刷接口，保护你的API密钥和预算。
2. 上下文管理：这里为了简单，使用了内存Map来存储不同会话的历史。这是一个巨大的坑点！服务器重启后所有对话记忆都会消失，且无法在多实例部署下共享。生产环境必须使用数据库（如Redis、MongoDB）来持久化存储会话和消息。
3. System Prompt：在历史记录开头插入一个role为system的消息，用于设定AI助手的角色和行为。这是塑造“菜包”性格的关键。
4. 错误处理：对OpenAI API调用进行了详细的错误捕获和分类处理，向前端返回更明确的错误信息，而不是笼统的“500错误”。
5. Token限制：max_tokens参数和手动修剪历史记录的长度，都是为了控制每次请求的token消耗，避免超出模型上下文长度或产生过高费用。

4.2 前端界面：构建交互式聊天窗口

前端需要创建一个美观且交互流畅的聊天界面。我们使用Vue 3的Composition API和Element Plus。

在frontend/src/components/ChatWindow.vue中：

<template> <div class="chat-container"> <el-container direction="vertical" style="height: 600px; border: 1px solid #ebeef5; border-radius: 8px;"> <!-- 头部 --> <el-header style="border-bottom: 1px solid #e4e7ed; display: flex; align-items: center; justify-content: space-between;"> <div style="font-weight: bold; color: #409EFF;">🤖 菜包 AI 助手</div> <el-button size="small" @click="clearHistory" :disabled="isLoading">清空对话</el-button> </el-header> <!-- 消息区域 --> <el-main style="padding: 20px; overflow-y: auto;" ref="messageContainer"> <div v-for="(msg, index) in messages" :key="index" class="message-wrapper" :class="{ 'user-message': msg.role === 'user' }"> <div class="message-avatar"> <el-avatar v-if="msg.role === 'user'">你</el-avatar> <el-avatar v-else style="background-color: #67c23a;">菜</el-avatar> </div> <div class="message-bubble" :class="{ 'user-bubble': msg.role === 'user' }"> <div v-html="formatMessage(msg.content)"></div> <div class="message-time">{{ msg.timestamp }}</div> </div> </div> <div v-if="isLoading" class="message-wrapper"> <div class="message-avatar"><el-avatar style="background-color: #67c23a;">菜</el-avatar></div> <div class="message-bubble"> <el-icon class="is-loading"><Loading /></el-icon> 菜包正在思考... </div> </div> </el-main> <!-- 输入区域 --> <el-footer style="border-top: 1px solid #e4e7ed; padding: 15px;"> <el-input v-model="inputMessage" type="textarea" :rows="3" placeholder="和菜包聊点什么吧..." @keydown.enter.exact.prevent="sendMessage" :disabled="isLoading" > <template #append> <el-button type="primary" @click="sendMessage" :loading="isLoading" :disabled="!inputMessage.trim()">发送</el-button> </template> </el-input> <div style="font-size: 12px; color: #909399; margin-top: 5px;"> 按 Enter 发送，Shift + Enter 换行。当前会话ID: {{ sessionId }} </div> </el-footer> </el-container> </div> </template> <script setup lang="ts"> import { ref, computed, nextTick, onMounted } from 'vue'; import { ElMessage } from 'element-plus'; import { Loading } from '@element-plus/icons-vue'; // 定义消息类型 interface ChatMessage { role: 'user' | 'assistant'; content: string; timestamp: string; } const inputMessage = ref(''); const messages = ref<ChatMessage[]>([]); const isLoading = ref(false); const messageContainer = ref<HTMLElement>(); // 生成一个简单的会话ID，实际应用中可能来自用户登录信息 const sessionId = ref(`session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`); // 格式化消息内容（简单处理换行） const formatMessage = (content: string) => { return content.replace(/\n/g, '<br>'); }; // 滚动到底部 const scrollToBottom = () => { nextTick(() => { if (messageContainer.value) { messageContainer.value.scrollTop = messageContainer.value.scrollHeight; } }); }; // 发送消息 const sendMessage = async () => { const text = inputMessage.value.trim(); if (!text || isLoading.value) return; // 添加用户消息到界面 const userMsg: ChatMessage = { role: 'user', content: text, timestamp: new Date().toLocaleTimeString(), }; messages.value.push(userMsg); inputMessage.value = ''; scrollToBottom(); isLoading.value = true; try { const response = await fetch('http://localhost:3000/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: text, sessionId: sessionId.value }), }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error || `请求失败 (${response.status})`); } const data = await response.json(); // 添加AIÿ