关于vue.js:vue2x使用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 有很多办法，能够疾速创立数据，文档地址：http://mockjs.com

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)
    })
  }
}

6、查看后果