mock前端测试开发

使用mock搭建服务，本地测试开发，脱离后端开发，根据后端的接口文档（接口虽然没写完，但提供了接口文档），配置接口参数，后续直接改为接口联调就行了,这样可以避免前面等接口，后面忙着调
1.安装配置文件

npm i mocker-api mockjs --dev

2.搭建服务server.js

var path = require('path')
var fs = require('fs')
var mock = require('mockjs')
var app = require('express')()
var port = process.argv.slice(2)[0] || 1618
app.listen(port, function() {
    console.info('Mock server is listening at ' + port)
})

const prefix = '/mock'

var api = {}
var apiPath = path.join(__dirname, './api.json')
function getApis() {
    fs.readFile(apiPath, 'utf-8', function(_, content) {
        api = JSON.parse(content)
    })
}
// 监听api.json变化
fs.watchFile(apiPath, function(curr) {
    getApis()
})
getApis()

// 支持callback
app.set('jsonp callback name', 'callback')
app.use(function(req, res) {
	
	if (req.method == 'OPTIONS'){
		 res.header('Access-Control-Allow-Origin', '*')
		res.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS')
		res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization')
		res.header('Access-Control-Allow-Credentials','true');
		res.sendStatus(200);
		return;
	}
	
    var data
    var delay = 0
    for (var group in api) {
        if (api[group].find(function(reqData) {
			console.log(group)

            if (!new RegExp(reqData.url).test(req.originalUrl)) {
                return false;
            }
            var apiRes = reqData.res
            data = reqData.mock !== false ? mock.mock(apiRes) : apiRes
            delay = reqData.delay || 0
			console.log(data)
            return true
        }) !== undefined) {
            break
        }
    }
    res.header('Access-Control-Allow-Origin', '*')
    res.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS')
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization')
	res.header('Access-Control-Allow-Credentials','true');
    data !== undefined ? setTimeout(() => res.send(data), delay) : res.sendStatus(404)
})

3.配置测试接口app.json

{
    "登入": [
        {
            "url": "/sys/login/oneClick",
            "desc": "一键登录",
            "mock": true,
            "res": {
                "code": 0,
                "message": "success",
                "data": {
                    "userName": "",
                    "phoneNumber|+1": 12345678000,
                    "authorization": "@string(10, 20)"
                }
            }
        },
        {
            "url": "/sys/user/register",
            "desc": "账号注册",
            "mock": true,
            "res": {
                "code": 0,
                "message": "success",
                "data": {
                    "authorization": "@string(10, 20)"
                }
            }
        }
    ]
}

4.启动配置package.json

  "scripts": {
    "mock": "node ./mock-server/server.js 1618", //直接添加进快捷命令
    "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
  }

5.使用的时候直接在你接口配置那填写app.json中的配置接口路径就可以开启本地测试