写在前面：
如本文描述有错误，希望读到这篇文章的您能够提出批评指正。 联系方式：172310978@qq.com
参考文章：
- https://codeantenna.com/a/2aPWyigHYM#:~:text=%E6%88%91%E4%BB%AC%E4%BD%BF%E7%94%A8mock,%E6%95%B0%E6%8D%AE%EF%BC%8C%E4%BB%A5%E6%A8%A1%E6%8B%9F%E6%8E%A5%E5%8F%A3
mock的基础用法及安装
为什么要使用mock
其实是后端接口未完成编写，此时前端无法使用接口，这时mock就派上极大的用途。
我们使用mock进行数据拦截（数据未发出之前就被mock拦截）同时返回特定的数据，以模拟接口
如何安装mock？
找到所需要安装的位置,安装mock
使用
定义规则，拦截请求，返回数据
建了一个@/utils/mock.js文件
1
2
3
4
5
6
7
8
9
10
| // 导入mock
import Mock from "mockjs";
//拦截Ajax请求生成伪数据
// 只要网络地址匹配到这个正则就会拦截
Mock.mock(/\\/v5\\/list/, {
name: 'baize',
age: 18
})
|
在main.js中 导入mock
请求数据
1
2
3
4
5
6
7
8
9
10
11
12
13
| import axios from "axios"
export default{
created(){
axios
.get("/v5/list")
.then(res => {
console.log("模拟数据", res.data)
})
.catch(err => {
console.log(err);
})
}
}
|
mock常用的语法
@cname生成姓名
随机生成1-100之间
随机生成25-50之间小数点后2-5位
随机生成1-5个★
随机生成8-14位的标题
1
| "title": "@ctitle(8,14)",
|
随机生成段落
1
| "description": "@cparagraph",
|
随机ture或false
随机从数组中生成2-10个数据的Array
1
| "friend | 2-10": \["小红", "小绿", "小蓝"\],
|
随机从Object中生成2个数据的Object
1
2
3
4
5
6
7
8
9
| "des|2": {
"eye": 1,
"hand": 2,
"job": "teacher"
},
|
随机生成1开头11位的字符串
随机生成邮箱
1
| "email": /\[a-z\]{2,6\]@(126|163|qq)\\.(com|cn|net)/,
|
随机生成函数内的数据并运行函数
1
2
3
4
5
6
7
| "canMerry": function () {
if (this.age > 22) {
return true;
} else {
return false;
}
},
|
随机生成日期
1
| "day": "@date( 'yyyy-MM-dd' )",
|
随机生成时间
1
| "time": "@time( 'HH:mm:ss' )",
|
随机生成城市地点
1
| "add": "@county(true)",
|
随机生成200x180图例
1
| "avatar": "@dataImage('200x180','图例')"
|
更多相关推荐
php namespace及use的用法
Mock.js相关知识点
NumPy基础及取值操作 educoder头歌实践作业
CMD的几个常用用法
python 下划线的不同用法
文章随机推荐