借助mocker-api实现mock

本地mock可以让我们在不依赖server的情况下，自己模拟接口返回在接口还没稳定的情况下，先行开发前端逻辑，并进行调试，此处借助两个npm组件，mocker-api可以轻松开启mock服务，不依赖webpack等其他、mockjs可以模拟各种接近真实的数据类型

工程配置

 "devDependencies": {
    "mocker-api": "^2.7.4",
    "mockjs": "^1.1.0"
  },
 "scripts": {
    "mock": "mocker ./mock --host localhost --port 3000"
  }

目录结构

├── other
└── mock
    ├── api1.js
    └── index.js

入口文件示例index.js

const delay = require('mocker-api/lib/delay');
const data = {
    '/api/test': (req, res) => {
        res.status('200').json({
            code: 0,
            msg: 'success',
            data: {}
        });
    }
};
module.exports = delay(data, 1000);

启动模拟服务

npm run mock

模拟图片内容读取

const delay = require('mocker-api/lib/delay'); // 延时 模拟请求异步问题
const mockjs = require('mockjs');
const fs = require('fs');
const data = {
    '/api/qr': (req, res) => {
        getQr(req, res);
    }
};
function readFileData(filePath) {
    return new Promise((resolve, rejects) => {
        fs.readFile(process.cwd() + filePath, function (err, originBuffer) {
            if (err) {
                rejects(err);
            } else {
                resolve(originBuffer);
            }
        });
    });
}
async function getQr(req, res) {
    let filePath = `/mock/static/test.png`;
    let fileData = await readFileData(filePath);
    res.json({
        data: fileData.toString('base64'),
        code: 0,
        msg: 'success'
    });
}
module.exports = delay(data, 1000);

模拟分页

const delay = require('mocker-api/lib/delay'); // 延时 模拟请求异步问题
const Mock = require('mockjs');
const Random = Mock.Random;
const mdata = Mock.mock({
    'lists|80-100': [
        {
            createTime: '@datetime',
            startTime: '@datetime',
            endTime: '@datetime',
            desc: Mock.mock('@cparagraph(2)'),
            imageUrl: Random.image('200x100', '#FF6600')
        }
    ]
});
const data = {
    '/api/list': (req, res) => {
        const query = req.query;
        const {page, pageSize, dataSource} = queryData(query, mdata.lists);
        let hasMore = page * pageSize < dataSource.length ? 1 : 0;
        res.status('200').json({
            code: 0,
            msg: 'success',
            data: {
                list: dataSource.slice((page - 1) * pageSize, page * pageSize),
                pageInfo: {
                    currentPage: Number(page), // 当前页
                    pageSize: Number(pageSize), // 每页个数
                    totalCount: dataSource.length, // 总个数
                    hasMore // 还有更多
                }
            }
        });
    }
};


// 筛选出参数契合的数据
const queryData = (options, dataSource) => {
    let {page = 1, pageSize = 10, ...other} = options;
    for (let key in other) {
        if ({}.hasOwnProperty.call(other, key)) {
            dataSource = dataSource.filter(item => {
                if ({}.hasOwnProperty.call(item, key)) {
                    return String(item[key]).trim().indexOf(decodeURI(other[key]).trim()) > -1;
                }
                return true;
            });
        }
    }
    return {page, pageSize, dataSource};
};
module.exports = delay(data, 1000);

返回如

{
    code: 0,
    msg: "success",
    data: {
        list: [
            {
                createTime: "1997-12-21 11:37:34",
                startTime: "2010-05-17 13:14:35",
                endTime: "2005-02-21 15:05:19",
                desc: "现局想一学和确资包广算车百及。指万增近政月意回重于育干领。",
                imageUrl: "http://dummyimage.com/200x100/FF6600"
            },
            {
                createTime: "1980-06-11 02:56:12",
                startTime: "1977-08-12 15:54:35",
                endTime: "1977-06-13 06:54:22",
                desc: "现局想一学和确资包广算车百及。指万增近政月意回重于育干领。",
                imageUrl: "http://dummyimage.com/200x100/FF6600"
            }
        ],
        pageInfo: {
            currentPage: 10,
            pageSize: 10,
            totalCount: 92,
            hasMore: 0
        }
    }
}