之前做mock数据一直用的json-server,今天同事给我推荐了很好用的工具:Easy Mock,我看完之后是下图的状态 很得劲啊,感觉人生已经达到了高潮 既能伪造接口,又能根据既定的规则生成对应的假数据,舒服啊 Easy Mock 是一个可视化,并且能快速生成 模拟数据 的持久化服务,链接:https://www.easy-mock.com/docs 但是看了看我发现它引入了mockjs,语法使用了mockjs的语法,所以我又跑去看mockjs,链接:http://mockjs.com/…

使用Easy Mock 一.什么是Easy Mock    Easy Mock 是一个可视化的能快速生成模拟数据的持久化服务.在实际开发中常见的Mock方式一般是将模拟数据直接写在代码里,利用JavaScript拦截请求或者利用 Charles.Fiddler等代理工具拦截请求,这样的开发效率比较低,并且产生的数据是写死的,不能去按照一定的规则去变化,并且浪费了非常多的时间,因此有了这个产品的出现,我们可以容易的访问数据,而且这些数据还是动态变化的,特别适合我们进行测试,学习成本非常低,可以说了…

前言:在线使用Easy Mock可视化工具,可以提供快速生成“模拟数据”的持久化服务: Mock.js是一个JS插件,指定了一套规范,而Easy Mock工具就遵循这些规范.  一.Easy Mock的使用 官网 官网地址:https://www.easy-mock.com/login 未注册用户直接登录便可注册 使用 创建个人项目 自定义项目 创建完成 创建接口 接口设置 数据规则定义 编辑接口 更改数据 接口设置更新 预览数据  二.Mock.js规范 官网 官网地址:http://mock…

Easy-mock easy-mock是一款比较好用的接口模拟工具, 使用之前我们需要安装和配置 需要下载的内容有以下 Node Redis MongoDB Node和Redis一路点下一步就行, MongoDB可以参考 MongoDB安装和运行 安装完成后就可以从github上下载easy-mock并开始使用了 $ git clone https://github.com/easy-mock/easy-mock.git $ cd easy-mock && npm install 依赖安装…

最近在自己捣腾个vue的项目,苦于没有接口测试.网上搜寻一遍,基本上是使用mock.js模拟数据.研究mock.js 过程中,发现很多人提到了Easy Mock,发现它更加的方便.但是访问Eash Mock基本是一个打不开的状态. 直接来到它的github.看它的issue,很多人都说到了它打不开的问题: 点开这些个issue,发现有个小天使自己搭建了一个easy-mock,他有提到推荐大家搭建本地版本.于是乎,就开始踏上了本地部署的道路. 对应的issue链接 主要参考的博客: easy-mo…

