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接口实例的更多相关文章

  1. Spring Boot(九)Swagger2自动生成接口文档和Mock模拟数据

    一.简介 在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 问题二 ...

  2. 使用移动自适应布局+easy mock实现移动界面的简单实现

    一.使用easy mock模拟数据 easy mock链接地址 二.自己写移动自适应布局 自己编写主要是利用rem进行宽度栅格布局: html { /* 相当于一个界面适配器,pc以及移动端都可以进行 ...

  3. Mock, 让你的开发脱离接口

    在前后台共同进行一个项目的时候常会遇到一种情景, 后台定义好接口,前端按照接口进行开发, 当前端开发完成后台接口却还没有开发完成, 这个时候要进行接口测试, 只能等后台开发完成才能测试, 在这中间浪费 ...

  4. vue从mock数据过渡到使用后台接口

    说明: 最近在搭建一个前端使用vue-element-admin,后端使用springBoot的项目. 由于vue-element-admin使用的是mock的模拟数据跑起来的项目,所以在开发过程中难 ...

  5. Mock Server 实现post方法的接口(三)

    Mock Server 实现post方法的接口(三) 1.mock server实现的接口,当request中未设置"method"时,会自动将所有method试一次,所以一定要指 ...

  6. mock server 实现get方法的接口(二)

    mock server 实现get方法的接口(二) 下面是实现查询品牌的接口demo: 1.当response数据量小的时候,可以直接使用json, mock会自动设置headers为applicat ...

  7. MockJS和Easy Mock使用

    之前做mock数据一直用的json-server,今天同事给我推荐了很好用的工具:Easy Mock,我看完之后是下图的状态 很得劲啊,感觉人生已经达到了高潮 既能伪造接口,又能根据既定的规则生成对应 ...

  8. 小程序——使用Easy Mock

    使用Easy Mock 一.什么是Easy Mock    Easy Mock 是一个可视化的能快速生成模拟数据的持久化服务.在实际开发中常见的Mock方式一般是将模拟数据直接写在代码里,利用Java ...

  9. 【重点突破】—— Easy Mock的使用及Mock.js规范

    前言:在线使用Easy Mock可视化工具,可以提供快速生成“模拟数据”的持久化服务: Mock.js是一个JS插件,指定了一套规范,而Easy Mock工具就遵循这些规范.  一.Easy Mock ...

随机推荐

  1. TJOI2018简要题解

    Day1T1数学计算 按照时间轴建一棵线段树即可,复杂度为\(O(m \log m)\) #include <bits/stdc++.h> #define N 100005 #define ...

  2. 系统压测结果对比:tomcat/thinkphp/swoole/php-fpm/apache

    [测试所用服务器8核,16G内存]压测接口:很简单,从一张表里根据主键随机查询出一条数据[数据库服务器和WEB服务器分开的].表数据量大概:910000+条. 这个测试结果很有趣:tp5.0和3.2性 ...

  3. IntelliJ IDEA启动一个普通的java web项目的配置

    文:朱季谦 这是我很久以前刚开始用IntelliJ IDEA时记录的笔记,正好赶上最近离职了,可以有比较多的时间把以前的记录整理一下,可以让刚接触到IntelliJ IDEA的童鞋学习如何在Intel ...

  4. cygwin中修改path变量

    1.在家目录建立 .bash_profile 文件. 2.在该文件添加: export PATH=/my/path/:$PATH 3.解释,/my/path/为你要添加的目录,为什么不在.bashrc ...

  5. java基础 接口静态方法

    /** * 从java8开始,接口当中允许定义静态方法 * 格式: * public static 返回值类型 方法名称(参数列表){ * 方法体 * } * 提示:就是将abstract或者defa ...

  6. C#读写修改设置调整UVC摄像头画面-缩放

    有时,我们需要在C#代码中对摄像头的缩放进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...

  7. @Valid注解的使用springmvc pojo校验

    @Valid注解用于校验,所属包为:javax.validation.Valid. ① 首先需要在实体类的相应字段上添加用于充当校验条件的注解,如:@Min,如下代码(age属于User类中的属性): ...

  8. python爬虫---scrapy框架爬取图片,scrapy手动发送请求,发送post请求,提升爬取效率,请求传参(meta),五大核心组件,中间件

    # settings 配置 UA USER_AGENT = 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, l ...

  9. python爬虫---js加密和混淆,scrapy框架的使用.

    python爬虫---js加密和混淆,scrapy框架的使用. 一丶js加密和js混淆 js加密 ​ 对js源码进行加密,从而保护js代码不被黑客窃取.(一般加密和解密的方法都在前端) http:// ...

  10. Vue学习之路由vue-router传参及嵌套小结(十)

    一.路由传递参数: 1.使用query传值: <!DOCTYPE html> <html lang="en"> <head> <meta ...