快速入门——前端数据模拟MockJS

B栈跟着老师视频自学,仅供参考~~~

基本使用

在项目中创建mock目录,新建index.js文件

//引入mockjs

import Mock from 'mockjs'

//使用mockjs模拟数据

Mock.mock('/product/search',{

"ret":0,

"data":{

"mtime":"@datetime" , //随机生成日期时间

"score|1-800":800, //随机生成1-800的数字

"rank|1-100":100,

"stars|1-5":5,//随机生成1-5的数字

"nickname":"@cname",//随机生成中文名字

}

}) ;

组件中调用mock.js中模拟的数据接口,这时返回的response就是mock.jd中用Mock.mock(

'url',data)中设置的data

import axios from 'axios'

export default{

mounted: function(){

axios.get("/product/search").then(res =>{

console.log(res)

})

}

}

核心方法

Mock.mock(rurl?,rtype?,template|function(options))

rurl需要拦截的URL,可以是URL字符串或URL正则

rtype需要拦截的Ajax请求类型,例如GET,POST,PUT,DELETE等

template表示数据模板,可以是对象或字符串

function表示用于生成响应数据的函数

设置延时请求到数据

//延时400ms请求到数据

Mock.setup({

timeout: 400

})

//延时200-600毫秒请求到数据

Mock.setup({

timeout: '200-600'

})

数据生成规则

mock的语法 规范包含两层规范:数据模板DTD,数据占位符DPD

数据模板中的每个属性由三个部分组成,属性名name,生成规则rule,属性值value

'name|rule':value

属性名和生成规则之间用竖线|分隔,生成规则是可选的,有7中格式:

相关推荐
zhangxingchao13 分钟前
关于Android 构建流程解析的一些问题
前端
zheshiyangyang29 分钟前
Vue+ElementPlus的一些问题修复汇总
前端·javascript·vue.js
怣疯knight36 分钟前
CryptoJS库中WordArray对象支持哪些输出格式?除了toString() 方法还有什么方法可以输出吗?WordArray对象的作用是什么?
前端·javascript
患得患失9491 小时前
【前端】【面试】【树】JavaScript 树形结构与列表结构的灵活转换:`listToTree` 与 `treeToList` 函数详解
开发语言·前端·javascript·tree·listtotree·treetolist
i建模1 小时前
Windows前端开发IDE选型全攻略
前端·ide·windows·node.js·编辑器·visual studio code
hamburgerDaddy11 小时前
从零开始用react + tailwindcs + express + mongodb实现一个聊天程序(三) 实现注册 登录接口
前端·javascript·mongodb·react.js·前端框架·express
用户51017613438682 小时前
Node.js接入DeepSeek实现流式对话
前端·后端
ClaNNEd@2 小时前
001第一个flutter文件
前端·flutter
希冀1232 小时前
【CSS】less基础(简单版)
前端·css·less
林涧泣2 小时前
【uniapp-Vue3】beforeRegister在注册用户入库前设置初始用户
前端·vue.js·uni-app