全栈开发实战：构建基于OpenAI的智能数据查询系统

不会js
63 阅读3分钟

全栈开发实战：构建基于OpenAI的智能数据查询系统

在当今AI技术飞速发展的时代，全栈开发者面临着新的机遇与挑战。本文将详细介绍如何构建一个完整的AI全栈应用——智能用户数据查询系统，该系统能够理解自然语言问题并基于JSON数据返回智能答案。

项目概述

本项目是一个融合前端界面、后端API和大型语言模型(LLM)的全栈应用。前端使用Bootstrap构建响应式界面，展示用户数据并提供问题输入接口；后端使用Node.js搭建服务器，连接OpenAI API实现智能问答功能。

技术栈架构

前端技术栈

  • •HTML5 + CSS3：页面结构搭建
  • •Bootstrap 3.0.3：响应式布局和UI组件
  • •原生JavaScript：DOM操作和异步请求处理

后端技术栈

  • •Node.js：服务器运行环境
  • •OpenAI官方SDK：AI能力集成
  • •原生HTTP模块：Web服务器创建
  • •JSON-server：模拟RESTful API数据接口

前端实现详解

响应式布局设计

前端界面采用Bootstrap的栅格系统实现响应式布局。主要分为三个部分：

<div class="container">
  <!-- 用户数据表格区域 -->
  <div class="row col-md-6 col-md-offset-3">
    <table class="table table-striped" id="user_table">
      <!-- 表格内容 -->
    </table>
  </div>
  
  <!-- 问题输入表单 -->
  <div class="row">
    <form name="aiForm">
      <!-- 表单控件 -->
    </form>
  </div>
  
  <!-- AI回答展示区域 -->
  <div class="row" id="message"></div>
</div>

这种布局确保了在PC端和移动端都能良好展示，其中col-md-6 col-md-offset-3使表格在中等屏幕设备上居中显示，宽度为容器的一半。

动态数据渲染

前端通过Fetch API从本地3001端口获取用户数据，并动态渲染到表格中：

fetch('http://localhost:3001/users')
  .then(res => res.json())
  .then(data => {
    users = data;
    oBody.innerHTML = data.map(user => `
      <tr>
        <td>${user.id}</td>
        <td>${user.username}</td>
        <td>${user.hometown}</td>
      </tr>
    `).join("")
  })

这种方法实现了前后端分离，前端专注于数据展示和用户交互，后端负责数据处理和API提供。

智能问答交互

用户提交问题后，前端将问题内容和用户数据一起发送到LLM服务端：

oForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const question = oForm["question"].value;
  
  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 = data.result;
    })
})

这里使用了防重复提交机制，避免用户频繁点击造成资源浪费。

后端服务实现

数据模拟服务

使用json-server快速创建RESTful API：

pnpm i json-server

在package.json中添加启动脚本：

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

这样就能通过http://localhost:3001/users访问模拟的用户数据接口。

LLM服务集成

核心服务使用Node.js原生HTTP模块创建服务器，集成OpenAI API：

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: 'AGICTO' // 替换为实际API端点
});

const getCompletion = async (prompt, model='gpt-3.5-turbo') => {
  const messages = [{ role: 'user', content: prompt }];
  
  const result = await client.chat.completions.create({
    model,
    messages,
    temperature: 0.1
  });
  
  return result.choices[0].message.content;
};

智能问答处理

服务器接收到前端请求后，构造合适的提示词发送给OpenAI：

http.createServer(async (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  
  const parsedUrl = url.parse(req.url, true);
  const prompt = `
  ${parsedUrl.query.data}
  请根据上面的JSON数据，回答${parsedUrl.query.question}这个问题。
  `;
  
  const result = await getCompletion(prompt);
  
  res.statusCode = 200;
  res.setHeader('Content-Type', 'application/json');
  res.end(JSON.stringify({ result }));
}).listen(1314);

这里设置了CORS头部，允许跨域请求，便于前端开发调试。

环境配置与安全性

项目使用dotenv管理敏感信息，避免将API密钥硬编码在代码中：

import { config } from 'dotenv';
config({ path: '.env' });

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  // 其他配置...
});

需要在项目根目录创建.env文件存储密钥：

OPENAI_API_KEY=your_openai_api_key_here

开发注意事项

  1. 1.错误处理：当前代码缺乏完善的错误处理机制，生产环境需要添加try-catch块捕获异常。
  2. 2.输入验证：应对用户输入进行验证和清理，防止注入攻击。
  3. 3.性能优化：可以考虑添加缓存机制，对相同问题缓存答案，减少API调用。
  4. 4.速率限制：实现API调用速率限制，避免超过OpenAI的服务限制。
  5. 5.用户体验：添加加载状态指示器，改善用户等待体验。

项目启动流程

  1. 1.启动数据服务：npm run dev（端口3001）
  2. 2.启动LLM服务：node server.js（端口1314）
  3. 3.打开前端页面：直接打开index.html或使用本地服务器

总结与扩展

本项目展示了全栈开发与AI技术结合的完整流程。通过这个案例，我们可以学习到：

  • •前后端分离架构的设计与实现
  • •RESTful API的创建与消费
  • •OpenAI API的集成与使用
  • •跨域请求的处理方法
  • •环境变量的安全管理

未来可以扩展的方向包括：用户身份验证、对话历史记录、多数据源支持、更复杂的自然语言查询等。 这个项目不仅是一个技术Demo，更是现代全栈开发者技能树的缩影。随着AI技术的普及，全栈开发者需要不断学习新技术，将传统开发技能与AI能力相结合，创造出更智能、更有价值的产品。

avatar
文章
阅读
粉丝