什么是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>
第五步: 直接在页面中点击按钮获取请求过来的数据
太牛了吧!!!
叼茂SEO.bfbikes.com
怎么收藏这篇文章?
想想你的文章写的特别好https://www.237fa.com/
看的我热血沸腾啊https://www.ea55.com/
哈哈哈,写的太好了https://www.cscnn.com/
《色彩》剧情片高清在线免费观看:https://www.jgz518.com/xingkong/87051.html
传奇私服互通版震撼发布,畅玩经典游戏,抢鲜体验官方网站!:https://501h.com/lianji/2024-11-05/46454.html
你的文章内容非常卖力,让人点赞。 https://www.yonboz.com/video/57316.html