Vue实战044：Mockjs模拟服务器Api接口并返回数据详解

　　前言

　　现在越来越多项目都采用前后端分离模式开发，这样前后端就可以同时开发，而且互不影响。但是目前项目跟进的很紧，没什么时间写后台，但是前端没接口测试可能会隐藏很多bug，到后面再来排查就麻烦了。所以在后端接口没有开发之前，我打算先用mockjs模拟下后端服务器，生成模拟的假数据，以便于顺利进行前端的开发工作。

　　

　　什么是Mockjs

　　Mockjs 是一款模拟数据生成工具，模拟 Ajax 请求，通过随机生成数据来模拟各种业务场景并返回模拟数据，帮助前端在后台未提供接口时实现独立开发。Mockjs支持的随机数据类型很丰富，包括文本、数字、布尔值、日期、邮箱、链接、图片、颜色等等，足够我们开发使用了。

　　

　　安装Mockjs

　　mockjs只用于开发环境实现模拟数据，而生产环境有真正的后台服务器因此需要mockjs，因此在安装mockjs的时候记得带上参数 --save-dev，进入到项目目录，执行指令：npm i mockjs --save-dev

　　

　　mockjs使用

　　最简单的方式就是直接新建一个mock.js文件，然后引入mockjs插件，设置一个延迟时间虚拟服务器响应效果，然后通过Mock.mock拦截请求并随机生成数据返回。

　　import Mock from 'mockjs' //引入mockjs

　　Mock.setup({

　　timeout: 500 //延迟效果

　　})

　　//拦截请求并返回数据

　　Mock.mock('login/', 'post', {

　　'code': 200, // 状态码

　　'userid': '@id()', // 随机生成用户id

　　'username': '@cname()', // 随机生成中文名字

　　'date': '@date()', // 随机生成日期

　　'avatar': "@image('200x200','red','#fff','avatar')", // 生成图片

　　'description': '@paragraph()', // 描述

　　'ip': '@ip()', // IP地址

　　'email': '@email()'// email

　　})

　　数据结构

　　在mockjs的数据结构中，每个属性可以由三部分构成：属性名（name），规则（rule），值（value），即'name|rule': value（属性名 和 规则 之间用竖线 | 分隔，且规则是可选的），属性值可以是字符串 String、数字 Number、布尔型 Boolean、对象 Object、数组 Array、函数 Function、正则 RegExp等，例如：

　　'name|min-max': string //随机生成字符串，重复次数大于等于min，小于等于max。

　　'name|count': string //随机生成字符串，重复次数count。

　　'name|+1': number //初始值为 number，每次生成属性值自动加 1。

　　'name|min-max': number //随机生成整数，且大于等于min、小于等于max 。

　　'name|min-max.pmin-pmax': number //随机生成浮点数，且大于等于min、小于等于max ，小数部分保留pmin到pmax位。

　　数据占位符

　　在前面的随机数据中我们可以看到属性值中有个@占位符，这里是用 @来标识其后的字符串是占位符，这样在调用Mock.mock就会引用Mock.Random中的方法实现数据的随机生成，Mock.Random 是Mock提供的一个用于生成各种随机数据的工具类，支持多种类型和方法。我们可以通过Mock.Random.Method()或者'@Method'来实现以下方法：

　　

　　组件中使用

　　Mock的好处就是不需要修改前端代码，那么在前端中还是正常的对接API接口即可，如果你封装了axios注意把axios.defaults.baseURL属性注释掉，除非你想在Mock每次都添加完整的api路径，以下是我封装了axios的写法，如何封装可以参考：Vue实战037：axios二次封装和使用。

　　//以下是我封装了axios的写法

　　handleLogin(){

　　this.loading=true

　　login('post',{

　　username:this.loginForm.username,

　　password:this.loginForm.password,

　　}).then(res=>{

　　if(res.code===200){

　　this.loading=false

　　console.log("登录成功")

　　}

　　})

　　},

　　代码整理

　　像刚开始那么写当我们数据和接口一多起来就不方便维护了，所以这里我们重新整理下，新增个data.js文件专门存放数据，index.js则负责定义各个接口方法和数据返回即可，data中我们用module.exports导出对象，index中先用Mock.mock(data)生成数据，在后面的接口中我们只要直接通过database.userinfo来获取对应的数据即可。

　　//index.js

　　import Mock from 'mockjs'

　　import data from './data.js'

　　Mock.setup({

　　timeout: 500

　　})

　　var database=Mock.mock(data)

　　Mock.mock('login/', 'post', req=> {

　　return database.userinfo

　　})

　　//data.js

　　module.exports={

　　'userinfo': {

　　'code': 200,

　　'userid': '@id()', // 随机生成用户id

　　'username': '@cname()', // 随机生成中文名字

　　'date': '@date()', // 随机生成日期

　　'avatar': "@image('200x200','red','#fff','avatar')", // 生成图片

　　'description': '@paragraph()', // 描述

　　'ip': '@ip()', // IP地址

　　'email': '@email()'// email

　　}

　　}