Mock.js初步使用（浏览器端）

Mock.js：生成随机数据，拦截 Ajax 请求。官方地址：http://mockjs.com/

第一个demo

demo.html

浏览器访问效果

这里的核心是

Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
});

语法格式：Mock.mock( template )

作用：根据数据模板生成模拟数据。

template:数据模板，数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

案例中：

// list为属性名
// 1-10为生成规则
// 冒号后面为属性值
'list|1-10': [{
        'id|+1': 1
    }]

注意：

• 属性名 和 生成规则 之间用 | 分隔。

• 生成规则 是可选的。

• 生成规则 有 7 种格式：

1. 'name|min-max': value

2. 'name|count': value

3. 'name|min-max.dmin-dmax': value

4. 'name|min-max.dcount': value

5. 'name|count.dmin-dmax': value

6. 'name|count.dcount': value

7. 'name|+step': value

• 生成规则 的 含义 需要依赖 属性值 才能确定。

• 属性值 中可以含有 @占位符。

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

发起ajax请求

发起ajax请求demo

ajax-demo.html

    
    


    点我

浏览器访问，点击按钮，查看控制台效果

控制台看到生成了数据。

参考：

https://blog.51cto.com/u_15127591/3844430?articleABtest=1

完成！enjoy it!