Mock.js的使用

Posted on 2020-06-13 10:50  张雪冬前端学习园地  阅读(3871)  评论(1编辑  收藏  举报

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>