10 分钟搭建 AI 应用全栈开发 Demo：前端 + 后端 + LLM 联动实战

生椰丝绒拿铁
150 阅读7分钟

作为开发者，你是否想过用最简单的技术栈，快速实现一个能 “看懂数据、回答问题” 的 AI 应用？不用复杂框架，不用高深算法，仅靠前端 Bootstrap、Node.js 后端和 OpenAI API，就能搭建一个完整的 AI 数据查询系统。本文将带你从 0 到 1 落地实战，不仅能掌握全栈开发核心流程，还能理解 AI 如何与传统前后端联动，新手也能轻松跟上！

一、项目核心思路：AI 赋能数据查询的全栈逻辑

很多人觉得 AI 应用开发门槛高，其实核心逻辑很简单：让 AI 成为 “数据解读师”，连接前端的用户需求和后端的数据源。

这个项目的核心流程可以概括为 3 步：

  1. 后端用 json-server 快速搭建数据服务，提供用户基础数据（姓名、家乡等）；
  2. 前端通过 Bootstrap 构建页面，展示数据并接收用户查询问题；
  3. 中间层用 Node.js 搭建 HTTP 服务，将用户问题和数据源传给 LLM，再把 AI 的回答返回给前端。

整个过程没有复杂的数据库设计，不用手动写查询逻辑，AI 会自动解析数据并响应问题 —— 这就是 AI 时代全栈开发的高效之处：让工具帮我们处理重复工作，专注核心业务逻辑。

二、技术栈选型：轻量高效，新手友好

为什么选择这些技术？核心是 “快速落地”，避免在环境配置和复杂语法上浪费时间：

  • 前端：HTML+Bootstrap + 原生 JS，不用 React/Vue，减少学习成本，Bootstrap 自带样式让页面快速成型；
  • 后端数据服务：json-server，一行命令就能把 JSON 文件变成 RESTful API，无需写数据库连接代码；
  • 中间层：Node.js+http 模块，原生模块搭建 HTTP 服务，配合 OpenAI SDK 调用 AI 能力；
  • AI 能力：OpenAI API（兼容第三方代理），用 gpt-3.5-turbo 模型，低成本实现自然语言交互。

技术栈看似基础，但覆盖了全栈开发的核心环节：前后端通信、数据处理、第三方服务集成，学会这套思路，能迁移到更复杂的 AI 应用开发中。

三、分步实现：从搭建到运行的完整流程

3.1 项目结构设计：清晰划分模块

先规划好目录结构，避免开发中文件混乱，这是全栈开发的好习惯：

plaintext

ai-fullstack-demo/
├── frontend/          # 前端页面
│   └── index.html     # 核心页面（数据展示+问题输入）
├── backend/           # 后端服务
│   ├── server.js      # Node.js HTTP+LLM服务
│   └── users.json     # 数据源（用户信息）
└── .env               # 环境变量（存储OpenAI API密钥）

每个文件夹职责明确，前端只负责页面交互，后端处理数据和 AI 调用，后期维护起来也方便。

3.2 后端搭建：3 行代码启动数据服务

首先搞定数据源和数据服务，这是整个应用的 “数据底座”：

  1. 初始化项目并安装依赖：

bash

运行

npm init -y
pnpm add json-server dotenv openai
  1. 编写数据源users.json：

json

{
  "users": [
    {"id": 1, "username": "曹威威", "hometown": "九江"},
    {"id": 2, "username": "宋婉琳", "hometown": "吉安"},
    {"id": 3, "username": "习皓俊", "hometown": "吉安"},
    {"id": 4, "username": "王毓宸", "hometown": "吉安"}
  ]
}
  1. 启动数据服务：在package.json中添加脚本：

json

"scripts": {
  "dev:data": "json-server --watch backend/users.json --port 3001"
}

运行npm run dev:data，访问http://localhost:3001/users，就能看到 JSON 数据 —— 这就是我们的后端 API，无需写任何接口代码！

3.3 中间层：Node.js 联动 LLM 服务

这是项目的核心，负责连接前端、数据源和 AI，实现 “问题→数据→AI 回答” 的流转：

  1. 配置环境变量：在.env文件中添加 API 密钥（避免硬编码）：

env

OPENAI_API_KEY=你的API密钥
  1. 编写server.js：

javascript

运行

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

// 加载环境变量
config({ path: '.env' });

// 初始化OpenAI客户端（兼容第三方代理）
const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  baseURL: 'https://api.agicto.cn/v1'
});

// 调用AI生成回答
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 { question, data } = parsedUrl.query;

  // 构建AI提示词（关键：让AI基于指定数据回答）
  const prompt = `请根据以下JSON数据回答问题：\n${data}\n问题：${question}`;
  
  try {
    const result = await getCompletion(prompt);
    res.end(JSON.stringify({ result }));
  } catch (error) {
    res.end(JSON.stringify({ result: 'AI调用失败，请检查API密钥' }));
  }
}).listen(1314, () => {
  console.log('LLM服务启动：http://localhost:1314');
});

核心逻辑：接收前端传来的 “问题” 和 “数据源”，拼接成提示词传给 AI，再把 AI 的回答以 JSON 格式返回 —— 这就是 AI 应用中间层的核心工作。

