当前位置：首页 > news >正文

FauxGen：一款由 CodeBuddy 主动构建的假数据生成器

news 来源：原创 2025/6/10 10:45:49

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

在前端开发中，经常需要一些「假数据」来模拟真实接口，便于开发阶段的界面构建和功能测试。与其每次手写几组 mock 数据，不如直接构建一个灵活好用的假数据生成工具，于是我便想到了这样一个项目构想：

使用 Vue3 和 faker.js 构建一个名为「FauxGen 📦🪄」的假数据生成器，具备字段定制、格式切换、纸卡风格界面与导出复制功能，是一款专为前端测试打造的小工具。

这一次，我没有手动编码，而是全程交由 CodeBuddy 主动推动、实现。下面我就以第一人称讲述这款工具的开发过程，记录下每一个细节与转折。

项目设想：从一个 Prompt 开始

一开始，我向 CodeBuddy 提出了如下请求：

我要用 Vue3 + faker.js 构建一个假数据生成工具 FauxGen，支持自定义字段类型、设置生成条数与格式（JSON、CSV、表格）、导出与复制、自动刷新数据与保存模板，界面采用纸卡堆叠风格和数据网格动效。

这个 Prompt 很明确，描述了完整的功能需求和视觉风格。CodeBuddy 没有让我去做需求分析、拆解任务，它直接读取了目录结构，发现项目为空，便开始主动构建。

Vue3 脚手架初始化

项目的第一步是用 Vue 官方 CLI 创建 Vue3 项目。在交互式终端中，CodeBuddy 全自动完成了命令填写、命名为 fauxgen、取消多余插件（比如 ESLint 和 Prettier），最终快速拉起了一个干净清爽的 Vue3 空壳项目。

随后，它使用 npm install 安装了四个关键依赖：

@faker-js/faker：生成各种假数据（姓名、地址、图片等）
@vueuse/core：增强 Vue3 组合式 API 使用体验
file-saver：用于数据导出功能
papaparse：将 JSON 转换为 CSV 格式

这一步 CodeBuddy 没有丝毫停顿，直接一次性把项目运行所需的技术基石全部装好。

项目结构与组件划分

在读取完 Vue 项目的初始结构后，CodeBuddy 主动决定重写 App.vue，并将主功能拆分为两个独立组件：

FauxGenPanel.vue：负责字段设置、条数选择、格式选择、按钮操作等控制逻辑；
FauxGenOutput.vue：负责数据显示、复制导出、表格视图和卡片堆叠动画。

这种拆分非常合理，既符合组件化思想，又便于后期维护。值得一提的是，这完全是 CodeBuddy 自己决定的划分方式。

在这里插入图片描述

控制面板的实现细节

在 FauxGenPanel.vue 中，CodeBuddy 使用组合式 API 设计了字段数组，每个字段可以设置名称、类型（支持文本、图片、日期、邮箱、电话等），并支持添加和删除。它还提供了如下交互设置：

生成条数（最大支持 1000）
输出格式选择（JSON、CSV、表格）
是否启用自动刷新
是否保存模板配置

代码中使用了响应式 ref 和 computed 结构清晰，逻辑完整。我几乎不用补充说明任何内容，它就能准确理解我的需求。

在这里插入图片描述

数据显示与导出功能

输出部分则集中在 FauxGenOutput.vue 中。CodeBuddy 实现了三种输出格式：

JSON 格式：自动美化排版
CSV 格式：借助 PapaParse 转换并展示预览
表格视图：使用纸卡样式呈现每条记录，带有淡入动效与间隔阴影

此外，还有两个亮点功能：

复制功能：一键将 JSON 或 CSV 复制到剪贴板；
导出功能：使用 file-saver 下载生成的 .json 或 .csv 文件，文件名自动命名为 FauxGen_日期。

样式与动效：纸卡堆叠与数据网格

我最初提到希望界面风格偏纸卡堆叠，CodeBuddy 在 main.css 中手动编写了大量样式，从边距到阴影、从卡片旋转到 hover 缓动，效果惊艳。

每张卡片呈现略微倾斜、错位的层叠感，加上 Vue 的 transition-group 让表格数据在出现与切换时更具生命力。这不是普通的静态页面，而是一种轻量级、可视化的动效体验。

在这里插入图片描述

总结：一个完全由 AI 主导构建的项目

我并没有亲手写一行代码，而是以「使用者」的身份与 CodeBuddy 进行交互，它则作为「执行者」主动思考、主动实现。它不是我建议它怎么做，而是它在我提供目标后，自己规划、判断、分解，并高效完成整个项目构建。

CodeBuddy 的几大亮点在这次项目中体现得淋漓尽致：

结构划分合理：组件组织清晰，逻辑职责明确；
细节把控到位：比如生成字段默认值、数据导出命名格式；
样式设计灵活：UI 既轻盈美观，又具有技术感；
代码质量高：语义化强、易读性好，没有任何多余的冗余代码。

这次的 FauxGen 项目，不只是一个假数据生成器，更像是我与 CodeBuddy 一起完成的开发合作体验。它替我思考、动手、优化细节，让我真正体会到「让 AI 帮你写前端」的愉快感受。

在这里插入图片描述

如果你也厌倦了一次次造轮子，那么下次不妨和 CodeBuddy 说一句：

“我要做一个 XX 工具，帮我构建一下。”

然后静静等待，它会用实际行动，交出让你满意的答卷。

在这里插入图片描述

项目设想：从一个 Prompt 开始

Vue3 脚手架初始化

项目结构与组件划分

控制面板的实现细节

数据显示与导出功能

样式与动效：纸卡堆叠与数据网格

总结：一个完全由 AI 主导构建的项目

相关文章：