三行代码让LLM秒变数据分析师？程序员私藏的「对话式数据洞察」架构大公开！

Lingxing
138 阅读4分钟

📢 三步打造零基础AI数据问答系统：前端+后端+LLM全栈实战 ——手把手教你用1小时实现“用户数据智能分析机器人”！

🚀 从0到1：用LLM+前后端实现「人话查数据」的神操作

你是否遇到过这样的场景？用户对着表格数据问“有多少人”“哪里人最多”，而你只能手动写SQL或过滤代码？
今天我开源一套私藏方案：无需复杂开发，用LLM+基础前后端代码，让用户“说人话”就能实时查数据！部分代码可直接复制，文末附GitHub仓库！

image.png

🌟 三步架构：让数据自己“说话”

1️⃣ 极简前端：#### 动态渲染表格+“人话提问”框（代码优化版）

初始化步骤：

  • 创建 frontend 文件夹，编写 index.html。
  • 引入 Bootstrap 快速美化界面。
  • 使用 fetch 动态加载后端数据，表格渲染优化技巧：

image.png

<!-- 关键代码：动态渲染表格+智能提问框 -->
<script>
// 优化技巧：用for-in遍历JSON，自动填充表头和数据，新增字段无需改代码！
fetch('http://localhost:3000/users')
  .then(res => res.json())
  .then(users => {
    usersData = users;
    users.forEach(user => {
      const tr = document.createElement('tr');
      for(let key in user) { // 🔥 动态适配字段变化！
        const td = document.createElement('td');
        td.innerText = user[key];
        tr.appendChild(td);
      }
      tableBody.appendChild(tr);
    });
  });
</script>

黑科技亮点：

  • 抛弃手动写<td>，用for-in实现字段自适应，新增“年龄”“性别”字段也无需改前端！
  • 提问框暗藏玄机：问题+数据拼接成Prompt，直通LLM大脑！

核心功能：

  • 用户输入问题后，将数据+问题打包发送至AI服务器。

  • 关键代码注释：

    // 发送问题时，将用户数据 JSON.stringify 序列化传递
fetch(`http://localhost:1314/api?question=${question}&data=${JSON.stringify(usersData)}`)
  .then(data => data.json())
  .then(data => {
    document.getElementById('message').innerText = data.result; // 显示AI回答
  })
2️⃣ Mock后端：5分钟极速搭建（json-server真香警告）

初始化步骤：

  • 创建 backend 文件夹，运行 npm init -y 初始化。
  • 安装 json-server，修改 package.json 脚本：
"scripts": {
"dev": "json-server --port 3001 --watch user.json" // 监控数据文件变化
}

数据文件 user.json 结构清晰，支持CRUD扩展：

{
  "users": [
    {"id":1, "name":"裴游盛", "hometown":"China"},
    {"id":2, "name":"王志岩", "hometown":"China"},
    {"id":3, "name":"张宇", "hometown":"China"}
  ]
}

image.png

为什么爽到哭：

  • 零代码实现RESTful API，GET/POST/PUT/DELETE全支持
  • 改JSON文件即改数据库，开发效率提升10倍！
  • 支持跨域请求（前端默认允许访问）。
3️⃣ LLM服务器：让ChatGPT当你的SQL翻译官（Node.js魔改版）

初始化步骤：

  • 创建 llm-server 文件夹，运行 npm init -y。

  • 安装 openai 库，配置环境变量（.env文件）：

    OPENAI_API_KEY=你的API密钥
OPENAI_API_BASE_URL=代理地址（可选）

image.png

  • 核心代码逻辑：动态拼接问题+数据，调用AI模型：
// 核心代码：把用户问题变成LLM能懂的Prompt
// node 内置的http模块
// 提供了http服务器和客户端功能
// import OpenAI from "openai";
const http = require('http');
const OpenAi = require('openai');
const url = require('url');// node 内置

require('dotenv').config();

const openai_api_key = process.env.OPENAI_API_KEY;
const openai_api_base_url = process.env.OPENAI_API_BASE_URL;

const client = new OpenAi({
    apiKey:openai_api_key,
    baseURL: openai_api_base_url //转发
})

//通用LLM 聊天完成接口函数 复用
const getCompletion = async (prompt, model = "deepseek-chat") => {
    const messages = [{ role: "user", content: prompt }];
    // AIGC chat 接口
    const response = await client.chat.completions.create({
      model: model,
      messages: messages,
      temperature: 0.1, // 模型输出的随机性
    });
    return response.choices[0].message.content;
  }

const server = http.createServer(async (req, res)=>{
    res.setHeader('Access-Control-Allow-Origin', '*'); // 允许所有来源访问，也可以指定具体的域名，如'http://example.com'
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // 允许的请求方法
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); // 允许的请求头
    

    const parsedUrl = url.parse(req.url, true);
    const queryObj = parsedUrl.query;
    console.log(parsedUrl.query);
    const prompt = `
    ${queryObj.data}
    请根据上面的JSON数据,回答${queryObj.question} 这个问题
    `
    const result = await getCompletion(prompt);
    let info ={
      result
    }
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/json');
    res.end(JSON.stringify(info));
})
  

server.listen(1314);

Prompt工程秘籍：

  • 强制结构化输入：数据+问题组合喂给模型，拒绝“幻觉”
  • 温度值设为0.1，确保回答稳定如SQL
  • 支持多语言提问：“How many people?”“共有几人”都能识别！

💡 效果实测：让产品经理跪下喊爸爸

  • 用户问“有多少人啊” → 自动返回“3人”
  • 问“谁的ID最大” →  “张宇（ID:3）”
  • 问“都是中国人吗” →  “全部来自China”

屏幕截图 2025-03-13 153731.png

💡 避坑指南

  1. 端口冲突：前端（3000）、后端（3001）、AI服务器（1314）需保持一致。
  2. 环境变量：务必配置 .env 文件存放API密钥。
  3. 数据安全：生产环境需添加鉴权逻辑（本文为demo简化处理）

🌈 说在最后

这套方案已在GitHub开源需要评论区回复，30秒快速部署即可让现有系统拥有“人话查数”能力。

思考题：如果用户问“请生成一个上海用户并插入数据库”，代码该如何改造？

avatar
文章
阅读
粉丝