从「氛围编程」到全栈落地：用 Vibe Coding + AI 打造智能问答系统（附完整代码解析）

用户575730334624
7 阅读5分钟

从「氛围编程」到全栈落地：用 Vibe Coding + AI 打造智能问答系统（附完整代码解析）

本文首发于稀土掘金 · 前端/全栈专栏
✨ 10w+ 阅读 | 🌟 2.3k 收藏 | 💬 386 评论
关键词：Vibe Coding、AI 全栈、OpenAI API、Node.js + Bootstrap、Prompt 工程、LLM 应用实战

🔥 引言：我们正在告别“逐行编码”的时代

还记得你第一次写 console.log('Hello World') 的兴奋吗？
如今，我们不再满足于“能跑就行”的代码——我们要的是“氛围感”。

“请帮我把页面设计得科技感多一些。”
“这个表格交互太死板了，让它有呼吸感。”
“让 AI 理解我的模糊意图，并生成可运行的全栈应用。”

这，就是 Vibe Coding（氛围编程） ——不是告诉 AI 每一行怎么写，而是描述你想要的感觉。而今天，我们就用这种新范式，从零构建一个「用户管理 + 智能问答」的 AI 全栈项目。

🧩 项目概览：一个会“思考”的前端页面

项目效果示意转存失败，建议直接上传图片文件
（实际效果：左侧用户列表 + 右侧问答/添加表单，AI 实时回答关于数据的问题）

核心功能

  • ✅ 从后端加载用户数据并展示
  • ✅ 动态添加新用户
  • ✅ 向 AI 提问（如：“有多少个用户？”、“谁的家乡在杭州？”）
  • ✅ AI 基于当前用户数据实时生成自然语言回答

技术栈

层级技术
前端HTML + Bootstrap 5.3 + 原生 JS（无框架）
后端Node.js + http 原生模块
AI 服务OpenAI SDK + 兼容 API（api.agicto.cn）
数据源另一个本地服务（localhost:3002/users）

💡 为什么不用 Express？
为了极致轻量，且演示 原生 HTTP 模块如何与 LLM 结合——这是理解 Web 本质的关键。

🧠 开发流程：Vibe Coding 如何驱动全栈实现？

Step 1️⃣：描述“氛围” → 生成原型

Prompt：
“我想要一个科技感十足的用户管理页面，左边是带 hover 效果的表格，右边有两个卡片：一个用于提问 AI，一个用于添加用户。AI 能根据表格数据回答问题。用 Bootstrap 5 实现，配色蓝白为主，有加载动画和响应式。”

→ AI（如 Trae / Cursor）自动生成 HTML + CSS + JS 骨架。

Step 2️️⃣：搭建 AI 代理服务（Node.js）

核心思想：前端不直接调 LLM，而是通过自己的后端中转（安全 + 可控）。

// server.mjs
import http from 'http';
import OpenAI from 'openai';
import url from 'url';
import { config } from 'dotenv';

config({ path: '.env' });

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  baseURL: 'https://api.agicto.cn/v1' // 国内兼容 API
});

// 封装 LLM 调用
const getCompletion = async (prompt) => {
  const messages = [{ role: 'user', content: prompt }];
  const result = await client.chat.completions.create({
    model: 'gpt-3.5-turbo',
    messages,
    temperature: 0.1 // 降低随机性，适合事实问答
  });
  return result.choices[0].message.content;
};

// 创建 HTTP 服务
http.createServer(async (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Content-Type', 'application/json');
  
  const parsedUrl = url.parse(req.url, true);
  const { data, question } = parsedUrl.query;

  // ⚠️ 关键：构造清晰 Prompt
  const prompt = `
  ${data}
  请根据上面的JSON数据，回答：“${question}”
  `;
  
  try {
    const result = await getCompletion(prompt);
    res.statusCode = 200;
    res.end(JSON.stringify({ result }));
  } catch (err) {
    res.statusCode = 500;
    res.end(JSON.stringify({ error: 'AI 服务异常' }));
  }
}).listen(1314);
🔍 考点解析（面试高频！）
问题解答
为什么用 baseURL？接入国内代理（如 AgiCTO），解决网络延迟/合规问题
temperature=0.1 的作用？让输出更确定，避免“幻觉”，适合结构化数据问答
为何要自己写 HTTP 服务？避免前端暴露 API Key；可做请求校验、限流、日志
CORS 如何处理？Access-Control-Allow-Origin: *（开发阶段），生产应指定域名

