一、mockjs定义
拦截
ajax
请求,生成伪数据
应用场景:在工作中,后端已经出接口文档,还没有实现代码
由前端依照接口文档模拟伪数据,实现前端开发功能
二、mockjs安装
npm i mockjs -D
三 、mockjs使用
- 1定义
/mock/index.js
import Mock from 'mockjs'
Mock.mock(" /api/feed",{json数据})
- 2在
main.js
导入
import '../mock/index.js'
此时发送
ajax
请求访问/api/feed
就会被mock
拦截,获取到json
模板对应的虚拟数据,并且在浏览器的network
之中看不到发起的请求,如果需要在network
中看到发起的请求可以利用devserve
拦截请求,仅使用mock
生成模拟数据
四、mockjs方法
mock(data)
mock(url,data)
mock(url,type,data)
mock(url,type,function)
data:数据
url:拦截地址(可以是正则)
type:拦截请求类型(post,get,put,delete),默认get请求
function:通过函数返回数据,参数用config 请求的配置
五、mockjs语法
"id":"@id"
"star|1-2":"⭐" 字符串重复1-2次
"price|100-200.2-3”小数点2-3位
"data | 10"";[{name:"名称")]数组的内容重复10遍
"live | 1":true,随机返回true,false
"tel":/13\d{9}/ 手机号码
"des":function(){ return this.start+this.price}
"name":"@cname" 表示中文名称
"address":"@country(true)" 地址
"description":"@cparagraph(1,3)”随机段落2-3行
"pic":@datalmage(200x100);图示"
更多语法示例可以到官网的示例中:http://mockjs.com/examples.html