DeepSeek编程实战：3D库存可视化系统之线上数据对接

推荐语

深入探索DeepSeek在3D库存可视化系统中的线上数据对接实战技巧。

核心内容：
1. 实现DeepSeek与服务端接口对接的步骤
2. 使用Nuxt3和TypeScript优化3D可视化项目
3. 客户端调用API及处理加载状态和数据更新的方法

杨芳贤

53A创始人/腾讯云(TVP)最具价值专家

书接上文，使用 DeepSeek 优化一下我们上篇文章的例子，让这个 3D 可视化的项目变得不那么玩具。 第一个也是大家比较关心的问题，就是生产环境必要的一点：调用服务端获取数据：

直接告诉 DeepSeek 我们的需求。

这里让 DeepSeek 修改我之前的 Mock 数据，看看 DeepSeek 怎么做的吧：

首先让我创建 API 文件 server/api/warehouse.ts，并给出了代码:

由于我新起了一个对话，DeepSeek 并不知道我之前的代码是什么样，所以我需要告诉 DeepSeek 一下，让 DeepSeek 进行修改。

这次 DeepSeek 给出了基于我代码的修改：

同时也给出了解释，以及如何处理加载状态和数据更新。

替换完代码之后，界面正常说明没啥问题：

由于现在是一次返回了所有数据，这个在生产中肯定是不行的，如果仓库过多，这个数据量会非常大， 所以还需要优化的地方是把接口分成两个：

DeepSeek 给出了两个接口文件，一个是 server/api/warehouses.ts 获取仓库列表：

一个是 server/api/warehouse/[id].ts：获取具体仓库数据：

以及前端怎么调用：

同样的问题，由于没有上下文，它给出的客户端代码和我们之前的不一样，增加上下文进行提示；

换上 DeepSeek 新给出的代码：

刷新浏览器，仓库切换正常：

虽然功能正常，但是编辑器里面可以看到，由于服务端数据请求没有类型，代码很多地方都给我们标红了：

下面让 DeepSeek 对两个API 增加类型支持：

AI 同样给出了类型定义以及客户端和服务端的代码修改方案。

图表面板联动

上期还遗留一个问题就是面板数据是固定的，没有和仓库数据联动， 这次我们也修改一下，让它使用服务端的数据。

我们把之前的左侧面板数据都告诉AI，让它修改一下：

AI 很聪明，知道在什么地方修改代码：

修改完数据生成和调用，看下效果，切换仓库的时候数据跟着一起动了。

接着修改右边的面板，我们发现之前生成的 Icon 图标没显示， 安装一下 icon 库，调整一下样式：

pnpm i primeicons

把右边面板的数据改成用服务端数据，我就不演示过程了。

对接生产系统数据

我们打开浏览器控制台可以看到，界面打开和切换仓库的时候，都会发送请求数据。

然而这个数据仍然不是生产数据，只是我们把数据模拟从客户端放到了服务端。 真正对接生产数据，还需要如下步骤：

• • 和 WMS、ERP 等库存系统协商数据结构
• • 接口鉴权
• • 生产环境的部署和接口转发（推荐使用 Nginx 直接配置转发规则）

由于上面这些步骤没有标准，每家系统都不一样，和对方技术人员协商就行了。

AI 能完全替代程序员么？

这个问题我还专门问了一些人，大家的答案基本一致： 目前AI能改程序开发提效，但是不能完全替代人。

但是提效多少，答案并不一致。

一些大厂，比如腾讯、阿里，10% - 20% 是他们比较认可的一个数字，也就是 大约 8 个人能干之前之前 9 个或者 10 个人的活。

对于一小小公司或者个人开发者这个数据方差就比较大，有的觉得没啥差别， 有的人觉得提效了 100% 甚至 300%。

造成这个的原因我也大致分析了下，大厂的开发团队， 流程比较明确，需求、产品、设计、开发、测试、发布。 实际编码的占比不会太高，可能还不到整个开发成本的50%。

而对于个人或者小团队来说，拍脑袋定的设计，大部分时间都花在开发上， 加之开发框架、开发技能、流水线等基础设施上也没有大公司那么完善，AI 的帮助 从感官上要比实际更大。

最后

DeepSeek 或者其他的的大模型对于当前我们所展示这类问题来说基本能完全应对， 基本一次或者两次提示就能拿到正确答案。所以大家能用的赶紧用，早用早下班。

当然，如果程序在复杂一点，可能就不会那么顺利了，下期跟大家展示下什么叫用AI不如不用的场景。

--- END ---