Logo

菜单

发布于 2026-01-06 6 阅读
0

使用 JavaScript 轻松创建虚假数据：什么是 Faker.js？如何使用种子生成用户数据？概要

使用 JavaScript 轻松创建虚假数据

什么是 Faker.js

生成用户数据

使用种子

概括

你是否曾经需要填充表格或生成一些数据来查看你的图形用户界面 (GUI) 在使用时的效果？需要测试应用程序在高负载下的性能？需要做一个演示，但由于是预发布版本，你没有任何有效数据来进行演示？

在这种情况下，程序员通常有两种选择：

  1. 手动输入数据
  2. 编写你自己的种子应用程序，让它为你完成所有操作。

这两种方案都不理想。手动输入数据非常耗时。编写自己的种子数据应用程序也并非易事，你需要了解生成随机文本、虚拟图像、随机日期、姓名、电子邮件等的过程。

什么是 Faker.js

隆重推出Faker.js，一个帮助您生成数据并初始化应用程序的出色解决方案。Faker.js 既可在浏览器中使用，也可在 Node.js 环境中使用。Faker 已经考虑到并解决了生成随机数据时遇到的所有问题和难题（部分问题已在上文列出），因此我们无需再浪费时间重复造轮子。

生成用户数据

我能想到的最常见的场景——也是几周前工作中遇到的情况——是生成用户数据。我们来创建一个简单的 Node 应用，它会发出一个GET/ users请求，返回一个生成的用户列表。为了简化本文，我将忽略分页的复杂性，只返回一个包含 100 个用户的数组。

const express = require("express");
const app = express();
app.listen(3000, () => {
 console.log("Server running on port 3000");
});

app.get("/users", (req, res, next) => {
    res.json([
        {
            "name": "Douglas Adams",
            "email": "douglas@gmail.com",
            "postcode": "pe22 22a",
            "phoneNumber": "07428233312",
            "city": "London",
            "country": "England",
            "favouriteQuote": "The answer is 42"
        }
    ]);
});
Enter fullscreen mode Exit fullscreen mode

所以如果我们调用端点GET http://localhost:3000/users：

回复：

[
    {
        "name": "Douglas Adams",
        "email": "douglas@gmail.com",
        "postcode": "pe22 22a",
        "phoneNumber": "07428233312",
        "city": "London",
        "country": "England",
        "favouriteQuote": "The answer is 42"
    }
]
Enter fullscreen mode Exit fullscreen mode

这是我们想要生成的数据的基本格式。让我们使用 Faker 来帮我们完成这项工作。

Faker 非常简单，你只需要浏览一下他们的README.md 文件就能很好地理解他们的结构。基本上，它包含一个对象列表，你可以引用这些对象，每个对象都有你可以调用的方法。例如，有一个对象，它address有如下方法：

zipCode()
zipCodeByState()
city()
cityPrefix()
citySuffix()
// and a load more
Enter fullscreen mode Exit fullscreen mode

所以，要获取一个随机邮政编码，我只需要拨打以下电话：

faker.address.zipCode()
Enter fullscreen mode Exit fullscreen mode

让我们把它整合到代码中：

npm install faker

const express = require("express");
const faker = require('faker');
const app = express();
app.listen(3000, () => {
 console.log("Server running on port 3000");
});

app.get("/users", (req, res, next) => {
    res.json([
        {
            "name": faker.name.findName(),
            "email": faker.internet.email(),
            "postCode": faker.address.zipCode(),
            "city": faker.address.cityName(),
            "country": faker.address.country(),
            "phoneNumber": faker.phone.phoneNumber(),
            "favouriteQuote": faker.lorem.sentence()
        }
    ]);
});
Enter fullscreen mode Exit fullscreen mode

所以现在当我发出请求时，它返回的响应是：

[
    {
        "name": "Darnell Marquardt",
        "email": "Braden_Block@gmail.com",
        "postCode": "56653",
        "city": "Mount Vernon",
        "country": "Paraguay",
        "phoneNumber": "987-214-5854 x674",
        "favouriteQuote": "Harum veritatis est dolore amet nam debitis."
    }
]
Enter fullscreen mode Exit fullscreen mode

如果我再运行一次，就会得到不同的结果：

[
    {
        "name": "Victoria Kerluke V",
        "email": "Valentin.Beahan@hotmail.com",
        "postCode": "15058",
        "city": "Kendall",
        "country": "Serbia",
        "phoneNumber": "751.325.8108 x50407",
        "favouriteQuote": "Deserunt rerum maiores."
    }
]
Enter fullscreen mode Exit fullscreen mode

