在vue中如何使用Mock.js模拟数据
让前端攻城师独立于后端进行开发。
1、环境搭建
安装
npm install mockjs
在src目录下新建mock文件夹并创建index.js来使用mockjs,然后在main.js中引入这个文件。
main.js
import Vue from 'vue'
import App from './App.vue'
//引入模拟的数据
import './mock/index.js'
new Vue({
render: h => h(App),
}).$mount('#app')@mock/index.js
//引入mockjs import Mock from 'mockjs';
2、Mock 语法规范
Mock.js 的语法规范包括两部分：
- 数据模板定义规范（Data Template Definition，DTD）
- 数据占位符定义规范（Data Placeholder Definition，DPD)
数据模板定义规范 DTD
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值。
// 属性名 name // 生成规则 rule // 属性值 value 'name|rule': value
注意：
属性名和生成规则之间用竖线 | 分隔。
生成规则是可选的。
生成规则有7种格式：
- "name|min-max":value
- "name|count":value
- "name|min-max.dmin-dmax":value
- "name|min-max.dcount": value
- "name|count.dmin-dmax": value
- "name|count.dcount": value
- "name|+step": value
生成规则 的 含义 需要依赖 属性值的类型 才能确定。
- 属性值中可以含有 `@占位符`。
- 属性值还指定了最终值的初始值和类型。
2.1、生成规则和示例：根据属性值的不同
属性值是字符串 String
"name|min-max": string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
"name|count": string
通过重复 string 生成一个字符串，重复次数等于 count。
属性值是数字 Number
"name|+1": number
属性值自动加 1，初始值为 number。
"name|min-max": number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
"name|min-max.dmin-dmax": number
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位
属性值是布尔型 Boolean
"name|1": boolean
随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
"name|min-max": value
随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
属性值是对象 Object
"name|count": object
从属性值 object 中随机选取 count 个属性。
"name|min-max": object
从属性值 object 中随机选取 min 到 max 个属性。
属性值是数组 Array
"name|1": array
从属性值 array 中随机选取 1 个元素，作为最终值。
"name|+1": array
从属性值 array 中顺序选取 1 个元素，作为最终值。
"name|min-max": array
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
"name|count": array
通过重复属性值 array 生成一个新数组，重复次数为 count。
属性值是函数 Function
"name": function
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
属性值是正则表达式 RegExp
'name': regexp
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串
数据占位符定义规范 DPD
- 占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符的格式为：
- @占位符
- @占位符(参数 [, 参数])
注意：
- 用 @ 来标识其后的字符串是占位符占位符引用的是 Mock.Random 中的方法
- 通过 Mock.Random.extend() 来扩展自定义占位符
- 占位符也可以引用数据模板中的属性
- 占位符会优先引用数据模板中的属性
- 占位符支持相对路径和绝对路径
Mock.mock({
//这里的email、phone、last等都是在Mock.Rndom里的方法
name: {
//@是语法糖,不使用@ 就需要 Mock.Rndom.email()
first: '@email',
middle: '@phone',
last: '@LAST',
full: '@first @middle @last'
}
})2.2、发送get请求
@mock/index.js
//引入mockjs
import Mock from 'mockjs';
//get请求
//书写模拟数据
let userInfo = Mock.mock({
//属性名 | 生成规则 : 属性值
"userInfo|5-10": [
{
"id|+1": 1,
//关于属性值@指向的 Mock.Random 中的方法,详情可以去官方文档
//这里属性名没有特殊符号啥的,所以 "name" 可简写为 name
name: "@cname()",
address: "@city(true)",
email: "@email(163.com)",
userImg: "@image('200x100')",
date: "@date(yyyy-MM-dd hh:mm:ss)",
title: "@ctitle(3,5)",
},
],
});
//json-server会提供给我们接口地址,mockjs需要我们自己写
//写接口,并提供返回值
Mock.mock("/user/list", "get", () => {
return {
code: 200,
message: "get请求成功",
data: userInfo,
total: userInfo.length,
};
});//如果自己生成数据,可以直接写,提供一个请求接口就行
let add = [
{
"id": "1",
"imgUrl": "/images/banner1.jpg"
},
{
"id": "2",
"imgUrl": "/images/banner2.jpg"
},
{
"id": "3",
"imgUrl": "/images/banner3.jpg"
},
]
Mock.mock('/lyc', 'get', () => add)使用模拟数据
<script>
import axios from "axios";
export default {
async created() {
let res = await axios.get("/user/list");
console.log("get请求", res.data);
let res1 = await axios.get("/lyc");
console.log(res1.data);
},
};
</script>2.3、发送post请求
//引入mockjs
import Mock from 'mockjs';
let { newData } = Mock.mock({
"newData|1-3": [
{
//随机生成 2 句话
companyDescription: "@cparagraph(2)",
//从属性值 `array` 中按顺序选取 1 个元素，作为最终值。
"positionTitle|+1": [
"Java开发工程师",
"Python开发工程师",
"前端开发工程师",
"产品经理",
],
//从属性值 `array` 中随机选取 1 个元素，作为最终值。
"degree|1": ["本科", "硕士", "博士", "专科"],
//随机生成5个单词
jobDescription: "@word(5)",
},
],
});
Mock.mock("/api/user", "post", (data) => {
console.log(data);
return {
status: 200,
message: "post请求成功",
data: newData,
};
});使用模拟数据
<script>
import axios from "axios";
export default {
async created() {
let res2 = await axios.post("/api/user", { name: "帅比" });
console.log(res2);
},
};
</script>3、Mockjs配合fastmock使用
使用fastmock配合mock生成模拟数据,不用做以上步骤,只需要把mock生成数据的代码写在接口里就行。也就是前面的都不用看,找上面的 2.1、生成规则和示例：根据属性值的不同就行。
一些例子
- 生成随机11位数字---手机号
phone:”@string(‘number',11)”
- 随机生成中文姓名
name:”@cname()”
- 生成随机图片
imgUrl:”@image(‘200x200',#eee)”
- 生成随机句子
juzi:”@csentence()”
- 生成随机id
"categoryId":"@string(number,1,2)",
使用fastmock
登录注册后，新建项目后到这个页面，点红色框
把我们之前的mockjs代码写这，保存就行
使用模拟数据接口
//直接书写mockjs代码生成路径,直接使用就行,mockjs都不用安装
<script>
import axios from "axios";
export default {
async created() {
let res3 = await axios.get(
"https://www.fastmock.site/mock/371c1959a072aa34e8a7485e44262576/api/user"
);
console.log("res3", res3.data);
},
};
</script>普通html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
function lyc() {
axios.get(
"https://www.fastmock.site/mock/371c1959a072aa34e8a7485e44262576/api/user"
).then(
res => { console.log(res.data); }
);
}
lyc()
</script>
</body>
</html>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中$set的使用(结合在实际应用中遇到的坑),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
一文详细聊聊vue3的defineProps、defineEmits和defineExpose
vue3官方文档defineProps和defineEmits都是只能在scriptsetup中使用的编译器宏,下面这篇文章主要给大家介绍了关于vue3的defineProps、defineEmits和defineExpose的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了在vue项目中使用Swiper插件详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue中h5端打开app(判断是安卓还是苹果),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了如何解决vue在ios微信"复制链接"功能问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了Vue+ElementUI容器无法铺满网页的问题解决,文章通过图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-08-08
这篇文章是介绍一下vue3中的hooks以及它的用法，主要围绕两点来介绍，一个是hooks基本概念，另一个是vue3中hooks的使用方法，本文结合实例代码给大家讲解的非常详细，需要的朋友参考下吧2023-03-03
ElementUI是一套基于VUE2.0的桌面端组件库,ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面,本文给大家分享elementui简易介绍,感兴趣的朋友一起看看吧2024-01-01
我们通过原理讲解以及代码实例给大家分享了关于VUE实现移动下拉刷新的功能，有的朋友可以跟着学习下。2018-04-04
基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」
uv3-table：一款基于uniapp+vue3跨端自定义手机端增强版表格组件,支持固定表头/列、边框、斑马纹、单选/多选,自定义表头/表体插槽、左右固定列阴影高亮显示,支持编译兼容H5+小程序端+App端,H5+小程序+App端,多端运行一致2024-05-05
最新评论