前端工具mockjs

最新推荐文章于 2024-08-13 17:03:54 发布

可达鸭miss

最新推荐文章于 2024-08-13 17:03:54 发布

阅读量707

点赞数

本文链接：https://blog.csdn.net/weixin_57110180/article/details/123644471

版权

1、为什么要使用mockjs

在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口，

2、优点

1.前后端分离，
2.可随机生成大量的数据
3.用法简单
4.数据类型丰富
5.可扩展数据类型
6.在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可。

3、使用

安装

npm install mockjs

基本使用

//导入
var Mock = require('mockjs')

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

rurl （可选）。

表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。

rtype（可选）

表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

template（可选）。

表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

function(options) 可选。

表示用于生成响应数据的函数。

options

指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性，

Mock.setup( settings )

配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。

settings 必选。

配置项集合。

timeout 可选。

指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒后才会返回响应内容；也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。

数据模板


Mock.mock({
  "string|1-10": "★"  ,   //'name|min-max': string  输出最低min次  最多max次
  "string|3": "★★★" ,   //'name|count': string   固定次数
  "number|+1": 202    ,   //name|+1': number    number+=202
  "number|1-100": 100  ,  //'name|min-max': number  数值只在min 和 max之间
  "number|1-100.1-10": 1 ,  //'name|min-max.dmin-dmax': number 随机小数点位数
  "boolean|1": true    ,    //'name|1': boolean   布尔值   

  "object|2": {            //'name|count': object  随机对象内的count个
    "310000": "上海市",     //'name|min-max': object  随机对象内的min至max个
    "320000": "河南省",
    "330000": "广东省",
    "340000": "江苏省"
  } ,
  。。。。 
                     
})

更多模板详情：Mock.js