mockjs在项目中的应用

mockjs

    官网 前后端分离项目，在和后端定义好接口数据格式后，前端可以不需要等到后端把接口开发完了才做联调,以前我的做法是直接在js里面写死一个json来达到模拟效果，而今在vue项目里面，结合webpackdevserver+mockjs可以生成随机数据，拦截请求，更方便、更真实的模拟接口场景，这里mockjs的更深入内容请结合官方网站来看，我这里只列出我项目中用到的使用方式~

    1、webpackdevserver的配置

import mock from '../mock'

let server = new WebpackDevServer(compiler, {
   publicPath: "/",
   contentBase: config.ACTIVITY_BASE_DIR,
   hot: true,
   historyApiFallback: false,
   compress: false,
   setup: function(app) {
      app.use('/api/mock/*', mock); //所有请求以api/mock的换为mock里面的
   }
});

server.listen(config.INTERNAL_SERVER_PORT, "0.0.0.0", function() {
  callback();
});

    2、mock.js

const Mock = require('mockjs')
const pathRegexp = nodeRequire('path-to-regexp')

function normalizeResult(keys, matches) {
    let res = {};
    keys.forEach(function(item, index) {
        res[item.name] = matches[index + 1];
    });
    return res;
}

function Chain() {
    this._routes = [];
}

Chain.prototype.add = function(pattern, cb) {
    let keys = [];
    let re = pathRegexp(pattern, keys);
    this._routes.push({
        re,
        keys,
        cb
    });
}

Chain.prototype.exec = function(req, fn) {
    let len = this._routes.length;
    for(let i = 0; i < len; i++) {
        let route = this._routes[i];
        let matches = route.re.exec(req.params[0]);
        if(!matches) {
            continue;
        } else {
            return fn(route.cb(req, normalizeResult(route.keys, matches)));
        }
    }
}
Chain.add('api/xxx',()=>{
  return Mock.mock({
      "code|1": [200, 200, 200,200, 200, 200, 200, 200, 200],
      "message": function() { this.code == 200 ? '' : '服务器错误' },
      "value|1-1": [
          {
              "awardName": "30元"
          }
      ]
  })
})
export default function(req, res, next) {
    chain.exec(req, function(result) {
        if(req.query.jsonpCallback) {
            res.send(`${req.query.jsonpCallback}(${JSON.stringify(result)})`);
        } else {
            res.json(result);
        }
        next();
    }) 
}

    3、配置生产和测试环境区别

//全局变量
vue.use({
  install(vue) {
    vue.prototype.__REQ_ENV__ = process.env.NODE_ENV != 'production' ? '/mock' : '';
  }
});
//store里面请求地址用__REQ_ENV__标示前缀

    如测试环境请求api/xxx这个地址时，有’/mock’ 就请求到了mock里面设置的数据