前端mock的快速上手

  在前端开发过程中，经常会和后端进行联调，但是后端没有接口的情况下前端就在静静的等候后端提供接口而没有继续的进展，从而导致开发进度缓慢，mock就是为了解决这个问题而生，他会生成随机数据，拦截 Ajax 请求,从而进行前端自定义返回假数据，这就是mock的主要作用。
  下载方式

npm install mock.js --save

  引入并使用mock进行拦截

const Mock = require('mockjs')

使用mock制造假数据

const data= Mock.mock({
  //name:生成对象里面的数据
  // ‘|’分隔符，后面的数字代表生成多少条数据，指定生成5条数据就会这样写'name|5:[]'
  //随机生成范围内的数据如下的下发 ，这样就生成1~10条这样的数据
  'name|1-10': [
    {
      data:"测试数据"
    }
  ]
})

输出格式如下，这样边会输出一个对象数组，

mock也会随机生成数据，接下来举个特别简单的例子

var Mock = require("mockjs");
var Random = Mock.Random;

  let obj = {
   id: Random.id(), // 身份证号
   guid: Random.guid(),
   //类似cname(),cword()这类的函数，如果不带c的话生成的是英文字符串，c是代表Chinese的意思
   name: Random.cname(),
   age: Random.integer(20, 50),
   asset: Random.float(200, 500000, 1, 6),
   married: Random.boolean(),
   birth: Random.datetime("yyyy-MM-dd HH:mm:ss"),  // 值是指定格式的日期字符串
   birth2: new Date(Random.datetime("yyyy-MM-dd HH:mm:ss")),  // 值是 Date 类型
   addr: `${Random.province()}-${Random.city()}-${Random.county()}`,
   email: Random.email("qq.com"),
   word: Random.cword(2, 5),
   string: Random.string(),
   title: Random.ctitle(10, 15),
   senetence: Random.csentence(15, 20),
   paragraph: Random.cparagraph(),
  };
  console.log(obj);
  /**********************************************************************/
  id: '130000198405266751',
  guid: '4eAD105F-77F2-BccD-dB1d-3C70bFC71fE8',
  name: '萧娜',
  age: 37,
  asset: 336507.64,
  married: true,
  birth: '2008-12-23 18:39:11',
  birth2: 1983-11-01T22:18:52.000Z,
  addr: '贵州省-重庆市-巴南区',
  email: 'u.mbht@qq.com',
  word: '族现制万类',
  string: 'AH6H',
  title: '期对油状已边自划现新龙',
  senetence: '二号究克共或党县团或革亲事离容却进压今。',
  paragraph: '任派十专层件离想相样构支边八代取还展。反与但角量及亲矿元加节做改经动存。成总节江上对山型儿除土价比两。严书广由京江家养专员将即革土眼如快。

以上为mock的随机生成数据，mock最常用的还是拦截axios的请求进行模拟后端接口

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

rurl: 表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。
rtype: 表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template: 表示数据模板，可以是对象或字符串。如果需要要把数据写死，可以直接写一个普通的对象。如果要让Mock随机生成，可以根据Mock模板的规则自定义，
最常用的是传入一个callback函数，这个运算结果就是最后拦截的路径的返回值
  mock的封装使用

//创建一个假数据 随机生成2-6条对象合并到一个数组
const {arr} = Mock.mock({
	'arr|2-6':{
	   id: Random.id(),
	   guid: Random.guid(),
	   name: Random.cname(),
	   age: Random.integer(20, 50)
   }
})
/** 这样的好处是数据和请求的url分离，清晰明了 */
const data = {
	url:"userInfo",
	method:"get",
	success:()=>{
	  return arr
	}
}
//
Mock.mock(data.url, data.method, (params) => {
    return {
      code: '0',
      msg: 'success',
      data: data.success()
    };
  });

//请求数据
axios.get("userInfo",'get').then(res=>{
	console.warn(res)
})

这样便成功进行数据拦截