12、使用mockjs模拟前后端交互

新手前端爱好者如果想尝试体验前后台分离开发，可以使用mockjs模拟后台请求数据， mockjs可以生成随机数据，拦截 Ajax 请求，体验独立于后端进行开发。并且支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

1、mockjs的使用方法

以vue-cli脚手架初始化项目为例，使用axios进行数据请求

（1）、安装axios与mockjs，命令如下

npm install axios --save
npm install mockjs --save-dev

(2)、安装完成后,在main.js主文件中引入axios和mockjs

import axios from 'axios'
// axios引入全局
Vue.prototype.$axios = axios
// 全局引入mockjs
process.env.MOCK ? require('../src/mock/mock.js') : '';//在开发环境中MOCK为true时才进行mockjs的引入

（3）、在src目录下创建mock文件夹,并创建文件mock.js，如图

mock.js文件

//引入mockjs
const Mock = require('mockjs');
// 创建模拟数据
let testData = [
  {name:"伦伦",sex:"女",aha:"伦伦最美",hh:"哈哈哈"},
  {name:"伦伦",sex:"女",aha:"伦伦最漂亮",hh:"哈哈哈"},
  {name:"伦伦",sex:"女",aha:"伦伦最温柔",hh:"哈哈哈"},
];
// Mock.mock( 请求路径url, 请求方式post/get , 返回的数据)；
Mock.mock( '/getMockData', 'get' , testData)

（4）、在组件中使用方式

结果数据返回以及页面效果