VUE学习（九） 还在傻傻的等后台的数据？快用mockjs吧

前端开发最重要的一环就是后台数据的对接，而现实情况往往后台不会及时的提供测试数据。没有数据，我们就只能傻傻的等着么？不，有了mockjs只要后台定义出返回格式，我们可以自己动手，丰衣足食！

 mockjs安装

先啰嗦几句，mockjs是拦截axios的请求，并返回我们自己造的数据，使用时将mockjs安装在开发环境即可。

npm i mockjs --save-dev

建目录

在src目录下任何你喜欢的位置，新建文件夹/mock/index.js  名字随意。

在main.js中引入我们建的这个文件

import mock from '@/views/record/mock/index'

import mock from '../mock/index' //引入文件，当需要调取后台时，注释掉该行即可

做数据

import Mock from 'mockjs'


var Random = Mock.Random;
//返回包装 
function baseRes(data){
	return {
		code:'200',
		msg:'',
		data:data
	}
}
//所有模板
function getData(){
	
	let list =  Mock.mock({
	  "array|0-10": [
	    {
	      "col1":'@word(1, 5)',
	      "col2":"@ctitle(2, 8)",
	      "childList|1-5":[
	      	{
	      	  "cc1": '@word(1, 5)',
	          "cc2": "@ctitle(2, 8)",
	          "cc3": "string",
	          "cc4": "string",
	          "cc5": "string",
	          "id": "@id"
	       
	      	}
	      ]
	    }
	  ]
	})
	return baseRes(list)
}



//常规写法
Mock.mock('/api/v1/tpl/test/getdata/', 'get', () => {  

  return getData()  //所有模板
})




//这种是用的正则的方式进行匹配，如果不这样写，get请求传参改变时无法拦截
Mock.mock(/api\/v1\/test/, 'get', () => {  
  return getData() 
})

搞定！