mock模拟数据

1. @配置：在webpack.config的resolve中添加语句："@": resolve(“src”) //@相对路径配置;之后就可以@/路径，@会直接从src目录开始匹配查找文件
2. 官网：http://mockjs.com/examples.html

bug

执行代码一直报路径查找失败，百度了很久，说axios和mock冲突，需要把mock注释

解决：

我可能”眼瞎”了，在app.vue里通过axios.get()请求时和在mock.js里的路径要一致，我在axios.get()的路径之前多加了.；

app.vue中（把.去掉就好，保证和自定义的路径一致）

 mounted() {
      axios.get("./starnum").then((res)=>{
          console.log(res);
      });
  }

mock.js中

Mock.mock("/starnum", {
   "star|2": "★★★"
 });

简介

1. mock优点

• 前后端分离

  让前端工程师独立于后端进行开发。

• 增加测试的真实性
  通过随机数据，模拟各种场景。

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

• 用法简单
  符合直觉的接口。

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

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

• 在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。

• 不涉及跨域问题

2. 经常使用的API:

Mock.mock(url, type, data)

安装

1. 安装cnpm install mockjs --save-dev
2. 如果需要卸载 cnpm uninstall mockjs
3. 在main.js中引入，和全局vue关联

require('./Mock/mock');

或者

import '目录路径'

4. 单独封装为模块mock.js(新建文件夹)模拟数据，并引入：

import mock from 'mockjs'

5. 在app.vue(项目)页面中通过axios请求数据（在此之前确保已经引入了axiosimport axios from 'axios）

 mounted() {
      axios.get("/starnum").then((res)=>{
          console.log(res);
      });
  }

请求成功后的数据如下，为方便看到数据，直接输出data

使用

一. String

1. 随机生成数字范围内的数量
   （随机生成1-10颗星星）

Mock.mock("/star", {
    "star|1-10": "★"
});

2. 生成字符串数字指定次数
   （生成六颗星星）

Mock.mock("/starnum", {
   "star|2": "★★★"
 });

二. Number

1. +n 每次自增n；
   （生成一个长度为5的对象数组，其中对象的id值每次加2，给定起始值（任意））

Mock.mock("/addnum", {
    "number|5": [
        {
            "id|+2": 3
        }
    ]
});

2. 给定范围随机生成，如果后面是数字则随机生成一个范围内数字，如果后面是字符串或对象，则随机生成指定随机数量个对象或字符串
   数字：

Mock.mock("/addnum", {
    "number|1-10": 3
    }

对象

Mock.mock("/addnum", {
    "number|1-10": [
        {
            "id|+2": 3,
            name:"mary"
        }
    ]
});

3. 同理可以随机小数

整数部分的范围.小数部分位数

Mock.mock('/test',{
  "number|1-100.1-10": 1
})

整数部分固定，小数部分随机1-10位

Mock.mock({
  "number|123.1-10": 1
})

整数部分固定，小数部分固定三位

Mock.mock({
  "number|123.3": 1
})

整数部分固定，小数部分固定10位，但是因为初始数据所以给定了小数部分的前三位

Mock.mock({
  "number|123.10": 1.123
})

三. boolean

1. 随机boolean值（其后跟的数字1没有太大意义）

Mock.mock({
  "boolean|1": true
})

四. Object

对象值随机 可以写成数组随机或者json随机

Mock.mock('/obj', {
    "result|1-10": [
        {
            "id|+1": 1,
            "name|1": ["mary", "liming", "danny", "lisi"],
            "hobby|1-2":
            {
                "1000": "篮球",
                "1001": "足球",
                "1002": "乒乓球",
                "1003": "羽毛球",
            }
        }
    ]
});

如果对象随机后边是集合里面有json，直接随机会重复加倍出现，所以随机产生 使用+ 随机一个对象作为最终值

错误结果：数组输出了两次

Mock.mock('/obj',{
    "result|1-10":[
        {
            "id|+1":1,
            "name|1":["mary","liming","danny","lisi"],
            "hobby|2":[
                {
                    "name":"篮球"
                },
                {
                    "name":"足球"
                },
                {
                    "name":"乒乓球"
                }
            ]
        }
    ]
});

修改后，索引每次增加指定数量，生成一个对象

Mock.mock('/obj',{
    "result|1-10":[
        {
            "id|+1":1,
            "name|1":["mary","liming","danny","lisi"],
            "hobby|+2":[
                {
                    "name":"篮球"
                },
                {
                    "name":"足球"
                },
                {
                    "name":"乒乓球"
                },
                {
                    "name":"高尔夫球"
                },
                {
                    "name":"排球"
                }
            ]
        }
    ]
});

五、正则

1. 随机生成指定位数（声明的类型每种都是指定次数）

Mock.mock("/reg", {
    "Reg|5": /[a-z][0-9]/
});

生成结果示例：

{Reg: "q7v2i1g6t2"}

2. 生成纯数字

生成指定 位数范围的 数字

Mock.mock("/regnum", {
    "Reg|1": /\d{5,10}/
});

六、生成随机日期

随机生成指定格式的日期

console.log(Mock.Random.date("yyyy-MM-dd hh-mm-ss"));//2019-06-18 06-49-43

七、随机生成颜色

console.log(Mock.Random.color());//默认产生#颜色值  #799af2