乐趣区

关于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、查看后果

退出移动版