Vue项目中使用mockjs

前端页面写完后 接口可能出不来。所以就要用mock来造一些假数据。
使用前请安装mockjs
我们先在src下创建一个mock文件夹

在example.js里写

import Mock from 'mockjs'
const Random = Mock.Random
// mock例子1
var listData = function() {
    let data = []
    for (let i = 0; i < 20; i++) {
    let newList = { // 详细 规则 参照mockjs官网
      title: Random.csentence(5, 30), //  Random.csentence( min, max )
      imgSrc: Random.dataImage('200x160', '这是图片中的文本'), // Random.dataImage( size, text ) 生成图片（base64位数据格式）
      author_name: Random.cname(), // Random.cname() 随机生成中文名
      date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
    }
      data.push(newList)
  }
  return {data: data}
}
// mock例子2
var strings = {
  data: {"array|1-10": [
    {
      "name|+1": [
        "Hello",
        "Mock.js",
        "!"
      ]
    }
  ]}
}

const list = {
  listData,
  strings
}
export default list

然后在mock下的index.js文件里面引用

import Mock from 'mockjs'
import list from './example'

// url为要拦截的请求地址  请求方式  请求数据（规则） （此处api会被mockjs拦截）
// 控制台network里看不到请求 结果请console出来看
Mock.mock('http://mockjs.com', 'post', Mock.mock(list.listData))
Mock.mock('http://bai.com','post',Mock.mock(list.strings))

在api文件下的request.js文件封装请求

import axios from 'axios'
// 这里request根据你自己项目写
export function request(url, data = {}, method = 'post', download) {
    let token =  sessionStorage.getItem('token');
    let service;
    service = axios.create({
      headers: {
        'Content-Type': 'application/json',
        'X-Authorization':token?token:'',
      },
      timeout: 60000
    })
    return new Promise((resolve, reject) => {
      const options = {
        url,
        method
      };
      if(download){
        options.responseType="blob"
      }
      if (method.toLowerCase() === 'get') {
        options.params = data
      } else {
        options.data = data
      }
      service(options)
        .then(res => {//成功回调
          if(download){
            resolve(res);
          }else {
            resolve(res.data)
          }
        })
        .catch(error => {// 失败回调
          reject(error);
          if (error.response) {
            errorHandle(error.response);
          }else {

          }
        })
    })
}


export default { // 暴露htto_mock方法，即后面页面中用到的方法
    http_mock(url, params) {
        return request(url, params)
    }
}

在组件里调用方式

<template>
  <div v-title data-title="测试title">
    <button @click="logs">点击我</button>
  </div>
</template>

<script>
  export default {
    methods: {
      logs() {
         this.request.http_mock('http://bai.com').then(res => {
           console.log(res.data)
         })
      }
    },
  }
</script>

<style scoped>

</style>

控制台输出结果

main.js里引入

具体mock怎么造数据请看这个
http://mockjs.com/examples.html#Array