3.4 前端实现：数据展示 + 交互功能

前端要做两件事：展示后端数据，接收用户问题并传给中间层：

html

预览

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI数据查询助手</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <!-- 数据表格 -->
    <div class="row col-md-6 col-md-offset-3">
      <table class="table table-striped" id="user_table">
        <thead>
          <tr><th>ID</th><th>姓名</th><th>家乡</th></tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <!-- 问题输入表单 -->
    <div class="row col-md-6 col-md-offset-3">
      <form name="aiForm">
        <div class="form-group">
          <label for="questionInput">请输入问题：</label>
          <input type="text" class="form-control" id="questionInput" name="question" required placeholder="例如：吉安有多少人？谁来自九江？">
        </div>
        <button type="submit" class="btn btn-primary">提交查询</button>
      </form>
    </div>

    <!-- AI回答展示 -->
    <div class="row col-md-6 col-md-offset-3" id="message" style="margin-top:20px;"></div>
  </div>

  <script>
    const oForm = document.forms["aiForm"];
    const oTableBody = document.querySelector('#user_table tbody');
    const oBtn = document.querySelector(".btn");
    let users = [];

    // 1. 加载后端数据并展示在表格
    fetch('http://localhost:3001/users')
      .then(res => res.json())
      .then(data => {
        users = data;
        // 渲染表格数据
        oTableBody.innerHTML = data.map(user => `
          <tr>
            <td>${user.id}</td>
            <td>${user.username}</td>
            <td>${user.hometown}</td>
          </tr>
        `).join("");
      });

    // 2. 提交问题给LLM服务
    oForm.addEventListener("submit", (event) => {
      event.preventDefault();
      const question = oForm["question"].value.trim();
      if (!question) {
        alert("请输入查询问题！");
        return;
      }

      oBtn.disabled = true;
      // 调用中间层服务，传递问题和数据
      fetch(`http://localhost:1314/?question=${question}&data=${JSON.stringify(users)}`)
        .then(res => res.json())
        .then(data => {
          oBtn.disabled = false;
          document.getElementById('message').innerHTML = `<div class="alert alert-success">${data.result}</div>`;
        });
    });
  </script>
</body>
</html>

代码很简洁：用fetch获取后端数据渲染表格，提交表单时把问题和数据传给 Node.js 服务，最后展示 AI 的回答 ——Bootstrap 让页面不用额外写样式，原生 JS 就能实现所有交互。

3.5 启动项目：三步运行全栈应用

  1. 启动数据服务：npm run dev:data（端口 3001）；
  2. 启动 LLM 服务：node backend/server.js（端口 1314）；
  3. 打开frontend/index.html，输入问题（如 “吉安有几个人？”“谁来自九江？”），点击提交就能看到 AI 的回答！

四、关键技术点拆解：理解全栈联动的核心

4.1 跨域问题解决

前端运行在本地文件（file://协议），后端服务在localhost:3001和1314，会出现跨域错误。我们在 Node.js 服务中添加了Access-Control-Allow-Origin: *，允许所有域名访问，快速解决开发环境的跨域问题。

4.2 AI 提示词设计技巧

让 AI 准确回答的关键是 “明确提示词”：我们把数据源和问题一起传给 AI，让 AI 只基于提供的数据回答，避免编造信息。temperature: 0.1设置让 AI 更严谨，适合数据查询类场景。

4.3 前后端数据流转

前端→中间层：通过 URL 参数传递问题（question）和 JSON 格式的数据（data）；中间层→AI：拼接成自然语言提示词，调用 OpenAI API；AI→前端：中间层将 AI 的文本回答包装成 JSON，前端解析后展示 —— 整个流程是典型的 “请求 - 响应” 模式，只是中间多了 AI 的解读环节。

五、项目扩展方向：从 Demo 到生产级应用

这个 Demo 虽然简单，但可以基于它扩展出更实用的功能，体现全栈开发的灵活性：

  1. 数据层：替换 json-server 为 MySQL/MongoDB，支持更复杂的数据查询；
  2. 前端：用 React/Vue 重构，添加数据分页、筛选功能，优化用户体验；
  3. AI 能力：增加提示词工程，让 AI 支持更复杂的查询（如 “统计每个城市的人数”“按 ID 排序展示用户”）；
  4. 性能优化：添加缓存机制，避免重复调用 AI API，降低成本；
  5. 部署上线：前端部署到 Netlify/Vercel，后端部署到阿里云 / 腾讯云，配置域名和 HTTPS。

六、开发思考：AI 时代的全栈开发新趋势

通过这个项目能发现，AI 正在改变全栈开发的模式：

  • 降低门槛：不用手动写复杂的查询逻辑、业务规则，AI 能直接理解自然语言并处理数据；
  • 聚焦核心：开发者从 “写代码实现功能” 转向 “设计流程、优化提示词、保障数据安全”；
  • 快速迭代：用轻量技术栈快速验证想法，再逐步迭代升级，符合互联网产品的开发逻辑。

对于新手来说，不用一开始就学习所有复杂技术，从这样的小 Demo 入手，理解前后端联动和 AI 集成的核心，再逐步扩展技术栈，是更高效的学习路径。

avatar
文章
阅读
粉丝