mockJs基础用法

什么是mockJs

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

参考文档：http://mockjs.com/examples.html

为什么使用mockJs

如果后端接口还未开发完成，我们自己手动模拟后端接口返回随机数据完成交互功能

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

使用mockJs

通过vue-cli创建基本项目

• 在项目中安装mock

  npm install mockjs
  

• 在项目中新建mock文件夹，在mock文件夹中创建index.js

  //引入mock模块
  import Mock from 'mockjs';
  

• 将mock文件夹的index.js文件在main.js中导入

  import Vue from 'vue'
  import App from './App.vue'
  import './mock/index.js'
  
  
  new Vue({
    render: h => h(App),
  }).$mount('#app')
  

mock语法

生成字符串

• 生成指定次数字符串

  const data = Mock.mock({
      "string|4": "yx！"
  })
  console.log(data)
  

• 生成指定范围长度字符串

  const data = Mock.mock({
      "string|1-8": "yx"
  })
  console.log(data)
  

生成文本

• 生成一个随机字符串

  const data = Mock.mock({
      "string": "@cword"
  })
  console.log(data)
  

• 生成指定长度和范围

  const data = Mock.mock({
      string: "@cword(1)",
      str: '@cword(10,15)'
  })
  console.log(data)
  

生成标题和句子

• 生成标题和句子

  const data = Mock.mock({
      title: "@ctitle",
      sentence: '@csentence'
  })
  console.log(data)
  

• 生成指定长度的标题和句子

  const data = Mock.mock({
      title: "@ctitle(8)",
      sentence: '@csentence(50)'
  })
  

• 生成指定范围的

  const data = Mock.mock({
      title: "@ctitle(5,8)",
      sentence: '@csentence(50,100)'
  })
  console.log(data)
  

生成段落

• 随机生成段落

  const data = Mock.mock({
      content: '@cparagraph()' 
  })
  console.log(data)
  

生成数字

• 生成指定数字

  const data = Mock.mock({
      "number|80": 1
  })
  console.log(data)
  

• 生成范围数字

  const data = Mock.mock({
      "number|1-999": 1
  })
  console.log(data)
  

生成增量id

• 随机生成标识

  const data = Mock.mock({
      id: '@increment()'
  })
  console.log(data)
  

生成姓名-地址-身份证号

• 随机生成姓名-地址-身份证号

  const data = Mock.mock({
      name: '@cname()',
      idCard: '@id()',
      address: '@city(true)' // 如果@city(),只会生成市，如果@city(true)会生成省和市
  })​
  console.log(data)
  

随机生成图片

• 生成图片：

    const data = Mock.mock({
        image: "@image('300x300', '#50B347', '#FFF', 'Mock.js')"
    })
    console.log(data)
  

• 参数1：图片可选大小

  [
      '300x250', '250x250', '240x400', '336x280','180x150', '720x300', '468x60', '234x60', 
      '88x31', '120x90', '120x60', '120x240','125x125', '728x90', '160x600', '120x600','300x600'
  ]
  

• 参数2：图片背景色

• 参数3：图片前景色

• 参数4：图片格式

• 参数5：图片文字

生成时间

• @Date

• 生成指定格式时间：@date(yyyy-MM-dd hh:mm:ss)

  const time = Mock.mock({
      time1: '@date()', // 只有年月日
      time2: '@date(yyyy-MM-dd hh:mm:ss)'
  })
  console.log(time) 
  

指定数组返回的条数

• 指定长度：'data|5'

• 指定范围：'data|5-10'

  const data = Mock.mock({
      'list|50-99':[
          {
              name: '@cname()',
              address: '@city(true)',
              id: '@increment(1)' // 每次都增加1
          }
      ]
  })
  

mock拦截请求

• 在项目中安装axios

  npm install axios
  

• 在 main.js 文件引入

  import axios from 'axios'
  

• 在mock文件夹的index.js文件中写mock语法

定义不携带参数的get请求

Mock.mock('/api/get/user','get',()=>{
    return {
        status: 200,
        message: '获取新闻列表数据成功'
    }
})

定义post请求

Mock.mock('/api/post/user','post',()=>{
    return {
        status: 200,
        message: '添加新闻列表数据成功'
    }
})

• 在 App.vue 文件发送请求