“AI查用户”也能这么简单？手把手带你用Node.js+前端玩转DeepSeek！

"你以为AI很遥远？其实只要几行代码，AI就能帮你查用户！"

一、前言：为什么要做这个项目？

只要用Node.js和OpenAI的API，配合一点点原生JS，就能做出一个"智能用户查询系统"！

本项目就是我学习全栈开发和AI接口的第一个实战项目，适合所有想要入门AI+全栈的同学。

二、项目结构一览

项目分为前端（client）和后端（server）两部分：

bash 复制代码

deepseek-user/
├── client/   # 前端页面
│   └── index.js
├── server/   # 后端服务
│   ├── server.js
│   └── db.json

前端：负责页面展示和用户交互
后端：负责数据存储、AI接口调用和API响应

三、后端：Node.js+OpenAI打造智能API

1. 基础服务搭建

后端用Node.js自带的http模块搭建，监听3000端口，支持跨域请求，方便前端本地开发。

js 复制代码

const http = require('http');
const server = http.createServer(async (req, res) => {
    // 处理跨域
    res.setHeader('Access-Control-Allow-Origin', '*');
    // ... 其他代码
});
server.listen(3000, () => {
    console.log('服务启动成功');
});

2. 数据存储

用户数据存储在db.json文件中，结构如下：

json 复制代码

{
  "users": [
    { "id": 1, "name": "张三", "age": 25, "address": "北京" },
    { "id": 2, "name": "李四", "age": 30, "address": "上海" }
  ]
}

3. API接口设计

/api/users?name=xxx：查询指定姓名的用户
/api/users?name=all 或无参数：返回所有用户

4. AI智能查询

如果传递了name参数，后端会调用DeepSeek（OpenAI兼容API），让AI帮你"读懂"db.json文件，返回指定用户的数据。

js 复制代码

const users = await openai.chat.completions.create({
    messages: [
        { role: "system", content: "你是一个编程高手" },
        { role: "user", content: `请从db.json中查找name等于${query}的数据，返回JSON数组。` }
    ],
    model: "deepseek-chat",
});

技术亮点：

利用AI理解自然语言指令，自动查找并返回结构化数据
结合本地JSON文件和AI接口，体验"人机协作"开发

5. 数据清洗与返回

AI返回的数据有时会带有Markdown代码块，需要用正则清洗：

js 复制代码

let cleanedResponse = responseText.replace(/```json\n|\n```|```/g, '');
const userData = JSON.parse(cleanedResponse);
res.end(JSON.stringify({ success: true, data: userData }));

四、前端：原生JS实现智能查询与渲染

1. 页面加载自动获取用户信息

js 复制代码

window.onload = async function() {
    const users = await fetchUsers('all');
    renderUsers(users);
}

2. fetchUsers：与后端API对接

js 复制代码

async function fetchUsers(name) {
    const res = await fetch(`http://localhost:3000/api/users?name=${name}`);
    const users = await res.json();
    return users.data;
}

3. renderUsers：动态渲染表格

js 复制代码

function renderUsers(users) {
    const tbody = document.querySelector('tbody');
    tbody.innerHTML = '';
    for (let i = 0; i < users.length; i++) {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${users[i].id}</td>
            <td>${users[i].name}</td>
            <td>${users[i].age}</td>
            <td>${users[i].address}</td>
        `;
        tbody.appendChild(tr);
    }
}

4. 支持按姓名查询

js 复制代码

const btn = document.querySelector('.search-container button');
const input = document.querySelector('#nameSearch');
btn.addEventListener('click', async () => {
    const users = await fetchUsers(input.value);
    renderUsers(users);
});

技术亮点：

原生JS实现异步请求与DOM渲染
支持全量和按姓名精准查询
代码简洁，易于理解和扩展

五、技术细节与踩坑总结

1. 跨域处理

后端设置了Access-Control-Allow-Origin: *，保证前端本地开发时不会遇到CORS问题。

2. AI返回数据格式不稳定

AI有时会返回带有Markdown代码块的JSON，需要用正则清洗，保证前端能正常解析。

3. 环境变量保护

API密钥存放在.env文件中，并通过.gitignore忽略，保证安全性。

4. 错误处理

前后端都加了try/catch，保证即使AI接口或文件读取出错，也能优雅返回错误信息。

六、项目扩展建议

支持用户的增删改查（CRUD）
前端用React/Vue重构，体验现代前端框架
后端用Express/Koa重构，支持更多API
AI提示词优化，让AI返回更精准的数据
部署上线，体验真实生产环境

七、总结

通过这个项目，我深刻体会到AI+全栈开发的魅力。只要敢动手，AI接口和全栈开发其实并不难。希望这篇文章能帮你迈出AI开发的第一步，未来你也能用AI和代码改变世界！

"AI不是未来，是现在；全栈不是高不可攀，是你我都能掌握的技能！"

如需完整代码和演示效果，欢迎留言交流或访问我的GitHub仓库！