生成随机数据
拦截ajax、axios请求

mockjs的文档查阅

vue中mockjs的使用

一、安装mockjs

//cnpm会更快点
（c）npm install mockjs

二、引入mockjs

import Mock from 'mockjs'

import Vue from 'vue'
import App from './App.vue'
import './mock/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

三、mock实例

import Mock from 'mockjs'

const data = Mock.mock({
    // "|"后的数字表示生成几组数据
    'string|1-4': '哎呦！'
})

console.log(data)

效果如图：

import Mock from 'mockjs'

const data = Mock.mock({
    // 随机生成字符串，括号中是字符串的个数,c代表生成的是中文
    string: '@cword(3)'
})

console.log(data)

效果如图：

文本： string
标题： titlle
句子： sentence
数字： number
数组： object

四、模拟axios/ajax请求

安装axios先

npm install axios

在index.js中定义get请求

import Mock from 'mockjs'

// 定义get请求
Mock.mock('/api/news', 'get', {
    status: 200,
    meg: '获取数据成功',
    user_name: '@cword'
})

在app.vue中引入axios

<template>
    <div id="app">
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        data() {
            return {}
        },
        created() {
            axios.get('/api/news').then(res => {
                console.log(res)
            })
        }
    }
</script>

上图：

同理，index.js加入

Mock.mock('/api/post/news', 'post', {
    status: 200,
    meg: '获取数据成功'
})

app.vue中加入

   axios.post('/api/post/news').then(res => {
                console.log(res)
            })

需要将数据接口转化成函数模式

const { cardList } = Mock.mock({
  'cardList|10-20': [{
    status: 0,
    user_id: '@phone',
    user_name: Mock.Random.name(),
    phone: '@phone',
    avatar_url: Mock.Random.image('200x200', '#ff6600', '#FCFCFC'),
    university_id: '@cword(5)',
    user_word: '@cword(10)',
    occupation: Mock.Random.pick('职友', '学生'),
    profession: '@cword(4)技术',
    'age|1-90': 90,
    sex: Mock.Random.pick('男', '女'),
    label: Mock.mock({
      'array|1-10': [
        {
          'name|+1': [
            'Hello',
            'Mock.js',
            '!'
          ]
        }
      ]
    }),
    'followers|1-200': 200,
    'followings|1-200': 200,
    'friends|1-200': 200,
    'collection|1-100': 100,
    realnames: '@boolean',
    'activities|1-200': 200
  }]
})

Mock.mock('/card_get', 'get', () => {
  return {
    list: cardList
  }
})

在vue中调用这个接口可见到数据：