热点新闻
mock基本使用
2023-07-11 06:38  浏览:2670  搜索引擎搜索“混灰机械网”
温馨提示:信息一旦丢失不一定找得到,请务必收藏信息以备急用!本站所有信息均是注册会员发布如遇到侵权请联系文章中的联系方式或客服删除!
联系我时,请说明是在混灰机械网看到的信息,谢谢。
展会发布 展会网站大全 报名观展合作 软文发布

一、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

发布人:1103****    IP:117.173.23.***     举报/删稿
展会推荐
让朕来说2句
评论
收藏
点赞
转发