Mock.js的使用

Vue中使用Mock.js

1.介绍：Mock.js非常强大，可以用来模拟后端接口，模拟请求数据

// 安装mock.js

npm install mock.js --save

// 新建文件夹Mock，再新建index.js放置mock模拟数据


const Mock = require('mockjs')

// 设置mock过期时间
Mock.setup({
  timeout: 6000
})

// 设置的模拟数据
const articles = Mock.mock({
  'name|1-10': [
    {
      'name|+1': [
        'Hello',
        'Mock.js',
        '!'
      ]
    }
  ]
})


// 接口，第一个参数url，第二个参数请求类型，第三个参数响应回调
Mock.mock('/api/login', 'get', res => {
  return {
    articles
  }
})


// 打印当前Mock的版本号
console.log(Mock.version)


// 可以自定义Mock的扩展方法
Mock.Random.extend({
  filter (data) {
    const msgData = data || ['星期一', '星期二', '星期三', '星期四', '星期五']
    return this.pick(msgData)
  }
})


// 调用该方法

console.log(Mock.Random.filter())


// 产生mock模板的正规json格式数据

var template = {
  'key|1-10': '★'
}

console.log(Mock.toJSONSchema(template))


// 图片地址、邮件地址，字体颜色，英文姓名
console.log(Mock.Random.image())
console.log(Mock.Random.email())
console.log(Mock.Random.color())
console.log(Mock.Random.name())


// Mock文档地址：http://mockjs.com/examples.html


// 再vue组件中请求接口数据

<script>

import axios from 'axios'

export default {

    mounted () {

        axios.get('/api/login').then(res => {

          console.log(res)
        })
    }
}
</script>