mock的3个层次和自动启动mock server-CSDN博客

前后端分离的架构下，前端开发不全部依赖于后端的接口，当后端服务器不可用时，可以自己mock数据。

主要针对异步的ajax请求，通过把对后端服务器的请求换成对mock server的请求来实现。这个操作可以在3个层次来做。

1. 项目中的httpProxy

前端项目一般都会封装一个httpProxy，进行一些ajax的通用配置和请求、响应的通用处理。我们可以通过切换请求域名的配置来实现mock server 和真实后端服务器的切换。

比如axios里，通过修改baseUrl的配置：

  axios.config({
      baseUrl: 'http://xxxxx.com/' 
  })
复制代码

手动切换成

axios.config({
  baseUrl: 'http://localhost:3000/'
})
复制代码

就可以把所有的请求都换成对mock server的请求了。

2.构建时的环境变量

手动切换的方式太过繁琐，我们可以结合构建时的环境变量来实现自动切换。

比如，在axios的配置中这样写：

axios.config({
   baseUrl: process.env.USE_MOCK ? 'http://xxxx.com' : ''
})
复制代码

然后在启动的时候通过判断命令行参数，或者通过选择的方式来切换，

       inquirer.prompt({
            type: 'list',
            name: 'isMock',
            message: '是否使用mock数据？',
            choices: [
                '是',
                '否'
            ],
            filter(val) {
                return val === '是' ? 1 : 0;
            }
        }).then(answer => {
            if (answer.isMock === 1) {
                console.log(chalk.green('使用mock数据'));
                process.env.USE_MOCK = true;
            } else {
                console.log(chalk.green('不使用mock数据'));
            }
        });
复制代码

这种通过命令行参数或者手动选择的方式，比手动修改代码方便了很多，也是比较常用的方式。

3.修改hosts

除了可以修改请求的域名外，还可以通过hosts来修改域名和ip的对应关系，不改动代码，只要把域名切换成后端服务器的ip或者mock server的ip就可以了。这种方式也很常用。

# localhost   http://xxx.com
59.151.115.115 http://xxx.com
复制代码

项目级别、工程级别、系统级别的方案都可以实现目标服务器的切换。除了直接请求目标服务器，也可以通过webpack的devServer来做转发，它支持一些url的重写之类的功能。

如把 /aaa/bbb 转向 /api/xxx的配置

devServer: {
  proxy:{
       '/aaa/bbb/': {
         target: 'http://localhost:3000',
         changeOrigin: true,
         pathRewrite: {
            '^/api/xxx': ''
        }
      }
  }
}
复制代码

以上是3种mock数据的方式，最常用的还是在工程级别也就是构建的时候做处理，而且还可以做到检测mock server状态并且自动启动mock server。

自动启动mock server

检测mock server状态可以通过检测端口占用情况

    exec('netstat -ano | findstr "3000"', (err, result) => {        
        if(result.indexOf('LISTENING') != -1){
            console.log(chalk.green('检测到mock服务器已经启动'));
        }else{
            console.log(chalk.blue('未启动mock服务器，正在启动中'));
            startMockServer( () => {
                console.log(chalk.green('mock服务器启动成功'));
            });
        }
    });
复制代码

而启动MockServer只需要执行对应的命令。不过MockServer启动后就一直阻塞在哪里，没有返回的信息，只能通过主动去请求的方式来判断是否启动成功。

function startMockServer(callback) {
    exec('npm run mock', (err, stdout) => {
        if (err) {
            console.log(chalk.red('mock服务器启动失败'));
        }
    });
    setTimeout(() => {
        http.get({
            hostname: 'localhost',
            port: 3000,
            path: '/'
        }, (res) => {
            callback();
        });
    }, 3000);
}
复制代码

最终效果如下：

上面的文字是用的cfonts和随机生成的配置

function generateRandomCFontsConfig() {
    const fontArr = ['console', 'block', 'simpleBlock', 'simple', '3d', 'simple3d', 'chrome', 'huge'];
    const font = fontArr[_.random(0,fontArr.length)];
    const colorArr = ['system','black','red','green','yellow','blue','magenta','cyan','white','gray','redBright','greenBright','yellowBright','blueBright','magentaBright','cyanBright','whiteBright','candy']
    const color1 = colorArr[_.random(0,colorArr.length-1)]
    const color2 = colorArr[_.random(0,colorArr.length-1)]
    const color3 = colorArr[_.random(0,colorArr.length-1)]

    return {
        colors: [color1,color2,color3],
        font: font
    }
}
    say('ITS',{
        ...generateRandomCFontsConfig(),
        space: false
    })
复制代码