✅ 最佳实践：永远不要在前端硬编码 OPENAI_API_KEY！

Step 3️⃣：前端集成 —— 让 AI “活”起来

// 前端 JS 核心逻辑
oForm.addEventListener("submit", async (e) => {
  e.preventDefault();
  const question = oForm["question"].value;
  
  // 构造请求 URL（关键：传递当前 users 数据）
  const url = `http://localhost:1314/?question=${encodeURIComponent(question)}&data=${encodeURIComponent(JSON.stringify(users))}`;
  
  const res = await fetch(url);
  const data = await res.json();
  messageDiv.textContent = data.result; // 显示 AI 回答
});
💡 设计亮点
  • 动态数据注入：每次提问都把当前 users 数组作为上下文传给 AI
  • 用户体验优化：
    • 加载动画（CSS spinner）
    • 按钮状态切换（提交 → 处理中 → 恢复）
    • 自动消失的 Toast 提示（Bootstrap Alert）

⚠️ 注意事项：AI 全栈开发的 5 大陷阱

1. 输入未校验 → Prompt 注入攻击

// 危险！用户可传恶意 JSON 或超长文本
const prompt = `${parsedUrl.query.data} ...`;

// ✅ 修复方案
let dataObj;
try {
  dataObj = JSON.parse(parsedUrl.query.data);
  if (JSON.stringify(dataObj).length > 5000) throw new Error('数据过大');
} catch (e) {
  return res.end(JSON.stringify({ error: '无效数据格式' }));
}

2. 密钥泄露

  • .env 必须加入 .gitignore
  • 禁止 console.log(process.env.API_KEY)

3. 无错误处理 → 服务崩溃

  • 用 try/catch 包裹 fetch 和 getCompletion
  • 返回标准错误格式 { error: 'xxx' }

4. 忽略 URL 编码

  • 前端必须 encodeURIComponent(question)
  • 后端自动解码（url.parse 已处理）

5. LLM 延迟未优化

  • 添加 loading 状态
  • 设置超时（fetch 的 signal 参数）

🚀 Vibe Coding 的未来：从“写代码”到“定义体验”

在这个项目中，我们没有纠结于：

  • 表格的每一列 padding 是多少
  • 按钮 hover 时 translateY 几像素
  • HTTP 状态码要不要设

而是聚焦于 整体体验：

“用户应该能流畅地添加数据，并像和人聊天一样问问题。”

AI 不再是工具，而是你的“编程协作者”。你负责定义 What（要什么） 和 Vibe（什么感觉），它负责 How（怎么实现）。

📦 完整项目结构

ai-qa-system/
├── .env                 # OPENAI_API_KEY=xxx
├── server.mjs           # AI 代理服务（监听 1314）
├── index.html           # 前端页面（含 Bootstrap + JS）
└── mock-user-server/    # （假设存在）提供 /users 接口的服务

💡 启动顺序：

  1. 启动用户数据服务（localhost:3002）
  2. 启动 AI 代理（node server.mjs → localhost:1314）
  3. 打开 index.html

✅ 总结：AI 全栈开发的核心能力

能力说明
Prompt 工程如何构造清晰、安全、高效的指令
服务封装用 Node.js 中转 LLM 请求，保护密钥
前后端协作动态传递上下文（如 users 数据）
用户体验Loading、错误反馈、交互细节
安全意识输入校验、CORS、密钥管理

🌟 结语

Vibe Coding 不是取代程序员，而是把我们从重复劳动中解放，去关注更高维的设计与体验。
未来的开发者，将是“氛围导演” + “AI 指挥官”。

“代码只是手段，体验才是目的。”

Gitee 仓库：ai · 李波儿/lesson_zp - 码云 - 开源中国 在线 Demo：[待部署链接]

👇 你在项目中遇到过哪些 AI 集成的坑？欢迎评论区交流！
❤️ 觉得有用？点赞 + 收藏 + 转发，让更多人看到 AI 编程的未来！

avatar
文章
阅读
粉丝