您的位置: 首页  >  IT文章  >  前后端分离开发之前端自己的API（DB）---- （2） [^_^]: <> (用 mockjs 快速生成数据)

前后端分离开发之前端自己的API（DB）---- （2） [^_^]: <> (用 mockjs 快速生成数据)

分类: IT文章 • 2022-05-27 23:02:06

Use Mockjs for generating mock data

书接上回。 上一篇中，介绍了如何使用 json-server ,来启动开发环境的API数据服务， 接下来，讲一下使用 mockjs 来产生随机数据。

注：

·# mockjs 自己也可以 起服务，但是不能跨域

·# 配合 json-server 使用更好

·# mockjs 可以很好地支持造中文

·# 其它语言如日语怎么办：临时用的变通方法：定义一个 string 或 array 来做池子，再在里面选

0. 开工

 # 初始化工程目录，以创建出 package.json 文件

 # 安个包：concurrently

 # 安个包：mockjs

npm init
npm install -D concurrently
npm install -D mockjs

 concurrently 包：这个可以不要。它能让你同时执行多个scripts以实现前后端同时启动， 而不用的话也可以以同步方式执行多个任务，这个地方用了只是笔者希望试一下，用在这里会不会执行成功， 好玩嘛，又不要钱对不对。

1. 建一个 mock.js 文件，用来生成json数据文件

以下贴上本次demo的删减版（不能原样往上贴，国际惯例）示例

关键就是mockjs提供的方法的使用，这个做的时候还是建议自己查官网API介绍

网址：https://github.com/nuysoft/Mock/wiki/

前后端分离开发之前端自己的API（DB）---- （2） [^_^]: <> (用 mockjs 快速生成数据)

(function () {
    let Mock = require('mockjs');
    let fs = require('fs')
    let Random = Mock.Random;

    let data = {
        Foods: [],
        People: []
    };

    let foodIdList = []

    function generateData() {

        createFoods();
        createPeople();
    }
    
    function writeJson() {
        var str = JSON.stringify(data, null, "	");
        fs.writeFile('./db.json', str, function (err) {
            if (err) {
                console.error(err);
            }
        })
    }

    function createFoods () {
        for (let i = 0; i < 20; i++) {
            data.Foods.push({
                id: i,
                Name: Random.csentence(2, 10),
                Price: Random.integer(5, 99),
                CreatedAt: Random.date('yyyy-MM-dd'),
                CreatedBy: Random.integer(1, 20),
                UpdatedAt: Random.date('yyyy-MM-dd'),
                UpdatedBy: Random.integer(1, 20),
            })
        }

        foodIdList = data.foodIdList.map(x => x.id);
    }

    function createPeople() {
        for (let i = 0; i < 20; i++) {
            data.People.push({
                id: i,
                Name: Random.cword(3),
                FavourateFoodId: Random.pick(foodIdList),
                Email: Random.email('gmail.com'),
                CreatedAt: Random.date('yyyy-MM-dd'),
                CreatedBy: Random.integer(1, 20),
                UpdatedAt: Random.date('yyyy-MM-dd'),
                UpdatedBy: Random.integer(1, 20),
            })
        }
    }

    // データ生成
    generateData();

    // JSONファイルに書き込む
    writeJson(data)
})()

2. 配置 package.json 里的 scripts

    "gen": "node mock.js",
    "serve": "json-server db.json",
    "mock": "concurrently "npm run gen" "npm run serve""

# 不使用 concurrently ，串行执行的话修改如下即可：

  "mock": "npm run gen && npm run serve"

3. 大功告成 END

如果第一次运行，就执行：

npm run mock

这样就回生成一次 db.json 文件，

第二次的时候，只执行： 

 npm run serve

就可以了

调用api的时候变更会保持在这个 json 文件，

如果想重新做人-假数据，那就执行 gen 或 mock

自己摸索着做出来

在此作个记录也许会对新人有帮助

如有纰漏请斧正

相关推荐