mock

1、先下载依赖 2、再main.js中引入（4中的index 文件） require('./mock/index.js') 3、准备好你的数据，注意，格式一定要和接口格式一样， 4、再src下创建mock文件，分别创建index.js 和user.js ， index.js （文件名称随意，一定要再main.js中引入，主要用mock拦截接口，并返回数据） import Mock from 'mockjs' import User from './user' // Mock.mock(RegExp('rules/get_status'+".*"), 'get',(options) => { return User.rule // 返回模拟数据 }) user.js(保存假数据) let station = [{ 'id': -1, 'desp': "6002", },{ 'id': -1, 'desp': "6002", }] let user = { station } export default user 一定要注意的是接口是否带参数，如果不带参数，可以直接拦截接口 Mock.mock('/Info', 'get',(options) => { return [{'name':'1'},{'name':'2'}] // 返回模拟数据 }) 如果带参数的话，需要用到正则表达式

前言 最近一直在捣鼓毕设，准备做的是一个基于前后端开发的Mock平台，前期花了很多时间完成了功能模块的交互。现在进度推到如何设计核心功能，也就是Mock数据的解析。 根据之前的需求设定加上一些思考，用户可以像写json一般轻松完成数据的mock，也可以通过在mock数据模型之上进行构建出复杂的数据模型并在项目中引用。 这看似简单的需求其实需要处理几个不同的模块功能以及交互设计。该如何处理解析不同mock数据并进行构造？前端交互中模拟数据该如何处理？数据构造时如何加载用户设定的数据模型？错误捕捉与处理？ 这些都暂时没有一个好的处理结果。因此想要完成核心功能我们需要明确需求，并且通过同类产品是如何处理的，通过阅读它们的源码来学习思想并加入。 明确需求 在明确该功能模块之前我们可以通过模拟流程来明确。 用户 -> 添加数据模型 - > 实时看到构造结构 用户 -> 添加接口 -> 构造json格式返回参数 -> 预览 构造json格式返回参数 不仅包含返回的正文，同时也设定了 header 和 method。 阅读源码 符合大部分需求的开源项目有 mock.js easy-mock eolinker YAPI DOCCLEVER MOCK.JS篇 首先我们需要明确现阶段大部门的 Mock 平台或多或少都是受到 Mock.js 的思想或者是其增强版。 我们可以用下面简单的 json 通过

1）安装mockjs，这一步跳过 2）在项目中建立mock模块，笔者的目录结构如下 mock模块与接口模块一一对应，有一个接口，就有一个mock 3）编写登陆模块mock接口，代码如下： import * as appUtils from '../../utils/appUtils' /** * 系统接口MOCK模块 * @param opt */ export const login = { type: 'get', url: '/login', cb: opt => { const params = appUtils.getParams(opt.url) console.log('%cmock拦截, 响应: ', 'color:blue', params) return params } } 其中cb,为一个function对象，入参为接口参数 该方法内，可以根据入参定制返回结果 4）编辑mock模块索引文件index.js,代码如下： import Mock from 'mockjs' import * as login from './module/login' const modules = [login] // MOCK 初始化配置 Mock.setup({ timeout: '200-600' }) for (const module of modules) {

Mock概念介绍 mock的定义（what）： mock是在测试过程中，对于一些不容易构造/获取的 对象 ，创建一个mock对象来模拟对象的 行为 为什么要使用mock（why）： 在做单元测试过程中，经常会有以下的场景： class A 依赖 class B class B 依赖 class C和class D class C 依赖 ... class D 依赖 ... 1.被测对象依赖的对象构造复杂 我们想对class A进行单元测试，需要构造大量的class B、C、D等依赖对象，他们的构造过程复杂(体现在构造步骤多、耗时较长)，这时我们可以利用mock去构造虚拟的class B、C、D对象用于class A的测试，因为我们只是想测试class A的行为是否符合预期，我们并不需要测试依赖对象。 2.被测单元依赖的模块尚未开发完成，而被测对象需要依赖模块的返回值进行测试： ----- 比如service层的代码中，包含对dao层的调用，但dao层代码尚未开发 ----- 比如web的前端依赖后端接口获取数据进行联调测试，但后端接口并未开发完成 哪些时机和场合需要使用mock（when&where） 1.单元测试/接口测试中测试对象依赖其他对象，这些对象的构造复杂、耗时或者根本无法构造(未交付) 2.我们只测试对象内部逻辑的质量，不关心依赖对象的逻辑正确性和稳定性

Mock 文章目录 Mock mock 介绍 目的 优点 缺点 comment 安装 mock 实现 mock 介绍 mockjs官方使用文档 目的 方便生成随机数据，拦截Ajax请求。   偶尔会写一些前端的项目，参考一些比较知名的UI框架，里面很多例子都会把数据直接写在里面，作为参考，因此很多项目里面也会这样手写数据，直接写死在前端，将代码与mock数据紧密结合在一起，每次需要修改数据，都需要直接改动到代码层，前端本身改动就非常大，如此频繁的修改代码层面显然不是很好的实践。 同时手写的数据，美观与真实性差异就看作者水平了。 优点 非常简单强大，入手快 拦截api请求，mock出真实的前后端交互情况 更改mock数据方便，与业务代码分离，频繁修改也不会有太大的危险 在后端接口准备好前，通过mock接口来模拟与后台的交互，同时调整数据结构。 开发过程中，mock数据也可以与后端提前讨论，引导后台的数据结构更加合理。 后台开发完以后，可以一次性切换接口 缺点 灵活性不够，无法mock后台一些异常处理返回 Build成静态文件以后线上无法使用(或许我没有找对方法) comment    针对第一个问题，忽然想到一种方案，或许你可以在同一个接口里面，mock不同的response，然后采用随机函数，随机的返回各种异常response

