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>