HTML怎么做假数据生成_HTML假数据mock在线生成工具【新手必读】-html教程-PHP中文网

mock.js 最省事但不支持现代模块化环境，需用 script 标签引入 v1.1.0 cdn，dom 加载后调用 mock.mock()；faker.js v7+ 不支持 script 引入，python faker 无法在纯 html 运行；动态渲染推荐 createelement + textcontent 防 xss，大数据量用 requestidlecallback 节流。

html怎么做假数据生成_html假数据mock在线生成工具【新手必读】

直接用 Mock.js 最省事，但得注意它不支持现代模块化环境（比如 ES6 import 或 Vite），强行塞进前端工程容易报 Cannot resolve 'fs' 或 require is not defined —— 这不是你代码写错了，是它根本没为浏览器原生模块设计。

Mock.js 在 HTML 中直接 script 引入怎么写

必须用传统 <script src></script> 方式，且顺序不能错：

Mock.js 官方 CDN 地址是 https://cdn.jsdelivr.net/npm/mockjs@1.1.0/dist/mock-min.js（别用新版 2.x，已废弃）
<script></script> 标签必须放在 Mock.js 之后，且不能设 type="module"
所有 Mock.mock() 调用必须在 DOM 加载完成后执行，否则可能取不到容器节点

示例片段：

<script src="https://cdn.jsdelivr.net/npm/mockjs@1.1.0/dist/mock-min.js"></script><script>
  document.addEventListener('DOMContentLoaded', () => {
    const data = Mock.mock({
      'list|5': [{
        'id|+1': 1,
        'name': '@cname',
        'email': '@email',
        'status|1': ['active', 'inactive']
      }]
    })
    console.log(data)
  })
</script>

为什么不用 Faker.js 或 Python Faker 做 HTML 假数据

因为它们压根不是为纯前端 HTML 页面设计的：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

Faker.js（注意不是 Python 的 Faker）虽支持浏览器，但 v7+ 已移除 UMD 构建，<script src></script> 直接引入会失败；v6 是最后可用版本，但 npm 包名已变，CDN 路径难找
Python Faker 必须跑在服务端，HTML 文件双击打开时根本没 Python 环境，fetch('/api/fake') 会跨域或 404
所谓“在线生成工具”，多数只是把 Mock.js 封了个表单外壳，底层还是它，还多一层网络请求和 XSS 风险

想动态渲染表格？别手写 for 循环拼 HTML 字符串

容易漏转义、拼错标签、破坏语义结构。更稳妥的做法是：

用 document.createElement('tr') + appendChild 逐行构建，配合 textContent 写内容（自动防 XSS）
数据量大（>100 条）时加节流：用 requestIdleCallback 分批插入，避免卡死 UI
表格头固定、内容滚动？别用 position: sticky 硬扛，先确认父容器有 overflow-y: auto 且高度明确

关键代码示意：

const tbody = document.querySelector('#data-table tbody')
data.list.forEach(item => {
  const tr = document.createElement('tr')
  Object.values(item).forEach(val => {
    const td = document.createElement('td')
    td.textContent = val // 不要用 innerHTML
    tr.appendChild(td)
  })
  tbody.appendChild(tr)
})

Mock.js 模板语法里最容易翻车的三个点

不是不会写，是写了也不报错但结果不对：

'id|+1': 1 表示自增，但如果外层数组用了 'list|4'，而你又在循环里重复调用 Mock.mock()，自增会重置——每次调用都是新实例
@cname 返回中文姓名，但 @name 返回英文名，混用会导致字段语义混乱（比如用户列表里突然冒出 “John Smith”）
正则生成手机号：/^1[3-9]\d{9}$/ 才覆盖全号段，旧资料里写的 /^1[385][1-9]\d{8}/ 漏了 14、17、19 开头，且少一位

真实项目里，假数据的“像不像”不取决于随机程度，而在于字段间逻辑是否自洽——比如 status: 'inactive' 时，last_login 不该是今天。