MockJs

MockJs

1.什么是mockJs

• 生成随机数据，拦截Ajax请求

2.为什么要使用mockJs

原因：

• 在实际开发当中，由于后端接口还没有完成，前端为了不影响工作效率，需要自己模拟数据后端接口返回数据

解决：

• 采用json数据模拟，生成数据比较繁琐，也比较有局限性，没办法达到增删改查
• 采用mockJs进行数据模拟，可以模拟各种场景（get,post）生成接口，并随机生成数据，还可以进行增删改查

3.使用mockJs

使用vue-cli创建基本的vue项目

• vue create 项目名称
  //如下步骤参考vue项目创建
  

安装mockJs

• npm install mockjs
  //or
  npm install mockjs --save-dev（推荐）
  

在src目录下创建mock文件夹，并在该文件夹中创建index.js文件

• //index.js的写法
  let Mock = require('mockjs')//引入mockjs
  //这里可以使用解构赋值，拿到data(数组)，使用数组的方法实现增删
  let data = Mock.mock({
      'list|20-60':[{//名字叫做list的数组，里面元素个数在20-60之间
      	name:'@cname()',//中文名字的占位符
      	id:'@id()',
      	address:'@city(true)'//括号内的true意思是开启省前缀
      }]
  })
  // 输出结果
  console.log(data)
  

在main.js中引入

• //main.js
  import './mock/index.js'//到时后端接口好了就注释掉这一行就成
  

4.使用语法（官网语法）

数据模板定义规范DTD

• 'name|rule':value
  //name : 属性名
  //rule : 生成规则
  //value : 属性值
  

  注意：

  • 属性名 和 生成规则 之间用竖线|分割。
  • 生成规则是可选的。
    • ‘name|min-max’:value
    • ‘name|count’:value
    • ‘name|min-max.dmin-dmax’: value
    • ‘name|min-max.dcount’: value
    • ‘name|count.dmin-dmax’: value
    • ‘name|count.dcount’: value
    • ‘name|+step’: value
  • 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
  • 属性值 中可以含有@占位符。
  • 属性值 还指定了最终值的初始值和类型。

生成规则示例：

1. 属性值是字符串 String

   • 'name|min-max': string
     

     ​ 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

   • 'name|count': string
     

     ​ 通过重复 string 生成一个字符串，重复次数等于 count。

2. 属性值是数字 Number

   • 'name|+1': number
     

     ​ 属性值自动加 1，初始值为 number。

   • 'name|min-max': number
     

     ​ 生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

   • 'name|min-max.dmin-dmax'