Mock HTTP

Mock HTTP

• JSON Schema Faker ( faker,chance,regexp)
• JSON Server

tutorial

• 新建一个 mockDataSchema.js 文件，用来描述数据结构

export const schema = {
    "type": "object",
    "properties": {
        "users": {
            "type": "array",
            "minItems": 3,
            "maxItems": 5,
            "items": {
                "type": "object",
                "properties": {
                    "id": {
                        "type": "number",
                        "unique": true,
                        "minimum": 1
                    },
                    "firstName": {
                        "type": "string",
                        "faker": "name.firstName"
                    },
                    "lastName": {
                        "type": "string",
                        "faker": "name.lastName"
                    },
                    "email": {
                        "type": "string",
                        "faker": "internet.email"
                    }
                },
                "required": ["id", "firstName", "lastName", "email"]
            }
        }
    },
    "required": ["users"]
};

• 新建一个 generateMockData.js 文件，作用是利用 json-schema-faker 根据上面定义的数据格式自动生成随机数据。

import jsf from 'json-schema-faker';
import {schema} from "./mockDataSchema";
import fs from 'fs';
import path from 'path'
import chalk from 'chalk';

const json=JSON.stringify(jsf(schema));

let targetFilePath=path.resolve(__dirname)+"/api/db.json";

fs.writeFile(targetFilePath,json,function (err) {
    if(err){
        return console.log(chalk.red(err));
    }else{
        console.log(chalk.green("Mock data generated."));
    }
});

console.log("this is generateMockData file");

console.log(targetFilePath);

• 在项目的 package.json 文件中新增运行脚本，生成随机数据，写入文件

"scripts" : {
    ...
    "generate-mock-data": "babel-node src/mockHttp/generateMockData.js"
}

运行 npm run generate-mock-data 之后，可以看到相应的路径中已经生成db.json 文件。

• 现在我们已经有了基本的数据，接下来我们需要利用 json-server 启动一个服务来使用这些数据 , Json-server 会根据我们随机数据结构里的每一个顶级的对象生成一个接口服务。我们在 package.json 文件中新增运行脚本：

"scripts" : {
    ...
    "generate-mock-data": "babel-node src/mockHttp/generateMockData.js"，
    "start-mockapi": "json-server --watch src/mockHttp/api/db.json --port 3001"
}

执行命令之后，我们可以看到在 http://localhost:3001 的地址上已经可以访问系列的服务了。

• 每次开启服务生成随机数据。在 package.json 文件中添加一个prestart-mockapi 命令。

"scripts" : {
    ...
    "generate-mock-data": "babel-node src/mockHttp/generateMockData.js"，
    "prestart-mockapi": "npm run generate-mock-data"，
    "start-mockapi": "json-server --watch src/mockHttp/api/db.json --port 3001"
}

• 关于Json-server,有意思的是，如果我们想编辑或者删除数据，实际上会去操作对应的数据文件。