手把手打造 AI 全栈应用，先做个简单的前后端串联：从前端到 LLM 接入实战指南🌟 引言：AI 时代的全栈开发者在

关键词：全栈开发｜JSON Server｜Node.js HTTP 服务｜OpenAI API｜CORS｜nodemon｜前后端联调

🌟 引言：AI 时代的全栈开发者

在 AI 技术迅猛发展的今天，传统的“前端 + 后端”分工正在被打破。借助大模型（LLM），一个开发者可以快速构建具备智能问答能力的完整应用——这就是 AI 全栈开发 的魅力。

本文将带你从零开始，搭建一个 用户数据展示 + AI 智能问答 的全栈应用，涵盖：

前端页面（HTML + Bootstrap + Fetch）
模拟后端 API（json-server）
自定义 LLM 服务（Node.js + OpenAI 兼容 API）
跨域通信（CORS）
开发工具链（nodemon、dotenv）

目标：输入问题如“谁来自吉安？”，AI 自动分析用户数据并返回答案！

📁 项目结构规划

bash
编辑
ai-fullstack-demo/
├── frontend/               # 前端静态页面
│   └── index.html
├── backend/                # LLM 服务
│   ├── server.js
│   └── .env
├── data/                   # 模拟数据库
│   └── users.json
└── package.json            # 根目录或分模块管理（本文简化为两个独立包）

💡 实际开发中可使用 monorepo（如 pnpm workspace）统一管理，但初学建议分离清晰。

第一步：搭建模拟数据服务（JSON Server）

1. 初始化数据服务项目

bash
编辑
mkdir data-service && cd data-service
npm init -y
npm install json-server@1.0.0-beta.3

2. 创建 `users.json`

注意：json-server 要求根属性为资源名，所以你的数据应写成：

json
编辑
{
  "users": [
    { "id": 1, "username": "饶世豪", "hometown": "九江" },
    { "id": 2, "username": "宋万零", "hometown": "吉安" },
    { "id": 3, "username": "李白", "hometown": "吉安" }
  ]
}

❌ 错误格式：直接写数组 [ {...}, {...} ] → json-server 无法识别资源名。

3. 配置启动脚本

在 package.json 中添加：

json
编辑
{
  "scripts": {
    "dev": "json-server --watch users.json --port 3001"
  }
}

4. 启动服务

bash
编辑
npm run dev

✅ 访问 http://localhost:3001/users 可看到全部用户
✅ 访问 http://localhost:3001/users/1 可获取 ID=1 的用户

🔧 小技巧：安装 nodemon 可自动重启（虽 json-server 自带 watch，但通用技巧值得掌握）：
bash
编辑
npm install -g nodemon
# 然后用 nodemon 启动（非必需）

第二步：开发前端页面（frontend/index.html）

使用你提供的 HTML，关键点如下：

✅ 功能说明

页面加载时，通过 fetch('http://localhost:3001/users') 获取用户列表并渲染表格
用户输入问题后，将 问题 + 用户数据 发送给 LLM 服务（端口 1314）

⚠️ 注意事项

<row class="row"> 应为 <div class="row">（Bootstrap 无 <row> 标签）
查询选择器 #user_table 多了一个空格 → 改为 #user_table
使用 fetch 发起跨域请求（因端口不同：3000 vs 3001 vs 1314）

第三步：构建 LLM 智能服务（backend/server.js）

1. 初始化 Node.js 项目

bash
编辑
mkdir llm-service && cd llm-service
npm init -y
npm install openai dotenv

2. 创建 `.env` 文件（保护 API Key）

env
编辑
OPENAI_API_KEY=your_api_key_here

🔐 切勿提交 .env 到 Git！ 在 .gitignore 中加入 .env

3. 编写 `server.js`

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

