VUE项目Mock.js使用

官网 mock.js

1 npm

npm install mockjs

2 新建mock.js

import Mock from 'mockjs'
var Random = Mock.Random
//随机
Random.extend({
    constellation: function (date) {
        var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
        return this.pick(constellations)
    },
    hobby: function (date) {
        var hobby = ['运动', '探险', '动画', '堆积木', '逛街', '画画', '爬山', '打游戏', '读书']
        return this.pick(hobby)
    }
})
//返回data
let DATARES = function () {
    let arr = []
    for (let i = 0; i < 10; i++) {
        arr.push(Mock.mock({
            "name": Mock.mock('@cname'),
            "age|18-32": 5,
            "address|1": {
                '北京|1': ['天安门', '故宫', '北海公园'], '上海|1': ['外滩', '东方明珠塔', '黄浦公园'], '广州|1': ['广州塔', '陈家祠', '白云山']
            },
            date: Random.date('yyyy-MM-dd'),
            county: Mock.mock('@county(true)'),
            constellation: '@CONSTELLATION',
            hobby: "@HOBBY",
            color: Mock.mock('@color()')
        }))
    }
    return arr
}
let listData = {
    code: 200,
    data: DATARES(),
    message: "成功",
    msg: "成功",
    success: true
}
// url拦截的请求  请求方式  数据
Mock.mock('http://localhost:8888/api/user/list', 'post', listData)

3 mian.js //全局引入

import './utils/mock'

4 vue页面使用

methods:{
	 async getList(data) {
	 	  //发起请求
	      const RESDATA = await request({
	        url: "http://localhost:8888/api/user/list",
	        method: "post",
	        data,
	      });
	      //获取模拟数据，赋值
	      this.dataList = RESDATA.data.data;
	      this.dataList.map((item) => {
	      	//数据处理
	        let address = item.address;
	        item.addressCS = Object.keys(address)[0];
	        item.addressTD = Object.values(address)[0];
	      });
	      console.log(this.dataList);//log
	    },
	  },
}

5 over