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; } } }
数据如下:
vue 利用mockJs 模拟数据的更多相关文章
- 如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
- vue+mockjs 模拟数据,实现前后端分离开发
在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...
- vue+iview+mock模拟数据遍历
下载安装iview, 进入根目录,用命令行启动 npm install npm run build npm run dev 安装mock.js和axios npm install mock.js -s ...
- mockjs模拟数据请求
一般项目的方法 <html> <head> <script> <script src="http://requirejs.org/docs/rele ...
- vue 使用mock来模拟数据
首先,需要安装mock npm install mockjs --save-dev 在main.js中引入mock mock文件写法如下: const Mock = require('mockjs') ...
- 如何在vue-cli项目中结合mockjs模拟假数据
1.前言 在如今前后端分离的开发方式已被广泛采用的今天,前端同学和后端同学各自独立开发,后端提供数据接口,前端调用接口获取数据渲染页面.但是在实际开发中,后端开发由于逻辑相对复杂接口迟迟提供不到位,而 ...
- vue-cli实现异步请求返回mock模拟数据
在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...
- vue项目中使用mockjs模拟接口返回数据
Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...
- vue+vuecli+webpack中使用mockjs模拟后端数据
前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...
随机推荐
- CenOS_用户级别
1.运行级别 共有7个运行级别: 0:关机 1:单用户(不用密码也能登陆) 2:多用户无网络 3:多用户有网络 4:保留 5:图形化界面 6:重启 1.1设置运行级别语法: init <级别数字 ...
- cmd 配置dchp服务器
1.安装DHCP服务器角色,这样在netsh下才会有dhcp上下文 2.编写配置dhcp的脚本 从命令行运行netsh有两种语法: 比如要获取已经配置的网络接口列表 1.写全 netsh -r Rem ...
- 神奇的选择器 :focus-within
CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能. 伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的. 有个错误有必要每次讲到伪类都提一下,有时你会发 ...
- 4. VIM 系列 - 认识VIM的缓冲区、窗口、标签页
目录 1. 缓冲区 2. 窗口 3. 标签页 4. 设置一下热键 1. 缓冲区 文件和缓冲区的区别 vim 打开一个文件时,其实是从磁盘中读取文件到内存中,vim的一些操作其实是在操作缓冲区, 当使用 ...
- Identity Server 4 - Hybrid Flow - 保护API资源
这个系列文章介绍的是Identity Server 4 的 Hybrid Flow, 前两篇文章介绍了如何保护MVC客户端, 本文介绍如何保护API资源. 保护MVC客户端的文章: https://w ...
- 《前端之路》之 初识 JavaScript
01 初识 JavaScript 作为在码农圈混迹了 四五年的老码畜来说,学习一门新的语言,就仿佛是老司机开新车一样 轻车熟路. 为什么会这么快呢? 因为各种套路啊- 任何一种计算机语言的最开始都是和 ...
- 知识小罐头06(tomcat8请求源码分析 中)
更正上一篇一个小错误,Connector中首先是将socket请求过来的信息封装成一个普通的Request对象(上一篇我写成HttpRequest对象,失误失误,根本就木有HttpRequest这样的 ...
- .NET Core 技巧汇总篇
前言 本篇幅会专门记录在工作中实际碰到的问题场景,和一些比较好的实现方法作为汇总,可以供各位借鉴和参考,当然 本人入行不深,能力有限,仅供各位借鉴和参考.欢迎补充 技巧一:引入其他项目类库文件 做项目 ...
- c# 获取当前时间的微秒
获取毫秒大家都经常用到. 大家应该都知道怎么用. 但是,毫秒下面还有微秒. 其实这个方法也已经在c#中. 只不过很少有人用到,所以查找资料也很少有人说. 下面代码就是获取微秒的方式: DateTime ...
- 西安活动 | 4月20日「拥抱开源,又见.NET :云时代 • 新契机」
云计算日渐兴起,成为提升企业效率和生产力的最终解决方案,而云时代也为软件开发模式带来了翻天覆地的变化.可以说 .NET Core就是这个时代催生的产物.自2016年 .NET Core 1.0 发布以 ...