# 从前端到AI全栈：一个“全干工程师”的自我修养当你的前端页面会问问题，后端能调大模型，而你只用写三行代码——欢迎来到

当你的前端页面会问问题，后端能调大模型，而你只用写三行代码——欢迎来到2025年的全栈开发新世界！

从前有个程序员，他啥都想自己干

大家好，我是你们的“全干工程师”（注意不是“全栈”，是“全干”——因为 AI 帮我干了大部分活）。
今天我要带大家从零搭建一个AI 驱动的全栈应用，顺便聊聊前端、后端、全栈到底是个啥，以及为什么现在连“前端仔”都能调用 GPT 写业务逻辑了。

别慌，本文不讲八股文，不堆术语，主打一个边玩边学，边笑边懂。如果你能看懂 console.log('Hello, World!')，那你就能看完这篇文章并拍着胸脯说：“我也能搞 AI 全栈！”

一、岗位进化史：从前端仔到 AI 应用工程师

先来个灵魂拷问：

“你是前端？后端？还是全栈？”

十年前，这个问题可能让你纠结半天；
五年前，你可能会说“我主攻 React，但也会点 Node”；
而现在？你大概率会回答：

“我是全干工程师——前端我写，后端我搭，AI 我调，bug 它自己修。”

1. 前端工程师：页面美容师

负责让用户看到漂亮的界面。
擅长 HTML/CSS/JS，能把设计稿变成网页。
用户点按钮没反应？锅在后端（甩锅技能 +1）。

2. 大前端工程师（Node.js 加持版）

不仅会写页面，还能用 JavaScript 写服务器。
实现“一套语言走天下”，告别前后端沟通成本。
缺点：容易被后端老哥嘲笑“你那叫玩具服务”。

3. 全栈工程师：孤独的全能战士

前端 + 后端 + 数据库 + 部署，一个人就是一支军队。
优点：项目上线快；缺点：头发掉得快。

4. 全干工程师（AI 时代新物种）

把重复劳动交给 AI，自己专注业务逻辑和用户体验。
用自然语言描述需求，AI 自动生成代码、测试、文档。
核心能力：会提问（Prompt Engineering 是新时代的编程语言）。

5. AI 应用开发工程师：未来的主流岗位

不再手写 CRUD，而是设计 AI 工作流。
搭建“数据 + LLM + 前端”闭环系统。
目标：让应用拥有“思考”能力。

✅ 关键点：技术栈在变，但核心不变——解决问题。AI 不是取代你，而是让你从“搬砖”升级为“指挥砖”。

二、我们的小项目：一个会“思考”的用户查询机器人

设想这样一个场景：
你有一个用户列表（比如公司员工），用户可以在网页上问：“谁来自吉安？”
系统自动调用大模型，分析 JSON 数据，返回答案。

听起来高大上？其实代码不到 50 行！

项目结构预览（极简版全栈）

my-ai-fullstack-app/
├── .env                 # 存放 API 密钥（别提交到 Git！）
├── users.json           # 模拟数据库
├── index.html           # 前端页面
└── server.js            # Node.js + OpenAI 的 HTTP 服务

是不是比你想象中简单？下面拆解每一部分。

三、前端：就一个输入框，但很智能

看看 index.html 的内容：

Users Chatbot| ID|姓名|家乡|
| ---|---|---|
请输入问题：提交

这其实是个简陋表格 + 输入框。但重点在于：它会把用户的问题发给后端。

实际开发中，你可以用 Vue/React 做个漂亮界面，但原理一样：

用户输入问题（如“谁来自九江？”）
前端通过 fetch 发送请求到后端 API
后端返回 AI 生成的答案
前端展示结果

💡 幽默插播：以前前端要等后端接口文档，现在直接问 AI：“这个接口怎么调？” —— 结果 AI 回：“你后端还没写呢！”

四、数据层：users.json 就是你的“数据库”

看一眼 users.json：

{
  "users": [
    { "id": 1, "username": "曹威威", "hometown": "九江" },
    { "id": 2, "username": "宋婉琳", "hometown": "吉安" },
    { "id": 3, "username": "习皓俊", "hometown": "吉安" },
    { "id": 4, "username": "王毓宸", "hometown": "吉安" }
  ]
}

这就是我们的“数据库”。虽然只有 4 条数据，但在开发阶段，JSON 文件完全可以替代 MySQL！

