实现 假数据生成器 工具

分类：general ｜ 标签：假数据、测试、Mock、生成 批量生成姓名/手机/邮箱/地址等测试数据，导出表格/JSON/CSV

2.1 功能说明

批量生成姓名/手机/邮箱/地址等测试数据，导出表格/JSON/CSV

2.1.1 使用指南

使用指导

批量生成姓名、手机、邮箱、地址等测试数据，用于原型、压测、演示。数据均为随机虚构，请勿用于真实业务。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• rnd()
• ri()
• pad()
• genOne()
• copyOut()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import ToolPageShell from '@/components/ToolPageShell.vue'

const allFields = [
  { key: 'name', name: '姓名' },
  { key: 'phone', name: '手机号' },
  { key: 'email', name: '邮箱' },
  { key: 'idcard', name: '身份证(假)' },
  { key: 'address', name: '地址' },
  { key: 'company', name: '公司' },
  { key: 'username', name: '用户名' },
  { key: 'date', name: '日期' },
  { key: 'color', name: '颜色' },
  { key: 'bool', name: '布尔' },
  { key: 'number', name: '数字' }
]
const fields = ref(['name', 'phone', 'email'])
const count = ref(10)
const format = ref('table')

const surnames = '王李张刘陈杨黄赵周吴徐孙马朱胡郭何高林罗郑梁谢宋唐许韩冯邓曹彭'.split('')
const givens = '伟芳娜秀英敏静丽强磊军洋勇艳杰娟涛明超秀兰霞平刚桂英'.split('')
const cities = ['北京市', '上海市', '广州市', '深圳市', '杭州市', '成都市', '武汉市', '南京市', '西安市', '重庆市']
const roads = ['人民路', '建设路', '中山路', '解放路', '和平街', '文化路', '科技大道', '创业路']
const companies = ['科技有限公司', '网络科技', '信息技术', '智能科技', '数据服务', '电子商务']
const rnd = (a) => a[Math.floor(Math.random() * a.length)]
const ri = (n) => Math.floor(Math.random() * n)
const pad = (n, l) => String(n).padStart(l, '0')

function genOne() {
  const name = rnd(surnames) + rnd(givens)
  return {
    name,
    phone: '1' + (ri(7) + 3) + Array.from({ length: 9 }, () => ri(10)).join(''),
    email: name + ri(9999) + '@example.com',
    idcard: pad(ri(9000) + 1000, 4) + pad(ri(13) + 1, 2) + pad(ri(28) + 1, 2) + pad(ri(99), 2) + pad(ri(999), 3) + (ri(2) ? 'X' : String(ri(10))),
    address: rnd(cities) + rnd(roads) + (ri(999) + 1) + '号',
    company: rnd(cities) + rnd(companies),
    username: 'user_' + ri(100000),
    date: '2026-' + pad(ri(12) + 1, 2) + '-' + pad(ri(28) + 1, 2),
    color: '#' + Array.from({ length: 6 }, () => '0123456789ABCDEF'[ri(16)]).join(''),
    bool: Math.random() > 0.5 ? 'true' : 'false',
    number: ri(100000)
  }
}

const rows = computed(() => {
  const out = []
  for (let i = 0; i < count.value; i++) out.push(genOne())
  return out
})
const selFields = computed(() => allFields.filter((f) => fields.value.includes(f.key)))

const outText = computed(() => {
  const list = rows.value
  if (format.value === 'json') return JSON.stringify(list, null, 2)
  // csv
  const header = selFields.value.map((f) => f.name).join(',')
  const body = list.map((r) => selFields.value.map((f) => '"' + String(r[f.key]).replace(/"/g, '""') + '"').join(',')).join('\n')
  return header + '\n' + body
})

function copyOut() {
  navigator.clipboard?.writeText(outText.value || JSON.stringify(rows.value, null, 2)).then(() => ElMessage.success('已复制'))
}

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/fake-data