vue 利用mockJs 模拟数据

工作这几年一直用Java 开发，前端的技术自己也忘得差不多了（实际上自己也不怎么会），最近参与的项目是用VUE +  Element-ui + springboot 写的，由于需求没有定，先画一个demo界面出来，又懒得写死数据，于是就上网查了查怎么写mock，昨天用了一两个小时摸清套路后成功实现，因为以前没接触过VUE ES5 ES6之类，所以有的地方写起来比较吃力。今天想起来了，就记录一下。

关于mockjs的官方文档 https://github.com/nuysoft/Mock/wiki

1. 安装 mockjs 和 mock

npm install mock -S

npm install mockjs -S

2.在src 文件加下创建mock 文件夹， 创建mock.js，内容如下：

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { TimeLineData1, TimeLineData2, TimeLineData3, TimeLineData4} from './progressList';
import {getJobPrgsInfoByParameter} from '../api/api';

let _TimeLineData1 = TimeLineData1;
let _TimeLineData2 = TimeLineData2;
let _TimeLineData3 = TimeLineData3;
let _TimeLineData4 = TimeLineData4;

export default {
  /**
   * mock bootstrap
   */
  bootstrap() {
    let mock = new MockAdapter(axios);

    mock.onGet('/api/jobmonitor/getJobPrgsInfoByParameter').reply(config => {
        let req = config.params;
        let reqId = req.params.reqId;

        console.log(req.params);

        if(reqId == 'active'){
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                  resolve([200, {
                      timeLineList: _TimeLineData1
                  }]);
                }, 1000);
              });
        }
        else if(reqId == 'wait'){
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                  resolve([200, {
                      timeLineList: _TimeLineData2
                  }]);
                }, 1000);
              });
        }
        else if(reqId == 'finish'){
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                  resolve([200, {
                      timeLineList: _TimeLineData3
                  }]);
                }, 1000);
              });
        }
        else{
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                  resolve([200, {
                      timeLineList: _TimeLineData4
                  }]);
                }, 1000);
              });
        }

      });

  }
};

3. 创建progressList.js, 编写mock 数据

const Mock = require("mockjs")
const Random = Mock.Random
const code = 200 

const TimeLineData1 = [];
const TimeLineData2 = [];
const TimeLineData3 = [];
const TimeLineData4 = [];

      for (let i = 0; i < Random.natural(5, 35); i++) {
        let timeLine = {
          timestamp: Random.date() + ' ' + Random.time(),
          _expanded: true,
          jobProgress :[]
        }
        for(let j=0; j< Random.natural(1, 9); j++){
              let progress = {
                      requestId: Random.guid(),
                      jobName: Random.name() + ' test',
                      currentStepId: 'step' + Random.natural(0,10),
                      currentStepStatus: Random.pick(['success', 'error']),
                      percentage: Random.natural(0,99),
                      category: Random.pick(['cv_locate', 'cv_availability']),
                      type: Random.pick(['sftp','http','ems','email','fix'])
              }
              timeLine.jobProgress.push(progress)
         }
        TimeLineData1.push(timeLine)
      }

      for (let i = 0; i < Random.natural(5, 35); i++) {
            let timeLine = {
              timestamp: Random.date() + ' ' + Random.time(),
              _expanded: true,
              jobProgress :[]
            }
            for(let j=0; j< Random.natural(1, 9); j++){
                  let progress = {
                          requestId: Random.guid(),
                          jobName: Random.name() + ' test',
                          percentage: 0,
                          category: Random.pick(['cv_locate', 'cv_availability']),
                          type: Random.pick(['sftp','http','ems','email','fix'])
                  }
                  timeLine.jobProgress.push(progress)
             }
            TimeLineData2.push(timeLine)
          }

      for (let i = 0; i < Random.natural(5, 30); i++) {
            let timeLine = {
              timestamp: Random.date() + ' ' + Random.time(),
              _expanded: true,
              jobProgress :[]
            }
            for(let j=0; j< Random.natural(1, 9); j++){
                  let progress = {
                          requestId: Random.guid(),
                          jobName: Random.name() + ' test',
                          percentage: 100,
                          currentStepStatus: Random.pick(['success', 'error']),
                          category: Random.pick(['cv_locate', 'cv_availability']),
                          type: Random.pick(['sftp','http','ems','email','fix'])
                  }
                  timeLine.jobProgress.push(progress)
             }
            TimeLineData3.push(timeLine)
          }

      for (let i = 0; i < Random.natural(5, 30); i++) {
            let timeLine = {
              timestamp: Random.date() + ' ' + Random.time(),
              _expanded: true,
              jobProgress :[]
            }
            for(let j=0; j< Random.natural(1, 9); j++){
                  let progress = {
                          requestId: Random.guid(),
                          jobName: Random.name() + ' test',
                          currentStepId: 'step' + Random.natural(0,10),
                          currentStepStatus: Random.pick(['success', 'error']),
                          percentage: Random.natural(0,99),
                          type: Random.pick(['sftp','http','ems','email','fix'])
                  }
                  timeLine.jobProgress.push(progress)
             }
            TimeLineData4.push(timeLine)
          }

Mock.setup({
    timeout: 0-3000
})

export { TimeLineData1,TimeLineData2,TimeLineData3,TimeLineData4 };

3. 通过api.js对api请求统一的管理，路经在src/api

import axios from 'axios';

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.timeout = 60000
let base = '';

export const getJobPrgsInfoByParameter = params => { return axios.get('/api/jobmonitor/getJobPrgsInfoByParameter',{ params: params }).then(res => res.data); };

4. 页面调用

<script>
import Mock from '@/mock/mock.js';
import util from '../../common/js/util';
import moment from 'moment';
import {getJobPrgsInfoByParameter} from '../../api/api';

.....

export default {
    components: {
    },
    data() {
      return {
          listLoading : false,
          reqType :null,
          timeLineList:[]
      }
    },
   methods: {

    getJobPrgsInfoByParameter: function () {
        let para = {
            params:{
                reqId:this.reqType
            }
        };
        this.listLoading = true;
        Mock.bootstrap();
        this.timeLineList = [];
        getJobPrgsInfoByParameter(para).then(res=>{
            this.timeLineList = res.timeLineList;
        });
        this.listLoading = false;

    }

   }

}

数据如下：