vue2.x使用mockjs模拟数据

现在都是前后端分离开发，在开发过程中经常遇到后台接口还没有写好，但是前段界面需要跑流程来测试界面交互，这时候就需要通过做一些假数据模拟整个流程，我已我们就使用了mockjs来生成随机数据，拦截 Ajax 请求

1、安装mockjs/axios

cnpm install mockjs --save-dev
cnpm install axios --save-dev

2、在src目录中创建mock -> index.js

3、mock -> index.js文件中定义接口，填充数据

import Mock from 'mockjs'
// 接口地址
Mock.mock('/api/login', (req, res) => {
  return {
    data: [
      {username: 'zxc', password: '123456'}
    ]
  }
})

注意：mockjs有很多方法，可以快速创建数据

4、在main.js中导入mock->index.js文件

import '../src/mock'

5、在组件中使用

import axios from 'axios'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    // mockjs中定义的接口地址
    axios.get('/api/login').then(res => {
      console.log(res)
    })
  }
}

// 基本使用方法
import Mock from 'mockjs'
let Random = Mock.Random
//  一、Mock.mock
// url: 表示需要拦截的 URL，可以是 URL 字符串或 URL 正则
// type: 表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
// template: 表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
// function : 表示用于生成响应数据的函数。

// 1、url, template
Mock.mock('/api/user/list', {
  'array|10': [
    {
      name: 'zxc',
      password: '*****',
      // Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。
      email: '@email',
      age: '@integer(1, 100)',
      address: '@county(true)'
    }
  ]
})
// 2、url, function
Mock.mock('/api/login', (req, res) => {
  // 如果请求接口返回数据，那么可以在这里处理
  // let data = JSON.parse(JSON.stringify(res))
  // data.forEach((value, index) => {
  //   if (value === 'zxc') {
  //     value = 'hello' + value
  //   }
  // })
  // return {
  //   data
  // }
})
// 3、url, type, template
Mock.mock('/api/register', 'post', {
  'string|10': 'zxc'
})
// 4、url, type, function
Mock.mock('/api/register', 'post', (req, res) => {
  return {
    username: 'zxc',
    // 使用随机生成
    address: Random.county(true)
  }
})

// 二、Mock.setup
// 指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容；也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和 600 毫秒之间
Mock.setup({
  timeout: 400
})

// 三、Mock.Random 随机生成数据

官方文档：
http://mockjs.com
https://github.com/nuysoft/Mo...

6、浏览器查看数据