手搭手前端数据模型MockJS

https://mockjs.com/

Mock.js

生成随机数据，拦截 Ajax 请求。

前后端分离

让前端攻城师独立于后端进行开发。

增加单元测试的真实性

通过随机数据，模拟各种场景。

开发无侵入

不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

用法简单

符合直觉的接口。

数据类型丰富

支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

方便扩展

支持支持扩展更多数据类型，支持自定义函数和正则。

安装mockjs.

npm install mockjs

Mock.mock('/product/get',{
    "ret":0,
    "data":{
        "time": "@datetime",//随机生成时间
        "score|1-800": 800, //随机生成1-800
        "rank|1-100": 100,//随机生成1-100
        "name": "@cname"//随机生成中文名
    }
});

Mock核心方法

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

rurl，表示需要来接的URL,可以是字符串或者URL正则

rtype, 表示需要三姐的Ajax请求类型，get ，post 、put等

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

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

设置延时请求到数据

Mock.setup({

timeout: 400

})

Mock.setup({

       timeout: ‘200-600’

})

数据生成规则：数据模板、数据占位符

数据模板中的每个属性由3部分构成：属性名name、生成规则rule、属性值value：

‘name|rule’:value

若配置有Axios默认路径先注释，以免MockJS拦截的路径不生效

main.js导入
import  './mock/index'

发送get请求
mounted: function () {
    axios.get("/product/get").then(response => {
      console.log(response.data.data.img);
      this.image = response.data.data.img;
      this.Data =response.data.data;
  })
  }


data() {
    return {
      Data: [],
      image:""
    }
  },

效果