Easy-Mock模拟get接口和post接口实例
1.先创建项目,再新建接口
创建项目入口:首页右下角 + 按钮

创建接口入口如下图:

关于mock的语法这里不做说明,可查看mock.js官方查看更详情的资料。
小tip:在Easy-Mock里面支持em的语法提示。就是你输入em.会提示支持的选项。如下图:

2.接口实例
get接口举例:
接口地址:/user/getUserInfo
{
"code": 200,
"data": {
"id": "471",
"invite_code": "@string(5)",
}
}
此时你访问接口,会返回你上面定义的数据:

post接口举例
接口地址:/user/getUserName?user_id=***
支持参数的判断,通过【_req.body.***】 匹配你传过来的数据,返回不同的数据。
{
"code": 200,
"data": function({
_req,
Mock,
}) {
if (_req.body.user_id == "471") {
/***
* 如果你返回的数据需要支持Mock语法,则需要写在Mock.mock({})里面
* 注意上面的Mock
***/
let data = Mock.mock({
"id": "471",
"email": "@email"
})
/***
* 如果你返回的数据不需要支持Mock语法,按下面这种写法即可,上面的Mock也不用写
***/
// let data = {
// "id": "471",
// "email": "777777@qq.com"
// }
return {
data
}
} else {
return {
"msg": "该用户不存在"
}
}
}
}
访问这个接口:
不符合条件时:

符合条件时:

模拟分页加载接口举例:
接口地址:
/pay/toAccountList?page=1&pageSize=10
通过【_req.query.***】 返回不同的数据。
{
"code": 200,
"msg": "获取成功",
"data": {
"rows": function({
_req,
Mock
}) {
let i = 0,
_data = [],
page = _req.query.page, //当前页数
pageSize = _req.query.pageSize, //每次返回的条数
len = (45 - pageSize * (page - 1)) < pageSize ? (45 - pageSize * (page - 1)) : pageSize;
for (i; i < len; i++) {
_data.push(
Mock.mock({
"id": "@id",
"order_no": '@natural()',
"price": '@float(100, 500, 2, 2)',
"order_status": '@natural(0,3)',
"order_time": '@datetime()',
})
);
}
return _data;
},
"total": 45
},
}
Easy-Mock模拟get接口和post接口实例的更多相关文章
- Spring Boot(九)Swagger2自动生成接口文档和Mock模拟数据
一.简介 在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 问题二 ...
- 使用移动自适应布局+easy mock实现移动界面的简单实现
一.使用easy mock模拟数据 easy mock链接地址 二.自己写移动自适应布局 自己编写主要是利用rem进行宽度栅格布局: html { /* 相当于一个界面适配器,pc以及移动端都可以进行 ...
- Mock, 让你的开发脱离接口
在前后台共同进行一个项目的时候常会遇到一种情景, 后台定义好接口,前端按照接口进行开发, 当前端开发完成后台接口却还没有开发完成, 这个时候要进行接口测试, 只能等后台开发完成才能测试, 在这中间浪费 ...
- vue从mock数据过渡到使用后台接口
说明: 最近在搭建一个前端使用vue-element-admin,后端使用springBoot的项目. 由于vue-element-admin使用的是mock的模拟数据跑起来的项目,所以在开发过程中难 ...
- Mock Server 实现post方法的接口(三)
Mock Server 实现post方法的接口(三) 1.mock server实现的接口,当request中未设置"method"时,会自动将所有method试一次,所以一定要指 ...
- mock server 实现get方法的接口(二)
mock server 实现get方法的接口(二) 下面是实现查询品牌的接口demo: 1.当response数据量小的时候,可以直接使用json, mock会自动设置headers为applicat ...
- MockJS和Easy Mock使用
之前做mock数据一直用的json-server,今天同事给我推荐了很好用的工具:Easy Mock,我看完之后是下图的状态 很得劲啊,感觉人生已经达到了高潮 既能伪造接口,又能根据既定的规则生成对应 ...
- 小程序——使用Easy Mock
使用Easy Mock 一.什么是Easy Mock Easy Mock 是一个可视化的能快速生成模拟数据的持久化服务.在实际开发中常见的Mock方式一般是将模拟数据直接写在代码里,利用Java ...
- 【重点突破】—— Easy Mock的使用及Mock.js规范
前言:在线使用Easy Mock可视化工具,可以提供快速生成“模拟数据”的持久化服务: Mock.js是一个JS插件,指定了一套规范,而Easy Mock工具就遵循这些规范. 一.Easy Mock ...
随机推荐
- vs中使用tfs创建项目
1.打开“Team Explorer”,点击“Home”,选择"Project"->"New Team Project",操作如下图: 2.输入项目名称. ...
- ACM | 算法 | 快速幂
目录 快速幂 快速幂取模 矩阵快速幂 矩阵快速幂取模 HDU1005练习 快速幂 幂运算:\(x ^ n\) 根据其一般定义我们可以简单实现其非负整数情况下的函数 定义法: int Pow ( ...
- Linux文件目录指令
1.pwd指令 pwd 显示当前所在的目录 2.ls指令 ls [选项] [目录或文件] 查看文件信息 ls -a 查看所有文件和目录,包括隐藏的 ls -l 以列表的方式显示 3.cd指令 cd 路 ...
- Windows server 2012 显示“我的电脑”
Windows server 2012 桌面上默认没有显示“我的电脑”的快捷方式, 如果要显示,可以输入一行命令: rundll32.exe shell32.dll,Control_RunDLL de ...
- java之maven之maven的使用
这里使用的工具是 myeclipse ,所以这里讲的是在 myeclipse 上使用maven. 1.什么是仓库? 用于存放依赖包.配置文件.其他插件等. 项目添加依赖时,默认从 本地仓库 读取依赖包 ...
- element-UI级联选择器(Cascader)获取label值 ,this.$refs['新组件名'].currentLabels 在2.7版本给移除了,新的解决方法。
原文参考:https://blog.csdn.net/lijiabinbbg/article/details/97396812 遇到的新的问题是如果设置了ref,那么v-model绑定的值不会动态更新 ...
- codeforces#566(Div.2)B
B.Plus from Picture You have a given picture with size w×hw×h. Determine if the given picture has a ...
- Map List Set的区别
Map List Map的主要区别如下: set List 是实现了Collection接口的子接口:Map本身就是一个接口: list数据存放时有序的,允许有重复元素:set数据存放时无序的,不允许 ...
- JS 中类型和类型转换
类型 首先明确一点,Js中的类型是针对值来说,而不是针对变量,值就是所谓的42, 'abc', false 等能用js 操作的数据.在js 中说某某某是什么数据类型,其实是说的这些值是什么类型.值呢? ...
- 93.vue---在vue环境用webuploader分片上传插件遇到的超级bug(独家仅此一份)
本来我是想想用vue-simple-uploader (https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html)的 但是公司后台已经做好了we ...