mock模拟数据，get、post请求
一、为什么使用mockjs
在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口
1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查 2.使用json-server模拟，但不能随机生成所需数据 3.使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查
二、mock优点
1.前后端分离， 2.可随机生成大量的数据 3.用法简单 4.数据类型丰富 5.可扩展数据类型 6.在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。
三、使用mockjs
（1）在项目中安装mock
npm install mockjs --save(2)导入mock
import Mock from 'mockjs'四、mock语法
1.生成字符串
'name|min-max': string通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
const str=Mock.mock({
"title|2-5":'hello'
})
console.log(str)2.生成数字
（1）'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
const num=Mock.mock({
"num|1-10":100
})
console.log(num)（2）'name|min-max.dmin-dmax': number
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
Mock.mock({
'number1|1-100.1-10': 1,
'number2|123.1-10': 1,
'number3|123.3': 1,
'number4|123.10': 1.123
})
// =>
{
"number1": 12.92,
"number2": 123.51,
"number3": 123.777,
"number4": 123.1231091814
}
（3）生成标题
const title=Mock.mock({
"title":'@ctitle()'
})
console.log(title)（4）生成段落
const center=Mock.mock({
"center":'@cparagraph()'
})
console.log(center)（5）生成增量id
var ids=Mock.mock({
"id":"@increment()"
})
console.log(ids)
for(var i=0;i<4;i++){
var ids=Mock.mock({
"id|":"@increment()"
})
console.log(ids)
}（6）生成姓名-地址-身份证号：
var person=Mock.mock({
name:'@cname()',
IDcard:"@id()",
address:"@city(true)"
})
console.log(person);（7）生成随机图片：
var img=Mock.mock({
img:"@image('300x200','#e1251b','#fff','我是随机图片')"
})
console.log(img)（8）生成时间：
var data=Mock.mock({
time:"@date(yyyy-MM-dd hh:mm:ss)"
})
console.log(data)（9）生成数组：
（1）指定数组返回的条数：
const arr=Mock.mock({
'list|5':[
{
name:'@cname()',
IDcard:"@id()",
address:"@city(true)"
}
]
})
console.log(arr); //生成5组数据（2）指定范围：
const arr=Mock.mock({
'list|2-10':[
{
name:'@cname()',
IDcard:"@id()",
address:"@city(true)"
}
]
})
console.log(arr); //生成2-10组数据五、mock拦截
1.定义get请求：
//1.定义返回的数据
var {newList}=Mock.mock({
'newList|20-30':[
{
id:"@increment(1)",
title:'@ctitle',
updat:'@date(yyyy-MM-dd hh:mm:ss)',
info:'@cparagraph(5,10)',
small:"@dataImage(300x200,电影图片)"
}
]
}) //2.拦截get请求
Mock.mock('api/douban/movie/top250','get',()=>{
return {
status:200,
message:'获取电影列表成功！',
total:newList.length,
list:newList
}
})//3.当我们使用ajax或axios进行数据请求相同的接口事，会被mock拦截
$.ajax({
url:'api/douban/movie/top250',
success:(res)=>{
console.log(res)
}
}) 2.定义get请求传递参数：
(1)正则匹配mock拦截地址
Mock.mock(/\api\/douban\/movie\/top250/,'get',(options)=>{
console.log(options)
return {
status:200,
message:'获取电影列表成功！',
total:newList.length,
list:newList
}
})(2)ajax get请求传递参数
$.ajax({
url:'api/douban/movie/top250',
data:{
start:2,
limit:5
},
success:(res)=>{
console.log(res)
}
}) (3)定义函数把传入的参数取出来
const getParams=(url,name)=>{
//console.log(url,name);
const index=url.indexOf('?');
//console.log(index);
if(index!==-1){
const newArr=url.substring(index+1).split('&');
//console.log(newArr)
for(var i=0;i(4)根据传入的参数返回对应的数据
Mock.mock(/\api\/douban\/movie\/top250/,'get',(options)=>{
//console.log(options)
var pagenum=getParams(options.url,'start');
var pagesize=getParams(options.url,'limit');
console.log(pagenum,pagesize);
//每页截取数据开始的位置：
const start=(pagenum-1)*pagesize;
//每页截取数据结束的位置：
const end=pagenum*pagesize;
//计算总页数
const pages=Math.ceil(newList.length/pagesize);
//判断list
const list= pagenum>pages?[]:newList.slice(start,end);
return {
status:200,
message:'获取电影列表成功！',
total:newList.length,
list:list
}
})3.定义post请求:
(1)定义返回的数据格式：
const {newList}=Mock.mock({
'newList|20':[
{
id:"@increment(1)",
title:'@ctitle',
updat:'@date(yyyy-MM-dd hh:mm:ss)',
info:'@cparagraph(5,10)',
small:"@dataImage(300x200,电影图片)"
}
]
}) （2）定义mock post请求拦截
Mock.mock(’/api/test/user/fileList','post',(options)=>{
console.log(options);
return {
status:200,
message:'请求列表成功！',
total:20,
list:newList
}
})(3)ajax 请求被拦截
$.ajax({
url:'/api/test/user/fileList',
type:'post',
success(res){
console.log(res)
}
})4.定义post带参数请求：
Mock.mock(/\/api\/test\/user\/fileList/,'post',(options)=>{
console.log(options);
var pagenum=getparams(options.body,'start');
var pagesize=getparams(options.body,'limit');
console.log(pagenum,pagesize)
return {
status:200,
message:'请求列表成功！',
total:20,
list:newList
}
})
$.ajax({
url:'/api/test/user/fileList',
type:'post',
data:{
start:2,
limit:5
},
success(res){
console.log(res)
}
})