接下来，我们来更新代码，使其实际返回一个包含 100 个用户的数组：

app.get("/users", (req, res, next) => {
    res.json(getUsers());
});

function getUsers() {
    let users = [];
    for (let i = 0; i < 100; i++) {
        users.push({
            "name": faker.name.findName(),
            "email": faker.internet.email(),
            "postCode": faker.address.zipCode(),
            "city": faker.address.cityName(),
            "country": faker.address.country(),
            "phoneNumber": faker.phone.phoneNumber(),
            "favouriteQuote": faker.lorem.sentence()
        })
    }
    return users;
}
Enter fullscreen mode Exit fullscreen mode

回复：

[
    {
        "name": "Sandra Schaefer",
        "email": "Bethany12@yahoo.com",
        "postCode": "65665",
        "city": "Palm Harbor",
        "country": "Slovakia (Slovak Republic)",
        "phoneNumber": "379-607-0449",
        "favouriteQuote": "Qui consectetur repellendus commodi."
    },
    {
        "name": "Mark Veum",
        "email": "Jedediah.Beer26@yahoo.com",
        "postCode": "89859",
        "city": "Montebello",
        "country": "Myanmar",
        "phoneNumber": "779.494.2905 x0531",
        "favouriteQuote": "Corrupti assumenda enim alias suscipit maxime molestiae quis laboriosam."
    },
   // you get the idea..
Enter fullscreen mode Exit fullscreen mode

使用种子

设想这样一个场景：你正在演示新用户页面，点击打开页面，系统发出一个 GET 用户请求，返回一些随机用户。你在页面上停留了一会儿，大家逐渐熟悉了表格中的用户名称。然后你离开页面去修改一些配置。当你返回页面时，系统再次发出 GET 用户请求，返回的却是不同的随机用户。“桑德拉去哪儿了？”有人问道。

我最喜欢Faker的一点是，它允许你使用随机种子，这意味着每次调用都能得到一致的结果。如果你自己生成随机数据，你很可能不会实现这一点，至少我不会。

让我们在请求中使用种子：

app.get("/users", (req, res, next) => {
    faker.seed(123);
    res.json(getUsers());
});
Enter fullscreen mode Exit fullscreen mode

现在每次我发出请求，返回的数据都相同：

首次访问用户页面：

[
    {
        "name": "Clara Keebler",
        "email": "Maryse_Lubowitz49@gmail.com",
        "postCode": "79465",
        "city": "Lancaster",
        "country": "Burundi",
        "phoneNumber": "536.734.2063",
        "favouriteQuote": "Id harum sit odio quia vitae provident."
    },
    {
        "name": "Kristin Nicolas",
        "email": "Roslyn_Kulas61@gmail.com",
        "postCode": "74363",
        "city": "Guaynabo",
        "country": "Czech Republic",
        "phoneNumber": "496-807-4041",
        "favouriteQuote": "Sequi molestiae beatae enim necessitatibus molestiae."
    },
   // etc
Enter fullscreen mode Exit fullscreen mode

返回用户页面：

[
    {
        "name": "Clara Keebler",
        "email": "Maryse_Lubowitz49@gmail.com",
        "postCode": "79465",
        "city": "Lancaster",
        "country": "Burundi",
        "phoneNumber": "536.734.2063",
        "favouriteQuote": "Id harum sit odio quia vitae provident."
    },
    {
        "name": "Kristin Nicolas",
        "email": "Roslyn_Kulas61@gmail.com",
        "postCode": "74363",
        "city": "Guaynabo",
        "country": "Czech Republic",
        "phoneNumber": "496-807-4041",
        "favouriteQuote": "Sequi molestiae beatae enim necessitatibus molestiae."
    },
   // etc
Enter fullscreen mode Exit fullscreen mode

概括

生成随机数据是所有程序员迟早都要面对的任务。有了 Faker.js，一切都变得轻松多了。它既npm install可以用于 Node 应用，也可以添加到你的前端解决方案中。如果你需要一些数据，但还没有后端来提供这些数据，那么 Faker.js 就是你的最佳选择。

希望您喜欢这篇博客。如果您奇迹般地喜欢上了我的絮叨，那就去我的博客网站 codeheir.com 看看吧，我每周都会在那里写博客，内容涵盖编程世界中所有吸引我注意力的话题！

文章来源：https://dev.to/lukegarrigan/create-fake-data-easily-using-javascript-4mkj
CSS 的完整和实践：绝对位置
使用 ReactJS 的 jSON...