Mock.js的使用 - 张雪冬前端学习园地

Vue中使用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>