前端工具easy mock（前端工具库）

本篇文章给大家谈谈前端工具easy mock，以及前端工具库对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享前端工具easy mock的知识，其中也会对前端工具库进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、easy mock怎么跨域访问
• 2、mockjs 使用简介
• 3、前端mock接口数据最高效吗？
• 4、接口RAP开源吗?
• 5、使用MOCK对象进行单元测试

easy mock怎么跨域访问

1、首先使用easymock生成mock对象前端工具easy mock的方法代码前端工具easy mock，如下图所示。

2、使用EasyMock动态构建ResultSet接口前端工具easy mock的Mock对象的方法代码前端工具easy mock，如下图所示。

3、EasyMock提供了另外一种生成和管理Mock对象的机制的方法代码前端工具easy mock，如下图所示。

4、最后使用EasyMock.createStrickMock(）来创建的方法代码，如下图所示就完成了。

mockjs 使用简介

在前后端分离的开发模式中，数据需要通过 http 请求异步从服务器端获取，也就是前端开发需要依赖后端接口，如果不能时时保证数据获取通畅，就会造成开发阻塞。这时前端需要一种方式可以来模拟数据请求，从而更多的掌握主动权独立开发项目， mockjs 可以以无侵入的方式拦截 ajax 请求，通过模拟服务器端响应来返回数据

JSRUN

Mockjs 语法规范由数据模板定义规范和数据占位符定义规范组成，在官网的 示例文档 中提供了丰富的模板定义方法，可点击查看

Mockjs 实现的原理是对 XHR 对象的拦截，属于 js 拦截，并没有通过浏览器发出请求，所以一般会碰到以下问题。

为了处理以上问题，引入集成了 mockjs 的 mock server工具 easy-mock ，注册并登录 easy-mock 官网后，会有一个演示项目提供参考，参考演示项目可以轻松创建自己的项目，如下图

创建项目后可以基于当前项目创建请求接口，如下图，创建一个 url 为 \user 的 get 请求，会生成接口为 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/user 的完整地址，点击 用户列表 可查看返回数据，由于 easy-mock 内部集成了 mockjs ，所以在生成数据时可以采用mockjs数据模板来生成，把基础用法中的数据生成模板粘贴过来，可以生成相同数据
浏览器限制跨域访问，所以要访问到接口数据，还需要解决跨域问题，通过 Nginx 解决跨域我在另外一片文章有讨论过，点击可以可查，下面主要介绍下通过 webpack-dev-server 设置代理

假设本地请求的根路径为 http://localhost:8080 ，通过 ajax 请求 用户列表 的完整接口为 http://localhost:8080/proxy/user ， webpack-dev-server 通过代理方式将请求转发到我们在 easy-mock 中定义的接口 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/proxy/user ，此时接口地址中多了个代理标志 /proxy , 通过配置参数 pathRewrite: {'^/proxy': ' '} 将 /proxy 去掉即可。

前端mock接口数据最高效吗？

前端开发中需要去调用后端的接口，如果后端还没有ready，为了不block开发进程，前端就需要自行mock数据。
我们常用的方法大概以下两种：

通过一个线上mock数据平台，如： Easy Mock

通过本地server。

第一种方法需要联网操作，我是碰到过几次网络链接不上的情况，，也可能是我自己的网络问题。

第二种方法，往往需要我们自己去写各种路由规则，如：

app.get('/api/getuser', (req, res)={

res.send({...})

})

这样来看的话前端的借口数据还是非常的高效的！

接口RAP开源吗?

随着 Web 技术的发展，前后端分离构架变的越来越流行。前后端分离使后端专注于数据处理和定义前端所需要的接口，前端负责数据的展现和交互，大大细化了开发者的职责，提高了开发效率，但与此同时也带来了一些问题：

对于前端工程师，后端提供的接口文档，大多是不规范的，有使用 wiki 的，有 word 文档的，甚至还有用即时聊天软件沟通的，后端接口对于前端就像一个黑盒子，经常遇到问题是接口因未知原因增加参数了，参数名变了，参数被删除了。对于后端工程师，接口对接时总是需要写冗杂繁琐的文档，需要大量时间去维护接口文档。

前端开发的功能在后端功能还没完成前，因为前端的功能依赖于后端的数据，导致工作无法顺利展开。为了解决这个问题，有些前端工程师在代码注入 json，还有后端工程师临时搭建一套测试数据服务器，这种情况下势必会影响工作效率和代码质量，也不能及时进行字段的更新。

接口数据正确性无法得到保证。前端调用后端的接口数据渲染到 视图，数据一旦出错，将会导致视图和交互也出现问题，保证后端接口数据正确性变的愈来愈重要。接口自动化测试就是用来解决这个问题，但传统的接口测试框架使用成本很高，很多团队采用肉眼比对方式，效率很低。

相关产品调研

我们迫切希望有一款产品能够满足我们的诉求，于是开始寻找市面上类似产品，经过一段时间的分析，最终我们找到了几个比较有代表性的产品 Rap，Nei，Easy-Mock。同时我们按照自己的诉求列出了一些关键的特征：

请点击输入图片描述

Nei 是网易前端事业部的产品，在这些产品中算是做得比较好的， nei 是专注做 saas 服务这块，没有开源版本。对于去哪儿内部，肯定不会把公司机密的接口数据放到第三方平台。

Rap 是阿里妈妈 MUX 团队2013年出的一款产品，从时间上看是同类产品中最早的。Rap 是后端工程师基于 java 开发的，如果想定制部分功能，还需要学习 java，而我们部门大家对 java 都不熟悉。另一方面 Rap 没有接口测试功能，而后端使用其他工具（postman， restlet）测试接口，将导致不能及时更新接口文档。

Easy-mock 是大搜车无线团队出的一款产品，Easy-mock 定位是接口数据的模拟，解决前端依赖后端接口数据的问题，在同类产品中 mock 服务做得比较好。Easy-mock 专注于前端数据的模拟，但无法解决去哪儿现有的问题。

Nei，Rap 接口管理平台共同存在的问题是不易维护接口返回数据。笔者曾跟一个使用过 Rap 的后端工程师聊过，他说每次定义后端接口返回数据字段，好几个百个字段需要更新很长时间。Nei，Rap 是基于维护一个 json-schema 方式定义后端返回数据结构，我们假设某个接口有100个字段，如果基于 json-shema 那么就要维护差不多 600 多左右字段的更新。这么大工作量的，很可能导致后端工程师根本没有动力去维护。

比较遗憾的是，这几款优秀的产品，都缺失了一些我们在意的关键特征。我们可能需要做比较大的改动才能够基本满足自己的需求，这个工作量很有可能会超过重新开发一次。所以我们开始自主研发一个全新的接口管理平台，我们希望它能够提供接口文档管理，接口数据模拟（Mock），接口调试，自动化测试等功能，让前后端接口相关的工作进行的更加高效。这就是 YApi 接口管理平台斐然由来，下面简要聊聊 YApi 是如何实现上述这些特征的。

YApi 解决方案

1. 共同维护一份接口定义，连接前后端

大家看下图，在后端开发接口过程中，接口开发和测试接口这是必不可少的环节，但文档因为没有跟接口开发和测试联系到一起，被孤立。后端要维护对于他们冗杂繁琐的文档，是件收益很低的事情。没有人喜欢做收益低的事情，所以最终的解决办法就是要提高收益。下面详细说明解决方案。

请点击输入图片描述

在接口开发过程中，后端通常都会使用 postman 等类似的工具测试接口，而测试接口是在开发过程中一个必要的过程。假如参数有改动，大家肯定会在 postman 等工具上更新字段和测试接口。由此可以联想到， 如果能有一款工具既可用来做测试接口，又能作为接口文档工具，将接口文档和接口测试连接到一起，不就解决了此问题。YApi 解决方案是将接口文档和测试通过单一数据源连接到一起，如果有改动，因为改的是单一的数据源，就不会出现更新滞后和不及时问题。

2. 前端 Mock Server 方案

数据 Mock 服务在开发前期是非常头疼的一个问题。大多数情况下，接口请求参数和返回数据都是后端规定的，在后端接口没有完成之前，接口对于前端就是一个黑洞，可能最初对接口的定义跟实际后端做出的接口会有非常大的不同。这个时候就需要有一个工具，不仅能模拟真实接口的情况，还能关联接口文档，在后端开发过程中，可以随时调整接口定义，并通知给前端开发者改动信息。

在 YApi 平台，前后端只要维护接口定义的响应数据，就可以生成需要的模拟数据，下面这段代码定义了生成数据模板：

{
"errcode": 0,
"errmsg": "@string",
"data": {
"type":"@pick(1,2,3)",
"list|1-10": [{
"uid": "@id",
"username": "@name"
}]
}
}

可生成如下的模拟数据：

{
"errcode": 0,
"errmsg": "^*!SF)R",
"data": {
"type": 2,
"list": [
{
"uid": "370000200707276255",
"username": "Ruth Clark"
},
{
"uid": "650000200211185728",
"username": "Anthony Martin"
},
{
"uid": "370000199201143855",
"username": "Laura Rodriguez"
},
{
"uid": "610000198704072775",
"username": "Anthony Perez"
}
]
}
}

以往的数据 mock 方案难免会影响项目源码，yapi 使用了服务器代理的方案，只需要在你的开发机做下服务器反向代理配置，不用修改项目一行源代码，即可获取到所有的 mock 数据。

基础的 Mock 工具已经能满足大部分的需求了，但有些复杂场景是无法实现的。例如：当我做一个数据列表页面，需要测试某个字段在各种长度下的 ui 表现，还有当数据为空时的 ui 表现。YApi 提供了期望和自定义脚本的功能。 本文主要介绍自定义脚本功能，期望功能可参考 yapi 平台文档。

自定义脚本可根据请求的参数，cookie 信息，使用 js 脚本自定义返回的数据。我们假设有个场景，我希望通过 cookie "_type" 控制列表页面数据显示，假设 _type 是 error，那么列表显示异常错误信息；假设 _type 是 empty ，列表显示为空。可使用下面代码实现：

if(cookie._type == 'error'){
   mockJson.errcode = 400;}if(cookie._type == 'empty'){
   mockJson.data.list = [];}

3.自动化测试

接口开发完成后，后续的迭代是非常多的，每次对源码的修改，都需要大量的测试才能确保接口是否正确。人工判断肯定是不好的，最好的办法是做成自动化，但自动化测试又是一件成本非常高的事情，需要后端人员和QA人员学习相关的框架，和写大量的代码。YApi 简化了这一个过程，基于一个可视化界面，就算不懂程序开发，只需配置相关的参数和断言语句，就能实现自动化测试，非常的易用。

除了基本的功能外，YApi 还提供了强大的 pre-script 和可视化表达式功能，pre-script 包括请求参数处理脚本和响应数据处理脚本两部分。通过自定义 js 脚本方式改变请求的参数和返回的 response 数据。他的使用场景如下：

接口请求参数需要加密及返回 response 解密

接口请求参数需要添加计算 token

可视化表达主要是为了方便用户生成自动化测试所用到的参数，通过一个树形选择性，快速引用所依赖的参数值。 在所有的需要测试的接口配置完成后，点击开始测试，就会按照指定的顺序依次测试所有接口，测试完成后，可查看测试报告。

4.插件机制

YApi 最强大的一点莫过于他的插件机制，我们去哪儿各个业务线有不同的需求，通过 YApi 预留的钩子，开发不同的插件解决，比如我们现有的 qsso 登录，swagger 数据导入就是通过插件机制实现的，我们团队最近还在跟业务部门讨论使用插件实现压力测试功能等。总得来说，YApi基于插件机制，既满足了产品需求的多样性，又保证了内核足够易用和简洁。

5. 开源和易部署

为了帮助更多开发者和提升大家的工作效率，YApi 不仅开源到 github，还提供了一个 cli 工具方便广大开发者部署。使用 yapi-cli 提供的可视化部署方案，即便你不懂任何 nodejs、mongodb 的知识，也能轻松一键部署。

后记

YApi 已在去哪儿大面积使用，对 200+ 项目接口进行管理，每周有上万次 mock 请求。在开源以后，越来越多的公司和团队使用 YApi， github star 数已经上升到 1.3k了。YApi 在未来还将继续专注于接口管理方面的功能，让 YApi 成为各位开发者的好帮手。

使用MOCK对象进行单元测试

出了什么问题？      单元测试的目标是一次只验证一个方法 小步的前进 细粒度的测试 但是假如某个方法依赖于其他一些难以操控的东东 比如说网络连接 数据库连接 或者是Servlet容器 那么我们该怎么办呢？      要是你的测试依赖于系统的其他部分 甚至是系统的多个其他部分呢？在这种情况下 倘若不小心 你最终可能会发现自己几乎初始化了系统的每个组件 而这只是为了给一个测试创造足够的运行环境让它们可以运行起来 忙乎了大半天 看上去我们好像有点违背了测试的初衷了 这样不仅仅消耗时间 还给测试过程引入了大量的耦合因素 比如说 可能有人兴致冲冲地改变了一个接口或者数据库的一张表 突然 你那卑微的单元测试的神秘的挂掉了 在这种情况发生几次之后 即使是最有耐心的开发者也会泄气 甚至最终放弃所有的测试 那样的话后果就不能想像了    再让我们看一个更加具体的情况 在实际的面向对象软件设计中 我们经常会碰到这样的情况 我们在对现实对象进行构建之后 对象之间是通过一系列的接口来实现 这在面向对象设计里是最自然不过的事情了 但是随着软件测试需求的发展 这会产生一些小问题 举个例子 用户A现在拿到一个用户B提供的接口 他根据这个接口实现了自己的需求 但是用户A编译自己的代码后 想简单模拟测试一下 怎么办呢？这点也是很现实的一个问题 我们是否可以针对这个接口来简单实现一个代理类 来测试模拟 期望代码生成自己的结果呢？      幸运的是 有一种测试模式可以帮助我们 mock对象 Mock对象也就是真实对象在调试期的替代品

现在需要Mock对象吗？      关于什么时候需要Mock对象 Tim Mackinnon给我们了一些建议          真实对象具有不可确定的行为(产生不可预测的结果 如股票的行情)        真实对象很难被创建(比如具体的web容器)        真实对象的某些行为很难触发(比如网络错误)         真实情况令程序的运行速度很慢         真实对象有用户界面        测试需要询问真实对象它是如何被调用的(比如测试可能需要验证某个回调函数是否被调用了)        真实对象实际上并不存在(当需要和其他开发小组 或者新的硬件系统打交道的时候 这是一个普遍的问题) 如何实现Mock对象？      使用mock对象进行测试的时候 我们总共需要 个步骤 分别是        使用一个接口来描述这个对象       为产品代码实现这个接口       以测试为目的 在mock对象中实现这个接口      在此我们又一次看到了针对接口编程的重要性了 因为被测试的代码只会通过接口来引用对象 所以它完全可以不知道它引用的究竟是真实的对象还是mock对象 下面看一个实际的例子 一个闹钟根据时间来进行提醒服务 如果过了下午 点钟就播放音频文件提醒大家下班了 如果我们要利用真实的对象来测试的话就只能苦苦等到下午五点 然后把耳朵放在音箱旁 我们可不想这么笨 我们应该利用mock对象来进行测试 这样我们就可以模拟控制时间了 而不用苦苦等待时钟转到下午 点钟了 下面是代码

public interface Environmental {    private boolean playedWav = false;    public long getTime();    public void playWavFile(String fileName);    public boolean wavWasPlayed();    public void resetWav();    }

真实的实现代码

public class SystemEnvironment implements Environmental {    public long getTime() {    return System currentTimeMillis();          }    public void playWavFile(String fileName) {             playedWav = true;          }    public boolean wavWasPlayed() {    return playedWav;          }    public void resetWav() {             playedWav = false;          }    }

下面是mock对象

public class MockSystemEnvironment implements Environmental {    private long currentTime;    public long getTime() {    return currentTime;          }    public void setTime(long currentTime) {    this currentTime = currentTime;          }    public void playWavFile(String fileName) {             playedWav = true;          }    public boolean wavWasPlayed() {    return playedWav;          }    public void resetWav() {             playedWav = false;          }    }

下面是一个调用getTime的具体类

import java util Calendar;     public class Checker {    private Environmental env;    public Checker(Environmental env) {    this env = env;          }    public void reminder() {             Calendar cal = Calendar getInstance();             cal setTimeInMills(env getTime());    int hour = cal get(Calendar HOUR_OF_DAY);    if(hour = ) {                env playWavFile( quit_whistle wav );             }          }    } 

使用env getTime()的被测代码并不知道测试环境和真实环境之间的区别 因为它们都实现了相同的接口 现在 你可以借助mock对象 通过把时间设置为已知值 并检查行为是否如预期那样来编写测试

import java util Calendar;    import junit framework TestCase;     public class TestChecker extends TestCase {    public void testQuittingTime() {                MockSystemEnvironment env = new MockSystemEnvironment();                Calendar cal = Calendar getInstance();                cal set(Calendar YEAR );                cal set(Calendar MONTH );                cal set(Calendar DAY_OF_MONTH );                cal set(Calendar HOUR_OF_DAY );  

cal set(Calendar MINUTE );    long t = cal getTimeInMillis();                env setTime(t );                Checker checker = new Checker(env);                checker reminder();                assertFalse(env wavWasPlayed());                 t += ( * * );                env setTime(t );                checker reminder();                assertTrue(env wavWasPlayed());                env resetWav();                t += * * * ;                env setTime(t );                checker reminder();               assertTrue(env wavWasPlayed());          }    }

 

这就是mock对象的全部 伪装出真实世界的某些行为 使你可以集中精力测试好自己的代码

好像有一些麻烦      如果每次都像上面那样自己写具体的mock对象 问题虽然解决了 但是好像有一些麻烦 不要着急 已经有一些第三方现成的mock对象供我们使用了 使用Mock Object进行测试 主要是用来模拟那些在应用中不容易构造(如HttpServletRequest必须在Servlet容器中才能构造出来)或者比较复杂的对象(如JDBC中的ResultSet对象)从而使测试顺利进行的工具 目前 在Java阵营中主要的Mock测试工具有JMock MockCreator Mockrunner EasyMock MockMaker等 在微软的 Net阵营中主要是Nmock NetMock等       下面就以利用EasyMock模拟测试Servlet组件为例 代码如下       编译并将其当做一个Test Case运行 会发现两个测试方法均测试成功 我们可以看到easymock已经帮助我们实现了一些servlet组件的mock对象 这样我们就可以摆脱web容器和servlet容器来轻松的测试servlet了

import easymock *;    import junit framework *;    import javax servlet *;     public class MockRequestTest extends TestCase{    private MockControl control;    private HttpServletRequest mockRequest;    public void testMockRequest(){    //创建一个Mock HttpServletRequest的MockControl对象          control = MockControl createControl(HttpServletRequest class);      //获取一个Mock HttpServletRequest对象          mockRequest = (HttpServletRequest) control getMock();    //设置期望调用的Mock HttpServletRequest对象的方法          mockRequest getParameter( name );    //设置调用方法期望的返回值 并指定调用次数 //以下后两个参数表示最少调用一次 最多调用一次          control setReturnValue( kongxx );           //设置Mock HttpServletRequest的状态 //表示此Mock HttpServletRequest对象可以被使用          control replay();    //使用断言检查调用          assertEquals( kongxx mockRequest getParameter( name ));    //验证期望的调用          control verify();         }    }

编译并将其当做一个Test Case运行 会发现两个测试方法均测试成功 我们可以看到easymock已经帮助我们实现了一些servlet组件的mock对象 这样我们就可以摆脱web容器和servlet容器来轻松的测试servlet了

底层技术是什么？      让我们来回忆一下 如果用户使用C++和java的程序的生成 C++在最后的阶段还需要连接才能生成一个整体程序 这在灵活性与java源代码的机制是不能比的 java的各个类是独立的 打包的那些类也是独立的 只有在加载进去才进行连接 这在代码被加载进去的时候 我们还可以执行很多的动作 如插入一些相关的业务需求 这也是AOP的一个焦点 javassit代码库的实现类似于这 正是利用这些 所以用java实现Mock对象是很简单的

lishixinzhi/Article/program/Java/JSP/201311/19222

关于前端工具easy mock和前端工具库的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 前端工具easy mock的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于前端工具库、前端工具easy mock的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。