mockJS

mockjs：模拟数据

安装方式

1. cnpm install mockjs -S
2. 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);
    }