AI 全栈应用开发：从数据服务到智能对话的完整实践

进击的野人
35 阅读6分钟

AI 全栈应用开发：从数据服务到智能对话的完整实践

在当今快速发展的技术领域，全栈开发工程师的角色正在经历重大变革。随着人工智能技术的普及，传统的"全干工程师"正在向"AI应用开发工程师"转型。本文将详细介绍一个完整的AI全栈应用开发项目，从前端界面到后端API，再到AI大语言模型集成，展示如何构建一个智能的用户数据查询系统。

项目概述与技术栈

这个项目是一个集成了大语言模型能力的全栈Web应用，主要功能包括：

  • 展示用户数据表格
  • 通过自然语言查询用户信息
  • 基于用户数据提供智能问答服务

技术栈组成：

  • 前端：HTML5 + Bootstrap CSS + 原生JavaScript
  • 后端：Node.js + JSON Server + 自定义HTTP服务器
  • AI服务：OpenAI GPT-3.5-turbo模型
  • 包管理：pnpm
  • 数据格式：JSON

项目架构与目录结构

现代全栈应用的目录结构体现了关注点分离的原则：

text

复制下载

项目根目录/
├── package.json          # 项目配置和依赖
├── pnpm-lock.yaml        # 依赖锁文件
├── users.json            # 数据文件
├── index.html            # 前端页面
├── readme.md             # 项目说明
└── server.js             # 自定义后端服务

这种结构清晰地划分了前后端职责，便于团队协作和代码维护。

后端服务架构

JSON Server：轻量级REST API解决方案

项目中使用了JSON Server这一轻量级工具，它能够在几分钟内搭建一个完整的REST API，而无需编写任何后端代码。配置极为简单：

json

复制下载

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

JSON Server基于@tinyhttp框架构建，提供了完整的HTTP服务器功能，包括路由、中间件、CORS支持等。当执行npm run dev时，JSON Server会启动并在3001端口监听，自动为users.json文件中的数据结构生成对应的RESTful端点。

数据模型设计

users.json文件定义了应用的核心数据模型：

json

复制下载

{
  "users": [
    {
      "id": 1,
      "username": "张三",
      "hometown": "九江"
    },
    {
      "id": 2,
      "username": "李四", 
      "hometown": "吉安"
    }
  ]
}

这种简单的键值对结构充分体现了JSON格式的灵活性和易用性。每个用户对象包含ID、用户名和家乡三个字段，结构清晰且易于扩展。

自定义AI服务集成

项目中创建了一个自定义的HTTP服务器（监听1314端口），专门处理AI相关的请求：

javascript

复制下载

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);
  let info = { result };
  
  res.status = 200;
  res.setHeader('Content-Type', 'application/json');
  res.end(JSON.stringify(info));
}).listen(1314)

这个服务充当了前端和OpenAI API之间的桥梁，接收包含用户数据和问题的请求，构造合适的提示词，调用AI模型，并将结果返回给前端。

前端设计与实现

响应式布局

前端页面采用Bootstrap框架实现响应式设计：

html

复制下载运行

<div class="container">
  <div class="row col-md-6 col-md-offset-3">
    <table class="table table-striped" id="user_table">
      <!-- 表格内容 -->
    </table>
  </div>
</div>

Bootstrap的栅格系统（col-md-6 col-md-offset-3）确保表格在中等及以上屏幕尺寸的设备上居中显示，并占据50%的宽度，在小屏幕设备上自动调整为全宽，提供良好的移动端体验。

动态数据渲染

前端JavaScript使用Fetch API从JSON Server获取数据并动态渲染表格：

javascript

复制下载

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提供。

智能问答功能

用户可以通过自然语言提问，系统会将问题连同用户数据一起发送到AI服务：

javascript

复制下载

oForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const question = oForm["question"].value;
  
  fetch(`http://localhost:1314/?question=${question}&data=${JSON.stringify(users)}`)
    .then(res => res.json())
    .then(data => {
      document.getElementById('message').innerHTML = data.result;
    })
})

这种设计使得用户可以用自然语言查询如"有哪些用户的家乡是南昌？"或"列出所有用户的姓名"等问题，系统会理解问题意图并从数据中提取相关信息。

AI集成与提示工程

OpenAI API集成

项目通过OpenAI官方JavaScript库集成GPT-3.5-turbo模型：

javascript

复制下载

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  baseURL: 'https://api.agicto.cn/v1'
})

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;
}

这里使用了较低的温度值（temperature: 0.1），确保模型输出更加确定和一致，适合处理结构化数据查询任务。

提示词设计

有效的提示词设计是AI应用成功的关键：

javascript

复制下载

const prompt = `
${parsedUrl.query.data}
请根据上面的JSON数据，回答${parsedUrl.query.question}这个问题。
`

这个简洁的提示词明确指示模型基于提供的JSON数据回答问题，避免了模型依赖训练数据中的信息，确保回答的准确性和针对性。

依赖管理与工程化

pnpm包管理

项目使用pnpm作为包管理器，pnpm-lock.yaml文件确保了依赖的一致性安装。与npm和yarn相比，pnpm采用内容可寻址存储，显著减少了磁盘空间占用，提高了安装速度。

环境变量管理

敏感信息如API密钥通过环境变量管理：

javascript

复制下载

config({ path: '.env' })
console.log(process.env.OPENAI_API_KEY, '////');

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  // ...
})

这种方法避免了将敏感信息硬编码在源代码中，提高了安全性，便于在不同环境（开发、测试、生产）间切换配置。

开发工作流程

启动流程

  1. 启动JSON Server数据服务：npm run dev（端口3001）
  2. 启动自定义AI服务：node server.js（端口1314）
  3. 通过浏览器访问index.html文件

数据流

  1. 前端加载时从JSON Server获取用户数据并渲染表格
  2. 用户输入问题并提交
  3. 前端将问题和使用者数据发送到AI服务
  4. AI服务构造提示词，调用OpenAI API
  5. AI服务将结果返回前端显示

技术亮点与最佳实践

前后端分离架构

项目采用彻底的前后端分离架构：

  • 前端：纯静态HTML/CSS/JavaScript，可通过任何Web服务器部署
  • 后端：两个独立的服务分别处理数据API和AI功能
  • 通过CORS（跨域资源共享）实现前后端通信

模块化设计

  • 数据服务（JSON Server）独立于业务逻辑
  • AI服务专注于处理自然语言查询
  • 前端专注于用户界面和交互

错误处理与用户体验

javascript

复制下载

if(!question) {
  alert("请输入问题")
  return;
}
oBtn.disabled = true;
// ... 请求处理
oBtn.disabled = false;

通过按钮状态管理和用户输入验证，提供了良好的用户体验，防止重复提交和无效请求。

总结

这个AI全栈应用开发项目展示了现代Web开发的多个重要趋势：

  1. 前后端分离：通过REST API实现前后端解耦，提高开发效率和系统可维护性
  2. AI集成：将大语言模型能力无缝集成到传统Web应用中，显著增强应用智能
  3. 开发体验：使用JSON Server等工具快速原型开发，加速产品迭代
  4. 组件化思维：将系统拆分为独立且专注的模块，每部分各司其职

通过这个相对简单但完整的项目，开发者可以掌握全栈开发的核心技能，了解如何将传统Web开发与最新AI技术结合，为用户创造更智能、更自然的使用体验。随着AI技术的不断发展，这种"传统开发+AI能力"的模式将成为全栈开发的新标准，为开发者开辟更广阔的职业发展空间。

avatar
文章
阅读
粉丝