mock的基本用法

什么是mock

• 增加测试的真实性,可以模拟各种数据
• mock的用法比较简单而且不会涉及跨域问题
• 方便扩展支持扩展更多数据类型，支持自定义函数和正则。
• mock在使用之前，通常前端要和后端沟通数据接口结构和数据类型
• 不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据
• 数据类型丰富有随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
• 目前基本都是前后端分离开发，前端和后端并行同时开发，可以通过mock数据来解决后端接口没有写好的问题

mock的使用(vue)

第一步: 引入mockjs插件

npm install mockjs -S // 或者 cnpm yarn都可以

第二步: 在scr下创建一个文件夹，用于存放模拟的数据的文件(src/mock/index.js)

const Mock = require("mockjs");
let data = Mock.mock({
   "data|6": [{
      //生成6条数据 数组
      "shopId|+1": 1, //生成商品id，自增1
      shopMsg: "@ctitle(10)", //生成商品信息，长度为10个汉字
      shopName: "@cname", //生成商品名 ， 都是中国人的名字
      shopTel: /^1(5|3|7|8)[0-9]{9}$/, //生成随机电话号
      shopAddress: "@county(true)", //随机生成地址
      "shopStar|1-5": "★", //随机生成1-5个星星
      "salesVolume|30-1000": 30, //随机生成商品价格 在30-1000之间
      //生成随机图片，大小/背景色/字体颜色/文字信息
      shopLogo: "@Image('100x40','#c33', '#ffffff','小北鼻')", 
      "food|2": [{
         //每个商品中再随机生成2个food
         foodName: "@cname", //food的名字
         //生成随机图片,大小/背景色/字体颜色/文字信息
         foodPic: "@Image('100x40','#c33', '#ffffff','小可爱')", 
         "foodPrice|1-100": 20, //生成1-100的随机数
         "aname|2": [{
            aname: "@cname",
            "aprice|30-60": 20,
         },
        ],
       },
     ],
    },
  ],
});
Mock.mock(/goods\/goodAll/, "post", () => {
   //三个参数。第一个：路径，第二个：请求方式post/get，第三个：回调，返回值
   return data;
});

第三步: 需要在入口主文件 main.js中,引入这个模拟数据的文件

import "./mock/index.js"

第四步: 在页面中，我们直接可以进行axios请求(正常是封装在api中,便于后期维护)

<template>
  <div id="app">
    <button @click="getTeachFn">请求mock</button>
    <router-view />
  </div>
</template>

<script>
   import axios from "axios";
   export default {
      components: {},
      data() {
         return {};
      },
      created() {},
      mounted() {},
      methods: {
        //点击事件
        getTeachFn() {
          axios.post("http://localhost:8080/goods/goodAll").then((res) => {
             console.log(res);
          });
        },
      },
   };
</script>

第五步: 直接在页面中点击按钮获取请求过来的数据

看这里
mock.js仓库
非mock规则示例