前端数据模拟的2种方式

方式1：json-server

json-server 是一个轻易搭建拥有完整 REST API 的轻量级后端服务。它的内部结构如下：

•  middleware：中间件，用来处理所有请求，比如鉴权、静态资源等功能
  • json-server 提供的中间件：静态资源、请求体解析
  • 自定义中间件：鉴权
• router：带路由 url 的中间件，处理特定路由 url 的请求
  • json-server 的路由：一些直接使用 json 数据的 api
  • 自定义路由：有自定义逻辑的 api

方式2：mock.js

Mock.js 是一个用来生成模拟数据，拦截 AJAX 的工具。

一、安装

     npm install --save mockjs

二、示例

import Mock from 'mockjs';

//不拦截 AJAX 的示例
let data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素

    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1

        'id|+1': 1

    }]

});

console.log(JSON.stringify(data, null, 4));

//拦截 AJAX 的示例
//会把请求'/v1/user'的 ajax 进行拦截，拦截地址那也可以写正则
Mock.mock('/v1/user', {
    'list|1-10': [{
        'id|+1': 1,
        'email': '@EMAIL'
    }]
})

三、数据模板定义规范 DTD

     1. 'name | rule': value

        name：属性名；rule：生成规则；value：属性值。

     2. 生成规则的7种格式

           (1) 'name | min-max'  //生成 min-max 个

           (2) 'name | count'  //生成 count 个

           (3) 'name | min-max.dmin-dmax'

                生成一个浮点数，正数部分大于等于 min，小于等于 max，小数部分保留 dmin-dmax 位。

           (4) 'name | min-max.dcount'

                生成一个浮点数，正数部分大于等于 min，小于等于 max，小数部分保留 dcount 位。   

           (5) 'name | count.dmin-dmax'

           (6) 'name | count.dcount'

           (7) 'name | +step'  //属性值自动加 step   

     3. 属性值中可以有@占位符。

        属性值还制定了最终值的初始值和类型。

     4. 属性值的数据类型可以是：String，Number，Boolean，Object，Array，Function，RegExp。

四、占位符

     1. 占位符的位置会随记生成相对应的数据。

Mock.mock('@email')
 //"y.lee@lewis.org"

Mock.mock({email: '@email'})  
//{ email: "v.lewis@hall.gov" }

    2. 占位符格式

        @占位符

        @占位符(参数 [,参数])

    3. 占位符可选的值

Type	Method
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image, dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

     4. 可以用 Mock.Random 扩展占位符。

五、Mockjs API

     1. Mock.mock(rurl?, rtype?, template | function(options))

     2. Mock.setup({timeout: 400})

        表示 400 毫秒后才会返回响应的内容，值也可以是 ‘200-600’，表示介于 200-600 毫秒之间，默认值是 ‘10-100’。

     3. Mock.Random

        用于生成各种随记数据。

     4. Mock.valid(template, data)

        校验真实数据 data 是否与数据模板 template 匹配。

     5. Mock.toJSONSchema(template)