前端模拟动态数据

基于技术方案3做的动态数据模拟。

一、规则

1、过滤

/getNewsA?id=1
/getNewsA?id=1&id=3

2、分页

# 查询第1页数据
GET /getNewsA?_page=1
# 查询第1页，每页展示2条数据
GET /getNewsA?_page=1&_limit=2
# 查询第2页，每页展示2条数据
GET /getNewsA?_page=2&_limit=2

3、排序

# 以id的升序排列
GET /getNewsA?_sort=id&_order=asc
# 以title升序、id降序排列
GET /getNewsA?_sort=title,id&_order=asc,desc

二、案例

1、数据文件

// getNewsA.js
let Mock = require('mockjs');
let Random = Mock.Random;

module.exports = function() {
    var data = {
        news: []
    };

    for (var i = 0; i < 10; i++) {
        var content = Random.cparagraph(0, 10);
        data.news.push({
            id: i,
            title: Random.cword(8, 20),
            desc: content.substr(0, 40)
        });
    }
    return data.news;
}();

2、使用数据文件

// dynamicDataA.jsx

componentDidMount() {
    const self = this;
    let f = fetch('/api/getNewsA?_limit=5');
    f.then(function(response) {
      return response.json(); 
    }).then(function(data) { 
      console.log(data);
      self.setState({
        newsArr: data
      });
    });
  }

3、路由映射

// dynamicDataA/fakeData/routes.js
module.exports = {
    '/api/getNewsA*': '/getNewsA',
    '/api/getNewsA\\?id=:id': '/getNewsA/:id',
    '/api/getNewsA/:id': '/getNewsA?id=:id',
    '/api/getNewsA/:_page': '/getNewsA?_page=:_page',
    '/api/getNewsA/:_limit': '/getNewsA?_limit=:_limit',
    '/api/getNewsA\\?_limit=:_limit': '/getNewsA/:_limit',
};

三、温馨提醒

要使用json-server的数据筛选分页等功能，数据文件必须是裸露的数组，不能是经过包装的对象。

比如以getNewsA.js文件为例:

// 应该写
return data.news;

// 不应该写

return data;

或

return {
  success: true,
  data: data
}

期望的接口返回是[{...},{...}]，这样就能实现数据分页。

// 接口地址： http://127.0.0.1:3003/getNewsA?_limit=5

[
    {
        "id": 0,
        "title": "革家据使京自了处真二如少华许省",
        "desc": "意只应度实其方特级思做标列决号。至严委权打快识已同红图打海。公复想求住七放社才情"
    },
    {
        "id": 1,
        "title": "东标快技设备越本式求共员需广口低术强",
        "desc": "或月容众经那证制收片权白化。解按不支当格率白权边龙低都特。儿管本然车面头说铁二就"
    },
    {
        "id": 2,
        "title": "备边圆一做更结群据决值却",
        "desc": "断这理影向为斯利问除究例眼儿建。说节命力斯化月工他按省去如支适术精置。报马领采式"
    },
    {
        "id": 3,
        "title": "飞般小少验进公被文斗龙作除",
        "desc": "是们分必它制确市九候铁角实全青拉活。员度变况青件过大做府技又。"
    },
    {
        "id": 4,
        "title": "格开走老使素阶法率照",
        "desc": "经果说流千拉把完己见被正上收见南派。时调较工切走如上品万命指即种。目标声层但包质"
    }
]

 

转载于:https://www.cnblogs.com/camille666/p/mock_dynamic_data.html