快速入门——前端数据模拟MockJS

B栈跟着老师视频自学，仅供参考~~~

基本使用

在项目中创建mock目录，新建index.js文件

//引入mockjs

import Mock from 'mockjs'

//使用mockjs模拟数据

Mock.mock('/product/search',{

        "ret":0,

        "data":{

                "mtime":"@datetime" , //随机生成日期时间

                "score|1-800":800, //随机生成1-800的数字

                 "rank|1-100":100,

                "stars|1-5":5,//随机生成1-5的数字

                "nickname":"@cname",//随机生成中文名字

        }

}) ;

 组件中调用mock.js中模拟的数据接口，这时返回的response就是mock.jd中用Mock.mock(

'url',data)中设置的data

import axios from 'axios'

export default{

        mounted: function(){

                axios.get("/product/search").then(res =>{

                        console.log(res)

                })

        }

}

核心方法 

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

rurl需要拦截的URL，可以是URL字符串或URL正则

rtype需要拦截的Ajax请求类型，例如GET，POST，PUT，DELETE等

template表示数据模板，可以是对象或字符串

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

设置延时请求到数据

//延时400ms请求到数据

Mock.setup({

        timeout: 400

})

//延时200-600毫秒请求到数据

Mock.setup({

        timeout: '200-600'

})

 数据生成规则

mock的语法 规范包含两层规范：数据模板DTD，数据占位符DPD

数据模板中的每个属性由三个部分组成，属性名name，生成规则rule，属性值value

'name|rule':value

属性名和生成规则之间用竖线|分隔，生成规则是可选的，有7中格式：