mock模拟接口测试 vue_VUE使用Mock模拟接口
之前用EASY-MOCK来模拟接口,但是这网站三天两头GG,太生气了~!
发现可以自己在项目里使用Mock,开始使用~
安装VUE在这里不写了,先从安装Mock开始:
安装mockjs
npm install mockjs --save-dev
新建mock目录,创建login.js
import Mock from 'mockjs';
// 获取 mock.Random 对象
const Random = Mock.Random;
const loginData = function (opt) {
const { user } = JSON.parse(opt.body)
return {
result: 200,
data: {
uid:Random.id(),
type: 1,
uname:user,
expire_in: "63666",
token: Random.guid(),
logintime: Random.now()
}
}
}
export default {
login: opt => loginData(opt)
};
该方法返回的是一个随机生成ID的数据
接着在mock目录下新建index.js
import Mock from 'mockjs';
import loginAPI from './login';
Mock.mock(/\/login/, 'post', loginAPI.login);
最后在VUE的主工程main.js里引入mock
import Vue from 'vue'
import App from '@/App'
import router from '@/router'
import store from '@/store/'
//解决低版本兼容问题
import "babel-polyfill";
// 引入mockjs
require('./mock/index.js')
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.prototype.$get = get;
Vue.prototype.$post = post;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: ''
})
Mock使用的方法有很多,比如分页时返回一个列表,或者直接返回一个结果
import Mock from 'mockjs'
import { param2Obj } from '@/utils'
// 获取 mock.Random 对象
const Random = Mock.Random;
const userData = function (opt) {
const { page, pageSize } = param2Obj(opt.url)
let len = (1000 - pageSize * (page - 1)) < pageSize ? (1000 - pageSize * (page - 1)) : pageSize;
let _data = []
let i = 0;
for (i; i < len; i++) {
_data.push(
Mock.mock({
"id": "@id",
"dateTime": "@now()",
"name": "@name()",
"address": "上海市普陀区金沙江路 1518 弄",
"state": "@integer(0, 1)"
})
);
}
return _data;
}
export default {
getUserList: opt => {
return {
result: 200,
data: {
data: userData(opt),
count:1000
}
}
},
addUser: () => {
return {
"result": 200,
"data": {},
"msg": "请求成功"
}
}
}
这些方法够用了,mock还有一些可以随机生成时间、id、uid的方法,到时候用到再查吧~
mock模拟接口测试 vue_VUE使用Mock模拟接口相关推荐
- mock模拟接口测试 vue_vue+mock.js实现前后端分离
之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离. 安装: npm install mockjs 这里先写个小案例介绍一下具体使用,写法不规范 ...
- mock模拟接口测试 vue_Easy Mock以及Vue+Mock.js模拟数据
Easy Mock以及Vue+Mock.js模拟数据 一.Mock.js简介 Mock.js是一个可以模拟后端数据,也可以模拟增删改查操作的js库 基础语法规范 数据模板中的每个属性由 3 部分构成: ...
- 模拟对象测试技术Mock(一)
因为目前项目时间比较紧(一个月的开发周期),并且,工作流的测试步骤也比较多,所以,我决定采用一种模拟对象测试技术:Mock.Mock可以为接口生成模拟对象,从而在我们写实现代码之前就检查其逻辑和交互行 ...
- java api 测试工具_Java 实现在线HTTP接口测试 - HTTP GET/POST模拟请求测试工具
本站工具,在线HTTP接口测试 - HTTP GET/POST模拟请求测试工具后台所有实现代码.支持的请求协议有:Post.GetDelete.Put.Trace.Head.Options.特色是加了 ...
- 考研复试题 计算机接口原理,微机原理及接口技术考研模拟题一-微机原理与接口技术.DOC...
微机原理及接口技术考研模拟题一-微机原理与接口技术 附录c < 微机原理及接口技术 >考研模拟题(一) 一.判断题:(正确题在括号内画√,错误画X.每小题 1分,共 10 分) 1.Pen ...
- C++实现类和对象:编写一个程序,模拟电梯的功能。功能接口包括电梯上行按钮、下行按钮、楼层选择和电梯在行驶过程中的楼层显示。
浙江理工大学信息学院 面向对象程序设计实验报告 实验名称:类的定义与使用 学时安排:3 实验类别:设计性实验 ...
- JAVA:编写一个程序,模拟电梯得功能。功能接口包括电梯上行按钮、下行按钮、楼层选择与电梯在行驶过程中得楼层显示。
编写一个程序,模拟电梯得功能.功能接口包括电梯上行按钮.下行按钮.楼层选择与电梯在行驶过程中得楼层显示. (1) 由用户选择按上行按钮还就是下行按钮,选择操作后再由用户输入要进入得楼层,进而电梯开始运 ...
- qq好友列表获取,利用curl 模拟获取qq好友列表获取接口
qq好友列表获取,利用curl 模拟获取qq好友列表获取接口 代码如下: //模拟浏览器查找好友列表$url = "http://cgi.find.qq.com/qqfind/buddy/s ...
- mock()java,关于java:@ Mock,@ MockBean和Mockito.mock()之间的区别
创建测试和模拟依赖项时,这三种方法有什么区别? @MockBean: @MockBean MyService myservice; @嘲笑: @Mock MyService myservice; Mo ...
最新文章
- 什么是多重共线性问题?如何判别多重共线性问题?怎么避免多重共线性对模型和学习的干扰?
- linux中wait与waitpid的差别
- CyclicBarrier详解
- 【最优解】Leecode 594. 最长和谐子序列——Leecode每日一题系列
- SAwUML – UML-based, contractual software architectures and their formal analysis using SPIN
- php acl rbac,建站常用的用户权限管理模型ACL和RBAC的区别
- 关于缓存穿透,缓存击穿,缓存雪崩,热点数据失效问题的解决方案(转)
- linux和windows接口中文乱码_Loadrunnerweb接口基础
- Android SQLite用法
- aix ssh服务??
- String对象不可改变的特性
- Java菜鸟教程 面向对象初步(一)
- 鸿蒙os系统3.0电脑,华为鸿蒙系统升级指南,速看!
- bugku 杂项 QAQ
- Sketch 68下载 最好的产品设计工具
- 2023需要重点关注的四大AI方向
- AutoLayout的使用
- window的onload()的使用
- Profiler分析内存抖动,Memory Analyzer(mat)分析内存泄漏(不懂砍我)
- 微积分位于基础数学的核心部分
热门文章
- 等价无穷小替换及其习题 笔记
- BZOJ 4407于神之怒加强版
- 春秋招面经总结:下个篇章的开始
- OWASP TOP 10 漏洞指南(2021)
- 如何从零开始建站,四个步骤了解一下
- ubuntu qt creator编译出现:-1: error: Warning: File ' has modification time 3.8e+04 s in the future
- Android中R文件ID值
- LeetCode:Database 96.净现值查询
- 企业上ERP系统到底应该谁来主导并推进?
- 韩松手机摄影笔记第五课--后期利器Snapseed