vue中引入mock.js

1、安裝

npm i mockjs --save

2、直接在main.js里面引用,如圖:(此處有坑,因為只在開發環境使用.if里面不能用import方式導入,只能用require方式引入)

if (process.env.NODE_ENV !== 'production') require('./mock')

當項目啟動后,mock會攔截他規則內的http請求

3、src下新建mock文件夾

 

 

 index.js

import Mock from 'mockjs'
import { getUserInfo } from './response/user'
let data = Mock.mock(/\/getUser/, 'get', getUserInfo)

// 設置響應延時
// Mock.setup({
//   timeout: 5000
// })
export default data

user.js

import Mock from 'mockjs'

const Random = Mock.Random
export const getUserInfo = (options) => {
  let userInfo = []
  for (let i = 0; i < 10; i++) {
    let template = {
      'name': Random.cname(),
      'age': Random.natural(22, 40),
      'date': Random.date('yyyy-MM-dd'),
      'address': Random.county(true)
    }
    userInfo.push(template)
  }
  // let i = 3
  // let arr = []
  // while (i--) {
  //   arr.push(template)
  // }
  // return Mock.mock(userInfo)
  return userInfo
}

mock基本配置完成

4、axios中的數據請求

import axios from './index'

export const getUserInfo = () => {
  return axios.request({
    url: '/getUser',
    method: 'get'
  })
}

vue中獲取數據

getUserInfo().then(res => {
  // console.log(res.data)
  this.tableData = res.data
})

 參考：http://www.likecs.com/show-52362.html

https://segmentfault.com/a/1190000015682126

https://www.cnblogs.com/soyxiaobi/p/9846057.html