工作这几年一直用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; } } }

数据如下:

vue 利用mockJs 模拟数据的更多相关文章

  1. 如何在Vue中使用Mockjs模拟数据的增删查改

    之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...

  2. vue+mockjs 模拟数据,实现前后端分离开发

    在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...

  3. vue+iview+mock模拟数据遍历

    下载安装iview, 进入根目录,用命令行启动 npm install npm run build npm run dev 安装mock.js和axios npm install mock.js -s ...

  4. mockjs模拟数据请求

    一般项目的方法 <html> <head> <script> <script src="http://requirejs.org/docs/rele ...

  5. vue 使用mock来模拟数据

    首先,需要安装mock npm install mockjs --save-dev 在main.js中引入mock mock文件写法如下: const Mock = require('mockjs') ...

  6. 如何在vue-cli项目中结合mockjs模拟假数据

    1.前言 在如今前后端分离的开发方式已被广泛采用的今天,前端同学和后端同学各自独立开发,后端提供数据接口,前端调用接口获取数据渲染页面.但是在实际开发中,后端开发由于逻辑相对复杂接口迟迟提供不到位,而 ...

  7. vue-cli实现异步请求返回mock模拟数据

    在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...

  8. vue项目中使用mockjs模拟接口返回数据

    Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...

  9. vue+vuecli+webpack中使用mockjs模拟后端数据

    前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...

随机推荐

  1. NodePort,LoadBalancer还是Ingress?我该如何选择 - kubernetes

    原文:http://mp.weixin.qq.com/s/dHaiX3H421jBhnzgCCsktg 当我们使用k8s集群部署好应用的Service时,默认的Service类型是ClusterIP, ...

  2. 再谈AbstractQueuedSynchronizer1:独占模式

    关于AbstractQueuedSynchronizer JDK1.5之后引入了并发包java.util.concurrent,大大提高了Java程序的并发性能.关于java.util.concurr ...

  3. Dubbo的@Reference和@Service说明

    前言 @Reference 用在消费端,表明使用的是服务端的什么服务 @RestController public class RemoteUserController { @Reference(ve ...

  4. #Java学习之路——基础阶段二(第六篇)

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  5. C语言中的神兽strdup

    C语言的确博大精深,在C语言的世界中遨游了那么多年,发现自己仍是菜鸟一枚,很多利器没有能够驾驭,今天介绍一个神兽,威力无比,但是却很少人能用得好. 函数原型: #include <string. ...

  6. 巡风源码阅读与分析---Aider.py

    之前写过一遍Aider.py,但只是跟着代码一顿阅读没有灵魂,所以重新对它阅读并重新写一遍. 描述 文件位置:aider/aider.py 是用来辅助验证的脚本 官方描述就一句话 代码阅读分析 这个脚 ...

  7. (转)学习MySQL优化原理,这一篇就够了!

    原文:https://mp.weixin.qq.com/s__biz=MzI4NTA1MDEwNg==&mid=2650763421&idx=1&sn=2515421f09c1 ...

  8. 【Netty】(6) ---源码ServerBootstrap

    [Netty]6 ---源码ServerBootstrap 之前写了两篇与Bootstrap相关的文章,一篇是ServerBootstrap的父类,一篇是客户端Bootstrap类,博客地址: [Ne ...

  9. Android新版本特性以及注意事项

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 了解新版本的特性还是很有必要的,为什么这么讲呢?因为可以从应用市场对发布应用的目标API版本(targetSdkVersion值)的 ...

  10. DotNetCore跨平台~Dapper的使用

    回到目录 Dapper作为小型ORM的代表作品被我们应用到了dotnet core的项目中,下面将把自己在项目中使用dapper进行curd操作的过程写一下,后期可能会遇到一些问题,大叔也会在这个系列 ...