mock模拟数据

小咪咪 2023-06-19 04:27 18阅读 0赞

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

### bug ###

执行代码一直报路径查找失败，百度了很久，说axios和mock冲突，需要把mock注释  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]  
解决：

> 我可能”眼瞎”了，在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地址即可。
 *  不涉及跨域问题

1.  经常使用的API:

Mock.mock(url, type, data)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]

### 安装 ###

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

require('./Mock/mock');

或者

import '目录路径'

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

import mock from 'mockjs'

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

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

请求成功后的数据如下，为方便看到数据，直接输出`data`  
![在这里插入图片描述][20191204174358428.png]

### 使用 ###

##### 一. String #####

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

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

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

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

##### 二. Number #####

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

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

![在这里插入图片描述][20191204175723635.png]

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

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

对象

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

1.  同理可以随机小数

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

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 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]

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":"乒乓球"
                    }
                ]
            }
        ]
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]

##### 五、正则 #####

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

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

生成结果示例：

{ Reg: "q7v2i1g6t2"}

1.  生成纯数字

> 生成指定 位数范围的 数字

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

![在这里插入图片描述][20191204184951819.png]

##### 七、随机生成颜色 #####

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191204171847119.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191204160627343.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[20191204174358428.png]: https://img-blog.csdnimg.cn/20191204174358428.png
[20191204175723635.png]: https://img-blog.csdnimg.cn/20191204175723635.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191204181948392.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191204183310813.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191204183758112.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[20191204184951819.png]: https://img-blog.csdnimg.cn/20191204184951819.png