mockjs:模拟数据
安装方式
- cnpm install mockjs -S
- yarn add mockjs
引入
-
const Mock=require("mockjs")
创建接口
-
//在index.js中使用 const Mock=require("mockjs"); const url=require("url"); const data=Mock.mock({ "data|20":[//创建一个date里面有20条数据 { "id|+1":1, //id从1开始自增1 "username":"@name", //生成name数据 "tel":"/^1(3|5|7|8|9)\d{9}$/", //生成电话号 "urlPic":"@image('200X200','#css','#fff','Alley')", //生成一个200X200背景颜色为#css字体颜色为#fff,内容为Alley的图片 "address":"@county(true)",//生成一个地址 "time":"@now()",//生成一个时间戳 "text":"@cparagraph()" } ] })
Mock.mock()请求数据库中的数据
-
参数1:请求的地址
-
参数2:请求的类型(小写)
-
参数3:回调
-
Mock.mock(/\users\list/,"get",(options)=>{ return options })
-
//解析请求
Mock.mock(/\/users\/list/,"get",(options)=>{ let {page,limit}=url.parse(options.url,true).query; var obj={ code:200, errMeg:"", data:{ list:[] } } for(var i=(page-1)*limit;i<Math.min(data,data.length,page*limit);i++){ obj.data.push(data.data[i]); } return obj; })
-
请求 axios({ method:"get", utl:"/users/list", params:{ page:1, limit:10 } })
-
//post Mock.mock(/\/users\/list/,(options)=>{ let {page,limit}=JSON.parse(options.body) })
前端请求接口
-
现在入口文件中引入创建好的mockJS接口
-
import "./mock"
-
-
然后在需要请求数据的地方写请求
-
axios({ method:"get", url:"/users/list", params:{ //post传参时使用data } }).then(data)=>{ console.log(data); }
-