mook数据和字段替换

工具&方法

自动化接口模拟

www.apifox.cn/

首先推荐一个比较好用的mook数据的工具，具体可以参考文档，当然工具不是关键，对数据的处理才是核心功能。

传统mook数据

{
  "status": "@boolean",
  "msg": function() {
    return this.status ? "登录成功" : "登录失败"
  },
  "code": function() {
    return this.status ? 200 : 404
  },
  "data": {
    "userId": "@guid",
    "userName": "@cname",
    "email": "@email"
  }
}

问题

传统的mook有个很大的问题，就是key对应的value是随时可以变，如果和后端定义的key发生了改变那么就需要去mook工具去手动改过来，但是有一种情况是你已经把key写到代码的逻辑或者dom里了，而且改变的key也很多。。。，如果再去代码修改可能会耗费大量时间，这个时候就需要有个逻辑把获取data里的字段改成替换的字段

字段替换方法

// 工具类持续更新中

class FieldChange {
    constructor(data,targetFields){
        this.data = data
        this.targetFields = targetFields
        this.nestNum = 0 // 嵌套层数
        this.outData = null
    }
    
    // 检测传值格式是否符合规则
    _checkData(targetData){
        if(targetData instanceof Object && Object.keys(targetData),length > 0){
            return 'Object'
        }else if(targetData instanceof Array && targetData.length > 0){
            return "Array"
        }else{
            return false
        }
    }
	
    // 计算数据
    _configData(targetData){
        const _fieldLength = this.targetFields.length
        let   _i = 0
        while(_i++ < _fieldLength){
              const _compareData = this.targetFields[_i-1]
              for(const [index,obj] of targetData.entries()){
                let  _changeObj = this._circleObj(obj, _compareData)
                targetData.fill(_changeObj, index, index + 1)
            }
        }
        return targetData
    }

    // 循环对象替换目标key
    _circleObj(obj, targetKey){ 
       if(targetKey.length < 2) return obj // 如果目标值长度小于2 不做计算
       if(this._checkData(obj) === 'Array') this._configData(obj)  // 如果是数组类型 继续循环查找内部元素
       for(const key in obj){
           if(key === targetKey[0]){
                obj[targetKey[1]] =  obj[key]
                delete obj[key]
           }
       }

       return obj
    }
	
    // 接受数据
    receiveData(){
        const _dt = this._checkData(this.data) && this._checkData(this.targetFields)

        if(!_dt){
            return this.data
        }
        if(_dt === 'Array'){
            return this._configData(this.data)
        }
        if(_dt === 'Object'){
            this._configData(this.data)
        }
    }
} 

export default FieldChange

使用方法

const needvalue = []
onMounted(() =>{
    window.fetch('xxx/getdata').then(response =>{
        response.json().then(res =>{
           /* 
             * 替换相应的key
             * 替换数据结构 [ ['目标字段', '替换的新字段', '所在层级，传空默认全部层级（开发中）'] ]
     	   */
          needData.value = new FieldChange(res,[['price','money']]).receiveData()
        })
    })
  })
// 输出

// 原数据
const basic = [
    {
      num:2,
      price:'23232',
      desc:'描述信息+',
      title:'title+'
    },
    {
      num:2,
      price:'23232',
      desc:'描述信息+',
      title:'title+'
    },
   	...
    ...
    ...
  ]
    
// 转化后
    
   needData = [
        {
          num:2,
          money:'23232',  // 转化的字段
          desc:'描述信息+',
          title:'title+'
        },
        {
          num:2,
          money:'23232', // 转化的字段
          desc:'描述信息+',
          title:'title+'
        },
        ...
        ...
        ...
	]