mock实现增删改查、分页

1. 增删改查

import Mock from 'mockjs'
// 模拟数据列表
var arr = [];
for (let i = 0; i < 10; i++) {
    let newArticleObject = {
        name: '小明',
        content: '内容',
        id: i
    }
    arr.push(newArticleObject); //将模拟的数据放到数组中
}

// 数据的删除操作
let list = function (options) {
    // console.log(options.type);
    let rtype = options.type.toLowerCase(); //获取请求的类型并转换为小写
    switch (rtype) {
        case 'get':
            break;
        case 'post':
            let id = parseInt(JSON.parse(options.body).params.id); // 获取请求的id,将options.body转换为JSON对象
            arr = arr.filter(function (val) {
                return val.id != id; // 过滤掉前台传过来的id对应的相应数据,并重新返回
            });
            break;
        default:
            break;
    }
    return {
        data: arr
    }
}
Mock.mock('/list', /get|post/i, list);

// 数据的添加操作
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.id == obj.id ? obj : val;
    });
    return {
        data: arr
    }
}
Mock.mock('/listUpdate', /get|post/i, listUpdate);

2.分页 

if(MOCK == 'true'){
    // url获取查询参数
    function getUrlParams(url, name) {
        if(url.indexOf('?')>-1){
            var paramsAry = url.substr(url.indexOf('?')+1).split('&');
            // 循环数据
            for (var i = 0; i < paramsAry.length; i++) {
                var tmp = paramsAry[i].split('=');
                if (tmp[0] == name) {
                    return tmp[1];
                }
            }
            return -1;
        }else{
            return -1
        }
    }
    Mock.mock(/\/posts/,'get', function(options){
        let page = parseInt(getUrlParams(options.url, 'page'))
        //当前页码
        if(page == -1) page = 1 
        let total = 10 //总共条数
        let size = 3 //每页条数
        let pages = Math.ceil(total/size) //共多少页
        let startIndex = (page - 1)  * size //开始下标
        let endIndex = (startIndex + size) < total ? (startIndex + size) : total //结束下标
        let records = []
        for (; startIndex < endIndex; startIndex++) {
            let o = Mock.mock({
                _id: "@id()",
                title: '@ctitle',
                author: {nickName: '@cname'},
                category: {title: '@cword(3)'},
                createAt: '@datetime',
                "state|1": [0,1]
            }) 
            records.push(o)
        }
        let display = []
        for (let i = 0; i < pages; i++) {
            display.push(i+1)
        }
        return {
            page: page,
            total: total,
            size: size,
            pages: pages,
            records: records,
            display: display
        }
    })
}

 

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值