🚀 进阶技巧：用 json-server 一键启动 REST API
npx json-server --watch users.json --port 3001
立刻获得 /users 接口，支持增删改查！适合快速原型开发。

五、后端 + LLM：Node.js 调用大模型的核心逻辑

重头戏来了！看 server.js（简化版）：

import http from 'http';
import OpenAI from 'openai';
import url from 'url';
import { config } from 'dotenv';

// 1. 加载 .env 中的密钥
config({ path: '.env' });

// 2. 初始化 OpenAI 客户端（这里用了代理地址）
const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  baseURL: 'https://api.agicto.cn/v1' // 国内可用的代理
});

// 3. 调用大模型的函数
const getCompletion = async (prompt) => {
  const result = await client.chat.completions.create({
    model: 'gpt-3.5-turbo',
    messages: [{ role: 'user', content: prompt }],
    temperature: 0.1 // 降低随机性，要准确答案
  });
  return result.choices[0].message.content;
};

// 4. 创建 HTTP 服务
http.createServer(async (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  
  // 解析 URL 参数：?question=谁来自吉安&data={...}
  const parsedUrl = url.parse(req.url, true);
  
  // 构造 Prompt：把数据和问题一起喂给 AI
  const prompt = `
${parsedUrl.query.data}
请根据上面的JSON数据，回答“${parsedUrl.query.question}”这个问题。
`;

  const result = await getCompletion(prompt);
  
  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify({ result }));
}).listen(1314);

console.log('AI 服务已启动，端口 1314 ❤️');

关键原理拆解：

1. `.env` 文件：安全存放密钥

OPENAI_API_KEY=sk-xxxxxx
通过 dotenv 加载，避免硬编码密钥。
切记：.env 加入 .gitignore，别泄露！

2. Prompt Engineering：让 AI 看懂你的数据

把 users.json 转成字符串，拼接到问题前。

示例 Prompt：

{"users": [{"username":"曹先生","hometown":"九江"}, ...]}
请根据上面的JSON数据，回答“谁来自吉安”这个问题。

AI 会解析 JSON 并返回自然语言答案，比如：“来自吉安的有宋女士、习先生和王先生。”

3. 温度（temperature）设为 0.1

越低越确定，适合事实型问答；
如果做创意写作，可以调高到 0.7+。

4. CORS 设置：让前端能跨域调用

Access-Control-Allow-Origin: '*' 允许任何前端访问。
生产环境应限制域名。

🤯 神奇之处：你不需要写“遍历数组找 hometown == 吉安”的逻辑！AI 自动理解数据结构并回答。这就是 LLM 作为“通用逻辑处理器” 的威力。

六、全栈目录结构：现代 AI 应用的标准姿势

回到开头提到的目录建议：

my-project/
├── frontend/          # React/Vue 项目
├── backend/
│   ├── server.js      # 主服务（含 LLM 调用）
│   └── users.json     # 静态数据 / 或连接真实 DB
├── .env               # 环境变量
└── package.json       # 脚本管理

开发流程：

前端写页面，调用 http://localhost:1314/?question=xxx&data=yyy
后端接收请求，构造 Prompt，调用 OpenAI
OpenAI 返回答案，后端返回给前端
前端渲染结果

整个过程，没有 SQL，没有 ORM，没有复杂的业务逻辑——因为 AI 承担了“理解+推理”的工作。

七、安全与优化提醒（别真拿去上线！）

虽然 demo 很酷，但生产环境要注意：

不要直接暴露原始数据给前端
→ 应该由后端读取 users.json，而不是让前端传 data 参数（否则用户可篡改数据）。
API 密钥保护
→ 当前方案密钥在服务端，安全；但如果用前端直连 OpenAI，密钥会泄露！
增加缓存与限流
→ 避免用户疯狂提问导致账单爆炸。
使用更稳定的模型
→ gpt-4-turbo 或国产大模型（如通义千问）可能更适合中文场景。

八、结语：全栈的未来，是“人机协作”

我们正在经历一场开发范式的变革：

过去：全栈 = 会前端 + 会后端 + 会运维
现在：全栈 = 会设计 + 会提问 + 会整合 AI 能力

你不需要成为每个领域的专家，但要懂得如何让工具为你工作。

最后送大家一句话：
“代码可以自动生成，但产品思维和用户洞察，永远属于人类。”

所以，别怕 AI 抢饭碗——
会用 AI 的程序员，正在抢不会用 AI 的程序员的饭碗。

# 从前端到AI全栈：一个“全干工程师”的自我修养