在数据驱动的时代，如何将静态的经济数据转化为可交互、可理解、可对话的智能应用，是现代 Web 开发的重要课题。本文将带你完整实现一个 “中国省份 GDP 智能查询系统” ，融合前端展示、后端 API 服务与大语言模型（LLM）能力，打造真正意义上的“数据会说话”。
一、系统架构概览
整个系统由三部分组成：
| 模块 | 技术栈 | 功能 |
|---|---|---|
| 前端界面 | HTML + Bootstrap + JavaScript | 展示 GDP 数据、支持增删改查、提供自然语言提问入口 |
| 后端数据服务 | Node.js + HTTP Server | 提供 RESTful API 管理省份 GDP 数据（模拟数据库） |
| AI 问答引擎 | OpenAI 兼容 API（如 AGICTO） | 接收用户问题，结合 GDP 数据生成自然语言回答 |
💡 关键创新点：将结构化数据注入 LLM 上下文，实现“基于事实”的精准问答。
二、前端：交互式 GDP 管理面板
1. 双栏表格设计
-
使用 Bootstrap 的
col-md-6实现左右分栏 -
自动分割省份列表，提升长列表可读性
-
支持三种视图：
- 原始排名：按行政顺序（ID）
- GDP 排序：从高到低（广东 > 江苏 > 山东...）
- 地区分组：东部/南部/西部/北部，每组内部再排序
js
编辑
// 地区分组映射
const regionMap = {
'东部': ['北京', '上海', '江苏', '浙江', '广东', ...],
'西部': ['四川', '陕西', '重庆', '新疆', ...],
// ...
};
2. CRUD 操作
- 修改 GDP：下拉选择省份 → 输入新值 → PATCH 请求更新
- 新增省份：输入名称与 GDP → POST 创建（后端分配 ID）
- 删除省份：选择后 DELETE，前端同步移除
✅ 所有操作实时刷新表格，无需手动刷新页面。
3. 自然语言问答入口
html
预览
<input type="text" placeholder="例如：哪个省GDP最高？">
<button>提交</button>
用户可输入如：
- “GDP 最高的三个省是？”
- “河南和湖北谁更强？”
- “广东省有哪些强市？”
三、后端：轻量级数据服务（Node.js）
js
编辑
// server.js
http.createServer(async (req, res) => {
const { question, data } = url.parse(req.url, true).query;
const prompt = `
${data}
请根据上面的JSON数据，回答：“${question}”
如果问题涉及省份的其他信息（如城市、人口），可自行补充，但需简洁（50字内）。
`;
const result = await getCompletion(prompt);
res.end(JSON.stringify({ result }));
}).listen(1314);
关键设计：
- CORS 开启：
Access-Control-Allow-Origin: *，允许前端跨域调用 - 动态 Prompt 注入：将前端传来的
data（GDP 数组）直接嵌入提示词 - 安全转义：使用
encodeURIComponent防止特殊字符破坏 JSON 结构
四、AI 引擎：基于 AGICTO 的 LLM 服务
使用兼容 OpenAI API 的国产模型服务（如 AGICTO），降低成本并提升响应速度：
js
编辑
import OpenAI from 'openai';
const client = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
baseURL: 'https://api.agicto.cn/v1' // 替换为国产模型网关
});
const getCompletion = async (prompt) => {
const res = await client.chat.completions.create({
model: 'gpt-3.5-turbo',
messages: [{ role: 'user', content: prompt }],
temperature: 0.1 // 降低随机性，确保数据准确性
});
return res.choices[0].message.content;
};
Prompt 工程技巧：
- 明确指令：“根据上面的 JSON 数据回答”
- 限制长度：“50 字以内”
- 允许扩展：“可自行查询该省强市等信息”，增强实用性
🌰 示例问答：
- 问：GDP 最高的是哪个省？
- 答：广东省，GDP 为 129118.58 亿元。
- 问：浙江省有哪些强市？
- 答：杭州、宁波、温州等，数字经济发达。
五、数据一致性与用户体验
1. 前端状态管理
originalUsers数组缓存全量数据- 每次 CRUD 操作后同步更新本地数据并重渲染
- 下拉菜单动态刷新，避免“已删除省份仍可选”
2. 用户反馈机制
- 成功：✅ 绿色提示
- 失败：❌ 红色提示
- 加载中：按钮置灰防重复提交
3. 响应式布局
- Bootstrap 保证在手机/平板/桌面端均良好显示
- 表单自动换行（
flex-wrap: wrap）
六、部署与扩展建议
本地开发启动流程：
bash
编辑
# 1. 启动数据服务（假设已有 mock API 或 JSON Server）
npx json-server --watch db.json --port 3001
# 2. 启动 AI 服务
node server.js # 监听 1314 端口
# 3. 打开 index.html（通过 Live Server 或直接 file://）
可扩展方向：
- 🔐 添加用户登录与权限控制
- 📊 集成 ECharts 实现 GDP 可视化图表
- 🌐 支持多国 GDP 数据切换
- 🧠 增强 LLM 能力：支持趋势分析（“近五年增长最快的是？”）
七、总结
本项目虽小，却完整体现了现代 Web 应用的典型架构：
前端交互 + 后端服务 + AI 智能 = 下一代数据产品
通过将 结构化数据 与 大语言模型 结合，我们不仅展示了数据，更赋予了数据“对话”的能力。这正是 AIGC 时代开发者的核心竞争力——不是取代人，而是让人与数据的沟通更自然、更高效。
现在，打开你的编辑器，运行代码，向系统提问：“谁是中国经济的领头羊？” —— 让数据亲自告诉你答案。
