mock.js在react中的使用

安装mock.js依赖

安装axios依赖并能在使用的页面进行引入

在文件中新建一个mock.js的文件夹内容如下：

import Mock from 'mockjs'

// 模拟数据列表

let arr = [];

for (let i = 0; i < 10; i++) {

  arr.push({

    key: i,

    type:'类型一',

    num: `${i}`,

    mode: `现金`,

    diagnosis:'00'+i,

    user:'张三2',

    pay:`${i+1}00元`,

    date:'2020-2-23',

    operation:'操作'

   

  });

}

// 数据的查询删除操作

let list = function (options) {

    // console.log(options.type);

    let rtype = options.type.toLowerCase(); //获取请求的类型并转换为小写

    switch (rtype) {

        case 'get':

            break;

        case 'post':

            let key = parseInt(JSON.parse(options.body).params.key); // 获取请求的id，将options.body转换为JSON对象

            arr = arr.filter(function (val) {

                return val.key != key; // 过滤掉前台传过来的id对应的相应数据，并重新返回

            });

            break;

        default:

            break;

    }

    return {

        data: arr

    }

}

Mock.mock('/list', /get|post/i, list);

// 条件查询

let listSearch=function(options){

    let sellNum = JSON.parse(options.body).sellNum;

    let diagnosisNum = JSON.parse(options.body).diagnosisNum

    let customer = JSON.parse(options.body).customer

    arr = arr.filter(function(val){

        console.log("val:",val,"sellNum:",sellNum)

        return val.key==sellNum || val.diagnosis == diagnosisNum || val.user == customer

    })

    return{

        data:arr

    }

}

Mock.mock('/listSearch', /get|post/i, listSearch);

// 数据的添加操作

let listAdd = function (options) {

    //  console.log("传过来的数据"+JSON.parse(options.body).params.obj);

    let obj = JSON.parse(options.body).params.obj;

    // console.log("数据获取"+ obj);

    arr = arr.concat(obj); // 将前台返回来的数据，拼接到数组中。

    return {

        data: arr

    }

}

Mock.mock('/listAdd', /get|post/i, listAdd);

// 数据的修改操作

let listUpdate = function (options) {

    let obj = JSON.parse(options.body).params.obj;

    // console.log(JSON.parse(options.body).params);

    // let id = parseInt(JSON.parse(options.body).params.obj.id);

    arr = arr.map(val => { // 将需要替换的数据替换掉

        // console.log(val)

        return val.key == obj.key ? obj : val;

    });

    return {

        data: arr

    }

}

Mock.mock('/listUpdate', /get|post/i, listUpdate);