一.使用easy mock模拟数据 easy mock链接地址 二.自己写移动自适应布局 自己编写主要是利用rem进行宽度栅格布局: html { /* 相当于一个界面适配器,pc以及移动端都可以进行设置 */ font-size: 37.5px; } .box, .box1, .box2 { /* rem为相对单位 适用于移动开发 相对于根源即为html */ width: 10rem; height: 3rem; background-color: red; } .box1 { backgr…

为了不影响前端开发的进度,一般后端都是先定数据结构,然后写个假接口让前端调用,这样前端就不必等着后端接口开发完成以后再开始了.届时,前后端以及UI和测试就可以并行,待双方都把各自的逻辑写好了,便可以联调了.如果我们自己用写代码的方式造数据,那效率就太低了,最简单的是使用Mock Server.下面分别介绍Postman的Mock Server和Easy Mock. 1.  Postman 首先,新建一个Mock Server 填写请求路径和响应的内容即可,这些{{url}}暂时先不用管,因为Mo…

一.简介 在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 问题二.返回数据操作难:数据返回不对或者不够怎么办?怎么才能灵活的操作数据? 这是很多公司前后端分离之后带来的困扰,那怎么来解决这些问题? 问题一的一般解决方案:后端团队共同维护一个在线文档,每次改接口再去改对应的文档,但难免会遗漏,花的大力气但却效果平平. 问题二的一般解决方案:自己搭建一个Mock服务…

转载:http://blog.csdn.net/sai739295732/article/details/73957138 2.可以集成swagger 3.我们来玩一下 首先你需要一个swagger 服务: 其次我们需要一个easy-moke 网站账号: 接下来选择一个项目 点击编辑项目的配置 配置好项目信息 之后点击更新swagger 就可以看到生成的接口 接下来点击编辑,修改mock 数据的模型 这里的数据模型的写法参考mock 语法:http://mockjs.com/examples.h…

首先解释一下什么是mock接口. Mock通常是指,在测试一个对象时,我们构造一些假的对象来模拟与其交互.而这些Mock对象的行为是我们事先设定且符合预期.通过这些Mock对象来测试对象在正常逻辑,异常逻辑或压力情况下工作是否正常. 引入Mock最大的优势在于:Mock的行为固定,它确保当你访问该Mock的某个方法时总是能够获得一个没有任何逻辑的直接就返回的预期结果.Mock接口就是用一些合理的手段构造对象去模拟真实接口,达到我们需要的测试效果.测试场景有哪些呢? 依赖的上游项目的接口尚未开发完…

jQuery.ajax()方法的应用 jQuery.ajax()的无忧回调(优雅的代码风格) 一.jQuery.ajax()方法的应用 jQuery.ajax()实质上就是在ajax的基础上进行了封装,将参数设置,方法调用,数据传输,响应的回调函数等都封装到一个对象中,然后使用这个对象作为jQurey.ajax()的参数调用实现统一配置执行的效果. jQuery.ajax(object)中的object的常用属性及设置: url:请求地址 type:HTTP的请求方法 success:请求成功的…

随着互联网发展,前后端分离的开发模式兴起,Mock也从以住的幕后走上了台面,让更多的人而得知, 以前传统的开发方式Mock大多局限在后端人员接触较多一些,那么什么是Mock? Mock其实就是真实数据存在之前,即调试期间的代替品,是个虚拟的存在, 场景:比如开发新功能,客户端需要等后端接口开发完毕之后再写前端逻辑,而后端可能需要好几天开发功能,总不能让客户端干等着吧?需求很急咋办?那么mock久派上用场了.这里分享一个开源类: https://gitee.com/gouguoyin/phpmoc…

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 前言 本文列出了很多与前端有关的常见网站.博客.工具等,整体来看比较权威.有些东西已经过时了,我就不列出来了. 学是一方面,也是最主要的方面:但还有一个作用,比如,"这个前端框架你都不知道啊"."这个前端大牛你都没听说过啊" ,此时,这份清单就能起到作用了.如果你能把清单里列出的内容都了解下,逼格也会高很多. 技术社区 GitHub:https://gi…

Introduction This boilerplate is targeted towards large, serious projects and assumes you are somewhat familiar with Webpack and vue-loader. Make sure to also read vue-loader's documentation for common workflow recipes. If you just want to try out vu…

鄙人星云,今天突然想写这么一篇需要持续更新的文章,主要目的用于总结当前最流行的技术和工具,方便自己也方便他人. 更新时间:2018-10-23 09:26:19 码农职业路径图 码农入门职业路径图 Java后端开发优势图 Java 软件工程师技术栈 JDK: 1.8+ Java 基础:I/O(NIO),  集合,多线程,网络编程,并发,JVM内存模型, 设计模式 Java Web 基础:Spring Java Web框架: Spring Boot 2.0, Spring MVC ,Spring…

前言 文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么! 有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理取闹的键盘侠” – 国际新闻版块欢迎你去 “有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间! 对于以上三类人,走吧,这里不是你来装逼的地方. 你们也不值得看老子花那么多时间去汇总的水文. 学习一些新东西.若是有人给汇总…

Q:我给组件内的原生控件添加事件,怎么不生效了!!! <!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件--> <!--// 错误例子1--> <el-input placeholder="请输入特定消费金额 " @mouseover="test()"></el-input> <!--// 错误例子2--> <router-link :to="item.menuUrl&qu…

为了不影响前端开发的进度,一般后端都是先定数据结构,然后写个假接口让前端调用,这样前端就不必等着后端接口开发完成以后再开始了. 届时,前后端以及UI和测试就可以并行,待双方都把各自的逻辑写好了,便可以联调了. 如果我们自己用写代码的方式造数据,那效率就太低了,最简单的是使用Mock Server.在我自学前端知识的时候,那些前端的都喜欢使用php去搭建后台数据 作为一个做java的,正想说一句,....,那么我们就可以用postman创建mockserver   下面分别介绍Postman的Mo…

easy-mock本地部署成功后,迫不及待的想看看是否能正常访问,执行命令 npm run dev 启动项目,访问 127.0.0.1:7300 ,结果郁闷的是报错:EADDRNOTAVAIL 0.0.0.0:7300 一开始看到这个报错信息我就懵逼了,按照官网文档上一步一步的部署过来的,按套路来说应该不会出现这种情况啊,理所应当的就是访问的easy-mock的登录页面呀,谁成想出现这个问题. 郁闷了良久,到处找解决方案,最终发现这个报错原因是因为IP问题. 马上查看了easy-mock项目源代…

前言 发现群里有些问题的提问重复率太高了,每次都去回答,回答的贼烦.这里做一个大体的汇总,废话不多说,直接开始给出方案,不是手把手..若是连问题和解决都看不懂的..应该去补充下基础知识 问题汇总 Q:安装超时(install timeout) 方案有这么些: cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ npm install -g cnpm --registry=https://registry.npm.taoba…

问题汇总 Q:安装超时(install timeout) 方案有这么些: cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ npm install -g cnpm --registry=https://registry.npm.taobao.org // cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些 yarn 和 npm 改源大法 使用 nrm 模块 : www.npmjs.com/package/nr…

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.创建角色 权限菜单设计:RBAC权限模型(详解链接) RBAC,即基于角色的访问控制(Role-Based Access Control),是优秀的权限控制模型 主要通过角色和权限建立管理,再赋予用户不同的角色,来实现权限控制的目标 角色列表展示:对应Easy Mock数据接口/role/li…

前言:百度地图是网页中使用地图的常用第三方工具,这里结合React项目中学到的应用场景总结一些使用要点. 一.在网页中嵌入百度地图 搜百度地图开放平台,注册百度开发者账号 控制台:查看应用.创建应用(获得百度地图密钥) 开发文档:选择JavaScriptAPI Referer白名单:*   (例如*.tedu.cn  域名只能有这个字段,才能使用这个密钥,避免因盗用密钥使用自己网站的服务) 创建一个网站:登录百度地图开发者平台,为网站申请一个地图的AccesKey(全球唯一网站密钥) 在自己的网…

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.创建员工表单子组件 创建员工.编辑员工.员工详情.删除员工共用一个Modal弹框表单 <Modal title={this.state.title} visible={this.state.isVisible} onOk={this.handleSubmit} onCancel={() =>…

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.项目工程化概念  二.BaseForm的封装 城市管理中FilterForm子组件: 订单管理中FilterForm子组件: 员工管理中FilterForm子组件: [项目工程化]:表单封装 components->BaseForm->index.js 关键:抽象出formList,根据fo…

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.城市管理 pages->city->index.js:对应路由/admin/city 顶部子组件一:选择表单 class FilterForm extends React.Component{ render(){ const { getFieldDecorator } = this.prop…

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.基础表格 Table组件基础Api bordered属性:是否展示外边框和列边框 columns属性:表格列的配置描述(即表头) dataSource属性:数据数组 pagination属性:分页器,设为 false 时不展示和进行分页 <Card title="基础表格"&g…

本人微信公众号:前端修炼之路,欢迎关注 背景介绍 经过上一篇文章uni-app官方教程学习手记的学习之后,我就着手做这个项目了. 目前已经初步搭出了整体的框架,秉着取之于社会,回馈于社会的原则,我将这个项目开源到GitHub uni-shop,发展壮大uni-app社区.项目肯定有不足和考虑不周之处,欢迎大家指正并提出Issues. 因为这是个真实的项目,为了一名合格的程序员的职业操守,项目真实数据部分并不会开源.为了提高整体的流畅性和帮助自己开发,数据部分采用Easy Mock模拟的假数据.有…

Swagger 生成 PHP API 接口文档 Lumen微服务生成Swagger文档 1.概况 有同学反馈写几十个接口文档需要两天的工作量, 随着多部门之间的协作越来越频繁, 维护成本越来越高, 文档的可维护性越来越差, 需要一个工具来管理这些接口的文档, 并能够充当mock server给调用方使用. 有同学推荐了swagger+easymock,Swagger是一个简单但功能强大的API表达工具. 这里介绍使用swagger-php生成PHP API文档的方法. 2.安装与使用 2.1 安…

今天推荐一个好用的前端 mock 工具,Easy Mock,目前由大搜车无线架构团队进行维护,让我觉得特别好用的一点是 它支持 swagger(一个能称为框架的 API 书写工具),并能够基于 Swagger 快速创建项目(酷),使用 easy-mock 你需要具备几个相关工具或者知识,(mock.js语法,本地部署的话需要基本的node/npm/git操作,当然你可以完全不必要这么做,它的在线服务做的很好):下面是 easy-mock 的官方文档介绍. 正文~~~ 介绍 如果没有内网部署的条件…