Ng-Alain Ng-Alian 是基于 Antd 实现的一个前端框架。它基于 Angular 和 NG-ZORRO ，在此基础上进行进一步封装，是中后台的前端解决方案，为我们提供更多通用性业务模块，让我们更加专注于业务。 在前后端分离开发的场景中，可能已经约定好了数据结构， API 具体的业务逻辑还没写，前端开发常常会使用到假数据，来保证前端开发不会受阻。等到 API 定义好后才真实的发起请求。 假数据可以实现一些测试的能力，例如“页面格式问题测试”，“边界测试”，“错误返回测试”等。 Mock 数据是模拟数据，假数据。 Ng-Alain Mock Ng-Alain Mock 解决了一些痛点，无疑是使用 Ng-Alain 框架使用得最频繁的功能之一了。 Ng-Alain Mock 支持 GET （如获取列表详情）、 POST （如新增项目）、 PUT （如修改项目）、 DELETE （如删除项目）请求 只需要简单的配置，就可以实现模拟请求，并返回数据。但是它不会真的发起 Http 请求。 Angular 项目中使用 Ng-Alain Mock 要使用 Ng-Alain 首先需要先安装依赖包。 安装 Mock 依赖包，参见 官网安装方法 。 在项目根目录下新建 _mock 目录，新建 task.ts 填充假数据，新建 index.ts 文件用来导出模拟数据文件，并导出 task

前后端不分离 在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。 这种应用模式比较适合纯网页应用，但是当后端对接App时，App可能并不需要后端返回一个HTML网页，而仅仅是数据本身，所以后端原本返回网页的接口不再 适用于前端App应用，为了对接App后端还需再开发一套接口。 请求的数据交互如下图: 前后端分离 在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，App有App的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。 在前后端分离的应用模式中 ，前端与后端的耦合度相对较低。 在前后端分离的应用模式中，我们通常将后端开发的每个视图都称为一个接口，或者API，前端通过访问接口来对数据进行增删改查。 对应的数据交互如下图 : 前后端分离并没有网上说的那么复杂。 1. 首先要知道所有的程序都是一数据为基础的，没有数据的程序没有实际意义，程序的本质就是对程序的增删改查。 2. 前后端分离就是把数据操作和显示分离出来。前端专注做数据显示，通过文字，图片或者图标等方式让数据形象直观的显示出来。后端专注做数据的操作

当前端工程师需要独立于后端并行开发时,后端接口还没有完成,那么前端怎么获取数据？ 这时可以考虑前端搭建web server自己模拟假数据,这里我们选第三方库 mockjs 用来生成随机数据,拦截 Ajax 请求。 特点：前后端分离，增加了单元测试的真实性，用法简单，方便扩展 示例：在jquery中使用mock 1.新建文件，引入jquery.js和mock.js <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script> 2.新建mock文件，里面新建index.js文件并且引入。 Mock.mock('/user/userinfo','get',{ id: "@id()",//得到随机的id,对象 username: "@cname()",//随机生成中文名字 date: "@date()",//随机生成日期 avatar: "@image('200x200','red','#fff','avatar')",//生成图片,参数:size, background, foreground, text description: "@paragraph(

1伪造方法和伪造类 在Faking API的上下文中， 假方法 是 假类 中使用注释 @Mock的方法 。 伪类是扩展 mockit.MockUp<T> 通用基类的 任何类 ，其中 T 要伪造的类型。 下面的示例显示了在伪类中为示例“真实”类 javax.security.auth.login.LoginContext 定义的几种伪方法 。 public final class FakeLoginContext extends MockUp<LoginContext> { @Mock public void $init(String name, CallbackHandler callback) { assertEquals("test", name); assertNotNull(callback); } @Mock public void login() {} @Mock public Subject getSubject() { return null; } } 当将伪类应用于真实类时，后者将获得那些方法和构造函数的实现，这些方法和构造函数将具有相应伪方法的临时替换为在伪类中定义的匹配伪方法的实现。 换句话说，在应用假类的测试过程中，真实类变得“伪造”。 每当它们在测试执行期间收到调用时，其方法将相应地响应。 在运行时，真正发生的是拦截了伪造的方法/构造函数的执行

由于公司框架依赖别的模块, 导致我们开发老是需要跟着他们的脚步, 所以我的上级领导提出这个方案说直接跳过他们,我们自己在本地测试,然后就找了它, 导入相关jar <dependency> <groupId>org.powermock</groupId> <artifactId>powermock-api-mockito</artifactId> <version>1.4.12</version> <scope>test</scope> </dependency> <dependency> <groupId>org.mockito</groupId> <artifactId>mockito-all</artifactId> <version>1.8.5</version> <scope>test</scope> </dependency> <dependency> <groupId>org.powermock</groupId> <artifactId>powermock-module-junit4</artifactId> <version>1.4.12</version> <scope>test</scope> </dependency> PowerMock 介绍与使用 一、为什么要使用Mock工具 在做单元测试的时候，我们会发现我们要测试的方法会引用很多外部依赖的对象，比如：