config(); // 加载 .env

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

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 服务
const server = http.createServer(async (req, res) => {
  // 解决跨域问题（前端在 3000/8080，此服务在 1314）
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  if (req.method === 'OPTIONS') {
    res.writeHead(204);
    return res.end();
  }

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

  if (!question || !data) {
    res.statusCode = 400;
    return res.end(JSON.stringify({ error: '缺少 question 或 data 参数' }));
  }

  try {
    const prompt = `
      以下是用户数据（JSON 格式）：
      ${data}

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

      要求：只回答问题本身，不要解释，不要多余内容。
    `;
    
    const result = await getCompletion(prompt);
    res.setHeader('Content-Type', 'application/json');
    res.end(JSON.stringify({ result }));
  } catch (err) {
    console.error(err);
    res.statusCode = 500;
    res.end(JSON.stringify({ error: 'LLM 调用失败' }));
  }
});

server.listen(1314, () => {
  console.log('✅ LLM 服务已启动，监听 http://localhost:1314');
});

4. 使用 nodemon 提升开发体验

安装 nodemon（本地或全局）：

bash
编辑
npm install -g nodemon
# 或本地安装：npm install --save-dev nodemon

修改 package.json：

json
编辑
{
  "scripts": {
    "dev": "nodemon server.js"
  }
}

启动 LLM 服务：

bash
编辑
npm run dev

✨ 优势：修改 server.js 后自动重启，无需手动 Ctrl+C 再启动！

第四步：联调与测试

启动所有服务

服务	端口	命令
数据 API	3001	`cd data-service && npm run dev`
LLM 服务	1314	`cd llm-service && npm run dev`
前端页面	任意（如 8080）	用 VS Code Live Server / `npx serve` / 直接双击打开

💡 若直接双击打开 index.html，浏览器地址为 file://，可能受 CORS 限制。建议用简易服务器：
bash
编辑
npx serve frontend
# 或
python3 -m http.server 8080

测试流程

打开 http://localhost:8080
表格自动加载用户数据
输入问题： “谁来自吉安？”
查看 Network 请求：
- 前端 → http://localhost:1314/?question=...&data=[...]
- LLM 服务调用 AGICTO API
页面显示 AI 回答： “宋万零和李白来自吉安。”

🔒 安全与优化建议

不要暴露 API Key：前端绝不直接调用 LLM API，必须经由自己的后端代理。
输入校验：对 question 做长度、敏感词过滤。
错误处理：网络超时、API 配额耗尽等情况需友好提示。
缓存机制：相同问题可缓存结果，减少 LLM 调用成本。
升级架构：生产环境可用 Express/Koa 替代原生 http，增加日志、监控等。

💼 延伸：全栈工程师的能力图谱

能力维度	本文涉及点
前端	HTML/CSS/JS、Bootstrap、Fetch API
后端	Node.js、HTTP 服务、路由解析
数据	JSON Server、RESTful API
AI 集成	OpenAI SDK、Prompt Engineering
工程化	npm scripts、nodemon、dotenv、CORS
调试	浏览器 DevTools、console.log、Network 面板

✅ 总结

通过这个小项目，你已经掌握了：

如何用 json-server 快速 mock API
如何用原生 Node.js 搭建 LLM 代理服务
如何处理跨域（CORS）
如何安全地集成第三方 AI API
如何用 nodemon 提升开发效率

这正是 AI 时代全栈工程师 的核心能力：连接数据、逻辑与智能。

现在，你可以尝试：

增加“添加用户”功能（POST 到 json-server）
将回答渲染为 Markdown
接入语音输入/输出

动手实践，才是成为高手的唯一路径！🚀

📚 附：常用命令速查

bash
编辑
# 安装 nodemon（全局）
npm install -g nodemon

# 启动 json-server
npx json-server --watch users.json --port 3001

# 启动 LLM 服务（带自动重启）
nodemon server.js

# 启动前端静态服务器
npx serve .

手把手打造 AI 全栈应用，先做个简单的前后端串联：从前端到 LLM 接入实战指南