侧边栏壁纸
  • 累计撰写 23 篇文章
  • 累计收到 48 条评论

mock的基本用法

Zuiet
2022-09-18 / 9 评论 / 718 阅读 / 正在检测是否收录...

什么是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规则示例

0

评论 (9)

取消
  1. 头像
    王哥
    Windows 10 · Google Chrome

    太牛了吧!!!

    回复
  2. 头像
    kwgggcbcbe
    Windows 10 · Google Chrome

    叼茂SEO.bfbikes.com

    回复
  3. 头像
    pxegcrtisc
    Windows 10 · Google Chrome

    怎么收藏这篇文章?

    回复
  4. 头像
    larzzagtnr
    Windows 10 · Google Chrome

    想想你的文章写的特别好https://www.237fa.com/

    回复
  5. 头像
    jjzmgaouvf
    Windows 10 · Google Chrome

    看的我热血沸腾啊https://www.ea55.com/

    回复
  6. 头像
    srtjutoicf
    Windows 10 · Google Chrome

    哈哈哈,写的太好了https://www.cscnn.com/

    回复
  7. 头像
    ptsqslxiat
    Windows 10 · Google Chrome

    《色彩》剧情片高清在线免费观看:https://www.jgz518.com/xingkong/87051.html

    回复
  8. 头像
    pnulpsiyrr
    Windows 10 · Google Chrome

    传奇私服互通版震撼发布,畅玩经典游戏,抢鲜体验官方网站!:https://501h.com/lianji/2024-11-05/46454.html

    回复
  9. 头像
    emzdfjmaga
    Windows 10 · Google Chrome

    你的文章内容非常卖力,让人点赞。 https://www.yonboz.com/video/57316.html

    回复