AI 全栈应用开发实战：从前端到 LLM 接入在 AI 技术飞速发展的今天，传统的全栈工程师角色正在向“AI 全栈”演进

在 AI 技术飞速发展的今天，传统的全栈工程师角色正在向“AI 全栈”演进。本文将通过一个完整的示例项目，带你从零搭建一个结合前端展示、后端数据服务与大语言模型（LLM）问答能力的 AI 全栈应用。

一、岗位演变与技能图谱

随着 AI 工具（如 GitHub Copilot、通义灵码等）的普及，开发者角色正发生深刻变化：

岗位	核心能力	AI 赋能点
前端工程师	HTML/CSS/JS、React/Vue	UI 自动生成、交互逻辑辅助
大前端工程师	Node.js、BFF 层开发	服务端逻辑快速生成
全栈工程师	前后端联调、数据库设计	全流程代码生成与调试
AI 应用开发工程师	Prompt 工程、API 集成、Agent 设计	主导 AI 与业务融合

“全干工程师” ：借助 AI 工具，一人可高效完成从前端到部署的全流程开发。

二、项目结构设计

我们采用经典的三层架构，并新增 llm 模块用于对接大模型：

ai-fullstack-app/
├── frontend/          # 前端页面（HTML + Bootstrap）
├── backend/           # 数据接口服务
│   ├── users.json     # 模拟用户数据
│   └── package.json   # 启动 json-server
└── llm/               # LLM 服务（Node.js HTTP 服务）
    ├── server.js      # 接收问题，调用 OpenAI API
    └── .env           # 存放 API Key

三、后端数据服务（Mock API）

使用 json-server 快速搭建 RESTful API，无需写一行后端代码。

1. 安装与配置

cd backend
pnpm i json-server

2. `package.json` 脚本

{
  "scripts": {
    "dev": "json-server --watch users.json --port 3001"
  },
  "dependencies": {
    "json-server": "1.0.0-beta.3"
  }
}

3. `users.json` 数据格式

{
  "users": [
    { "id": 1, "username": "曹威威", "hometown": "九江" },
    { "id": 2, "username": "张三", "hometown": "北京" },
    { "id": 3, "username": "里斯", "hometown": "上海" },
    { "id": 4, "username": "王五", "hometown": "广州" }
  ]
}

终端输入npm run dev启动服务器脚本，访问 http://localhost:3001/users 即可获取 JSON 数据。

四、前端页面开发

使用 Bootstrap 构建响应式界面，包含用户列表和 AI 问答表单。

关键代码解析

<div class="container">
  <!-- 用户表格 -->
  <table class="table table-striped" id="user_table">...</table>

  <!-- AI 问答表单 -->
  <form name="aiForm">
    <input type="text" name="question" required placeholder="请输入问题">
    <button type="submit" class="btn btn-primary">提交</button>
  </form>

  <!-- 显示 AI 回答 -->
  <div id="message"></div>
</div>

JavaScript 逻辑

加载用户数据：
```
fetch('http://localhost:3001/users')
  .then(res => res.json())
  .then(data => {
    users = data;
    // 渲染表格
  });
```
fetch是浏览器提供的原生 API，用于发起网络请求（类似 AJAX）。默认发送 GET 请求（除非你传入第二个参数配置 method 等）。

user是数据存储的后端json文件

虽然res包含了状态码，响应头，响应体，但json方法自动解析响应体内容返回，只包含了users数据

提交问题给 LLM 服务：

fetch(`http://localhost:1314/?question=${question}&data=${JSON.stringify(users)}`)
  .then(res => res.json())
  .then(data => {
    document.getElementById('message').innerHTML = data.result;
  });

注意：前端需处理跨域（CORS），后端已设置 Access-Control-Allow-Origin: *。

五、LLM 服务集成（Node.js）

创建一个轻量级 HTTP 服务，接收前端问题，调用大模型 API 并返回答案。

1. 安装依赖

cd llm
pnpm init -y
pnpm add openai dotenv

2. `.env` 文件（保密！）

OPENAI_API_KEY=your_api_key_here

建议使用国内代理如 https://api.agicto.cn/v1 加速访问。

3. `server.js` 核心逻辑

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', // 可选代理
});

// 调用大模型
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;
};

// 创建 HTTP 服务
http.createServer(async (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Content-Type', 'application/json');

  const { query } = URL.parse(req.url, true);
  const { question, data } = query;

  // 构造 Prompt：注入上下文数据
  const prompt = `
    你是一个智能助手。以下是用户数据（JSON 格式）：
    ${data}

    请根据以上数据，准确回答以下问题：
    ${question}
  `;

  try {
    const result = await getCompletion(prompt);
    res.end(JSON.stringify({ result }));
  } catch (err) {
    res.end(JSON.stringify({ error: err.message }));
  }
}).listen(1314);

console.log('LLM 服务运行于 http://localhost:1314');

六、运行整个应用

启动数据服务：

cd backend && pnpm run dev  # 端口 3001

启动 LLM 服务：

cd llm && node server.js    # 端口 1314

打开 frontend/index.html（可用 Live Server 或直接浏览器打开）

测试示例

输入问题： “谁来自上海？”
AI 返回： “里斯来自上海。”

七、扩展方向

安全增强：对 data 参数做 JSON 校验，防止注入攻击。
性能优化：缓存常用问题结果，减少 LLM 调用次数。
多模态支持：接入图像识别、语音输入等能力。
部署上线：使用 Vercel（前端）、Render（后端）、Docker 容器化。

结语

通过这个项目，你不仅掌握了全栈开发的基本流程，更学会了如何将大语言模型无缝集成到实际应用中。未来，AI 不再是“附加功能”，而是应用的核心驱动力。作为新一代开发者，掌握“AI + 全栈”能力，将成为你的核心竞争力。

提示：实际开发中，请务必保护 API Key，避免泄露；生产环境应使用 HTTPS 和身份验证。

动手试试吧！ 用不到 100 行代码，打造属于你的第一个 AI 应用 🚀

AI 全栈应用开发实战：从前端到 LLM 接入