应用 Mock API1. 什么是Mock API通过 Mock API当时编写好 API 的数据生成规定，由工具动静生成 API 的返回数据。开发人员通过拜访 Mock API 来取得页面所须要的数据，就能够轻松地实现对接工作。前后端人员只须要定义好接口文档就能够开始并行工作，互不影响，只在最初的联调阶段往来亲密； 后端与后端之间如果有接口耦合，也同样能被Mock解决。 测试过程中如果遇到依赖接口没有筹备好，同样能够借助Mock，不会呈现一个团队期待另一个团队的状况。 这样的话，开发自测阶段就能够及早发展，从而发现缺点的机会也提前了，有利于整个产品质量以及进度的保障。 2. 如何应用Mock API新建接口填写mock在线地址编写mock数据模板点击预览查看mock响应保留后，mock在线地址就能够应用了 apizza mock 是基于mock.js 开发的。具体文档能够 参见 mock.js 具体文档。
Mock 能做什么？1.API 没开发好，使用 Mock 快速对接在产品经理发布需求后，前后端同学先根据功能需求出一份 API 文档，然后再按照 API 文档并行开发。 不依赖后端提供数据的情况下，如何让前端独立于后端进行开发呢？ 使用 Mock,你可以在开发环境代码内置 Mock，拦截请求，模拟真实 API 返回。如果公司使用了接口管理平台，文档发布的时候可以还通过平台生成 Mock API 直接对接。 2.为测试提供数据使用Mock 假数据替代我们想控制但控制困难的部分 例如 某些 API 依赖其他 API 的返回值，使用 Mock 方便的对返回值进行改变，测试不同场景下 API 的表现。某个 API 特别慢，可以暂时用 Mock 代替它，快速调通整个场景测试流程。3.方便快速建立功能原型敏捷开发过程中，调整需求是很常见的。通过 Mock 可以快速建立功能原型，直观的看到业务逻辑，方便产品调整需求，还可以使用假数据对系统进行演示。 Mock 部署记录以下三种方案，各有千秋。 1.将 Mock 写到代码变量中，哪里需要写哪里例如 优点 成本低，使用简单，只需要学习 Mock.js 模板语法。不受网络影响。改动 Mock 能够快速看到效果。缺点 Mock 代码与业务代码耦合高，上线容易遗漏测试代码，为代码偷偷埋下一颗地雷。无法快速响应文档改动，保持 Mock 返回数据与文档一致。只有前端开发人员能用到 Mock，无法与其他部门人员协同工作。没有 API 请求，不够真实。2. Mock.js 拦截请求使用 Mock.mock 函数拦截请求 var data = Mock.mock("https://www.baidu.com", { "string|1-10": "★", //随机生成 1-10 个字符串"★"})var request = new XMLHttpRequest();request.open("GET", "https://www.baidu.com", true);request.send();request.onreadystatechange = function () { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText) }}控制台输出 ...
今天在做vue项目的mock功能，刚刚查了下网络上的文档，但令我感到以外的是，无论是官方文档还是网上的小例子，很难找到一个能从头到尾说明白mock的最基本用法的文章，大部分都是对接口的说明。拜托，对于一个刚刚接触mock的人来说，最需要的是一个能够运行的小例子，从头到尾给出一个简单的说明，这样能让开发人员最开始对mock的规范有一个很全面的理解。 因为最近做前端项目的缘故，查了很多前端技术的官方文档，很遗憾，大部分文档在我看来写的都是一坨屎。能够像国外的开源文档（比如spring boot，hibernate等）写的清晰有条理的很少很少（说很少都是客气了，基本上没有）。 先说一下我对mockjs的理解。定义上的东西不用多说，通俗解释，mockjs实际上是假数据+访问假数据的接口的集合，再说通俗点，就像一个水池和输传输水的管道，想要从这个水池抽水，首先管道要插进水池里，其次是水池里要有水。对于具体的项目来说，axios提供了管道，并将管道插进mock水池，mock.js就是实际的mock水池。无论项目写的有多复杂，本质上这种概念是不会变的。废话不多说，直接看demo 首先需要安装axios和mockjs的依赖。命令如以下所示（顺序不重要） npm i mockjs --savenpm install axios安装成功后，在项目根路径下的package.json的dependencies中会有这两个依赖的版本说明： "axios": "^0.19.0","mockjs": "^1.0.1-beta3",下面就是核心的code了： 首先,声明vue文件中的template文件。 我在这里用的是ElementUI自带的table组件。 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table></template>注意其中的:data="tableData"这一行，这里指定了table中使用的数据对象。 第二步,写假数据在项目src目录下新建mock.js文件，在其中加入以下内容： （此处注意一个知识点，大型项目里会创建mock文件夹，并将index.js及各个功能放在其中，本质上这是一样的，mock.js=mock/index.js） // 引入mockjsconst Mock = require('mockjs')// 使用mockjs模拟数据Mock.mock('/route1', (req, res) => { // 当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据 let list = [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] return { tableData: list }})第三步，将数据声明放到vue文件中（第一步涉及的vue文件） ...
上一篇文章，我们已经讲述了Jest中的基本使用，这一篇我们来说说如何深度使用Jest 在测试中我们会遇到很多问题，像如何测试异步逻辑，如何mock接口数据等... 通过这一篇文章，可以让你在开发中对Jest的应用游刃有余，让我们逐一击破各个疑惑吧！ 1.Jest进阶使用1.1 异步函数的测试提到异步无非就两种情况，一种是回调函数的方式，另一种就是现在流行的promise方式 export const getDataThroughCallback = fn => { setTimeout(() => { fn({ name: "webyouxuan" }); }, 1000);};export const getDataThroughPromise = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ name: "webyouxuan" }); }, 1000); });};我们来编写async.test.js方法 import {getDataThroughCallback,getDataThroughPromise} from './3.getData';// 默认测试用例不会等待测试完成，所以增加done参数，当完成时调用done函数it('测试传入回调函数 获取异步返回结果',(done)=>{ // 异步测试方法可以通过done getDataThroughCallback((data)=>{ expect(data).toEqual({ name:'webyouxuan' }); done(); })})// 返回一个promise 会等待这个promise执行完成it('测试promise 返回结果 1',()=>{ return getDataThroughPromise().then(data=>{ expect(data).toEqual({ name:'webyouxuan' }); })})// 直接使用async + await语法it('测试promise 返回结果 2',async ()=>{ let data = await getDataThroughPromise(); expect(data).toEqual({ name:'webyouxuan' });})// 使用自带匹配器it('测试promise 返回结果 3',async ()=>{ expect(getDataThroughPromise()).resolves.toMatchObject({ name:'webyouxuan' })})2.Jest中的mock2.1 模拟函数jest.fn()为什么要模拟函数呢？来看下面这种场景，你要如何测试 ...
最近完成了我的小爱ADMIN后台管理系统基本功能,同时进行了页面整体布局和样式的全新改版。新增了系统权限功能的实现，同时觉得后台系统所有的菜单都左置，会限制菜单的扩展，因此我改进了三级菜单的显示。 效果演示地址github地址权限功能的实现权限路由思路：根据用户登录的roles信息与路由中配置的roles信息进行比较过滤，生成可以访问的路由表，并通过router.addRoutes(store.getters.addRouters)动态添加可访问权限路由表，从而实现左侧和顶栏菜单的展示。 权限功能的实现步骤：1.给相应的菜单设置默认的roles信息在router/index.js中，给相应的菜单设置默认的roles信息;如下： 给"权限设置"菜单设置的权限为： { path: '/permission', name: 'permission', meta: { title: '权限设置', roles: ['admin', 'editor'] //不同的角色都可以看到 }}给其子菜单"页面权限",设置权限为： { path: 'page', name: 'pagePer', meta: { title: '页面权限', roles: ['admin'] //只有"admin"可以看到该菜单 }, component: () => import('@/page/permission/page'),}给其子菜单"按钮权限"设置权限为： { path: 'directive', name: 'directivePer', meta: { title: '按钮权限', roles:['editor'] //只有"editor"可以看到该菜单 }, component: () => import('@/page/permission/directive'),}2.通过router.beforeEach()进行路由过滤和权限拦截；代码如下: function hasPermission(roles, permissionRoles) { if (roles.indexOf('admin') >= 0) return true if (!permissionRoles) return true return roles.some(role => permissionRoles.indexOf(role) >= 0)}const whiteList = ['/login'] // 不重定向白名单router.beforeEach((to, from, next) => { NProgress.start() // 设置浏览器头部标题 const browserHeaderTitle = to.meta.title store.commit('SET_BROWSERHEADERTITLE', { browserHeaderTitle: browserHeaderTitle }) // 点击登录时，拿到了token并存入了cookie,保证页面刷新时,始终可以拿到token if (getToken('Token')) { if(to.path === '/login') { next({ path: '/' }) NProgress.done() } else { // 用户登录成功之后，每次点击路由都进行了角色的判断; if (store.getters.roles.length === 0) { let token = getToken('Token'); getUserInfo({"token":token}).then().then(res => { // 根据token拉取用户信息 let userList = res.data.userList; store.commit("SET_ROLES",userList.roles); store.commit("SET_NAME",userList.name); store.commit("SET_AVATAR",userList.avatar); store.dispatch('GenerateRoutes', { "roles":userList.roles }).then(() => { // 根据roles权限生成可访问的路由表 router.addRoutes(store.getters.addRouters) // 动态添加可访问权限路由表 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 }) }).catch((err) => { store.dispatch('LogOut').then(() => { Message.error(err || 'Verification failed, please login again') next({ path: '/' }) }) }) } else { // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓ if (hasPermission(store.getters.roles, to.meta.roles)) { next()// } else { next({ path: '/401', replace: true, query: { noGoBack: true }}) } } } } else { if (whiteList.indexOf(to.path) !== -1) { // 点击退出时,会定位到这里 next() } else { next('/login') NProgress.done() } }})router.afterEach(() => { NProgress.done() // 结束Progress setTimeout(() => { const browserHeaderTitle = store.getters.browserHeaderTitle setTitle(browserHeaderTitle) }, 0)})本系统权限逻辑分析1、路由对象区分权限路由对象和非权限路由对象；初始化时，将非权限路由对象赋值给Router;同时设置权限路由中的meta对象，如:meta:{roles:['admin','editor']},表示该roles所拥有的路由权限; ...
首页安装mockjsnpm install --save mockjs创建mock目录，再创建index.js文件，在里面写路由接口'/news/index' 创建封装路由接口回调方法presc-record-api.js文件 然后，在页面上请求接口即可 效果图，页面的数据会随机生成 最后，如果大家有什么看不懂的，可以在下方留言，可以一起讨论~~ 下面是对应的文件代码// mock/index.js/** * 定义本地测试接口，最好与正式接口一致，避免联调阶段修改工作量 */// 引入mockjsimport Mock from 'mockjs';// 引入模板函数类import record from './presc-record-api';// Mock.setup({// timeout: 100, // 设置延迟响应，模拟向后端请求数据// });// 文章列表Mock.mock('/news/index', 'get', record.produceNewsData(30));// 文章详情Mock.mock('/news/detail', 'post', record.newDateil);// mock/presc-record-api.js// 获取 mock.Random 对象// 引入mockjsimport Mock, { Random } from 'mockjs';// mock一组数据const produceNewsData = function (num = 30) { let articles = []; for (let i = 0; i < num; i++) { let newArticleObject = Mock.mock({ "new_id|1-1000": 100, "new_source|1": [ "案例库" ], "new_type|1": [ "民事", "刑事", ], "new_court|1": [ "最高院", "湘潭市岳塘区人民检察院", "本溪市人民政府", ], news_title: Random.csentence(5, 30), // Random.csentence( min, max ) news_subhead: Random.csentence(30, 100), news_cover: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码 new_issuer: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名 create_date: Mock.mock('@datetime("yyyy-MM-dd HH:mm:ss")'), // 返回一下日期 "2017-01-14 PM 14:02:43" news_content: Random.csentence(500, 3000), news_regulations: Random.csentence(300, 600), }) articles.push(newArticleObject) } return articles}// mock一组数据const newDateil = function () { let newArticleObject = Mock.mock({ "new_id|1-1000": 100, "new_source|1": [ "案例库" ], "new_type|1": [ "民事", "刑事", ], "new_status|1": [ "程序终结" ], "new_court|1": [ "最高院", "湘潭市岳塘区人民检察院", "本溪市人民政府", ], case_classify: [ "民事案件", "行政案件", "刑事案件", "经济案件", "民事案件", ], news_title: '康得新行政处罚确定后或面临民事赔偿责任', // Random.csentence( min, max ) news_subhead: Random.csentence(30, 100), news_cover: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码 new_issuer: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名 create_date: Mock.mock('@datetime("yyyy-MM-dd HH:mm:ss")'), // 返回一下日期 "2017-01-14 PM 14:02:43" news_content: '<p><span class="bjh-p">康得新行政处罚确定后或面临民事赔偿责任 坚持顶格从重处罚证监会严惩违法违规行为</span></p><p><span class="bjh-p">近日，康得新因信披违法手段极其恶劣、违法情节特别严重，被证监会下达了行政处罚预先告知书。证监会有关部门负责人8日表示，康得新行政处罚确定后或将面临民事赔偿责任。上述负责人表示，目前证监会做出的行政处罚，只是追责体系的一个环节，证监会将发挥立体追责体系作用，加大对违法违规案件处罚力度。</span></p><p><span class="bjh-p"><span class="bjh-strong">释放从严监管信号</span></span></p><p><span class="bjh-p">证监会有关部门负责人8日表示，康得新违法情节十分恶劣，一是2015年至2018年连续四年净利润实际为负；二是存在100多亿元不实货币资金；三是根据交易所规定，康得新已触发退市条件，*ST康得已于7月8日停牌。待后续作出行政处罚后，若触及交易所重大违法退市规则，企业将依规进入退市整理期。</span></p><p><span class="bjh-p">值得一提的是，此次对康得新案的处理过程中，证监会对主要负责人强调顶格处罚，对其他责任人员给予从重处罚。分析人士指出，坚持顶格从重处罚释放出证监会从严监管信号。“从重处罚”是指行政机关在法定的处罚方式和处罚幅度内，对行政违法行为人在数种处罚方式中适用较严厉的处罚方式，或者在某一种处罚方式允许的幅度内适用较接近上限或上限的处罚，而适用上限的处罚就是“顶格处罚”。</span></p><p><span class="bjh-p">此外，上述负责人表示，对于康得新信息披露违法行为，投资者可以根据最终做出的行政处罚决定来追究上市公司虚假陈述的民事赔偿责任，行政处罚做出之后，当事人将进入资本市场诚信档案体系中，受到诚信体系制约和诚信惩戒。</span></p><p><span class="bjh-p">证监会表示，下一步，将充分听取当事人的陈述申辩意见，以事实为依据、以法律为准绳，依法进行处罚；对涉嫌犯罪的，严格按照有关规定移送司法机关追究刑事责任。</span></p><p><span class="bjh-p"><span class="bjh-strong">发挥立体追责体系作用</span></span></p><p><span class="bjh-p">上市公司乱象屡禁不止的主要原因之一是违法违规成本过低。对此，证监会有关部门负责人提出，对案情严重的案件，监管层后续还会发挥立体追责体系作用。</span></p><p><span class="bjh-p">上述负责人指出，在对证券违法违规案件的追责过程中，行政处罚只是行政追责体系中的一环，如果涉及到刑事责任，还要加入刑事追责。对于违法违规责任的理解，应放在立体多层面理解，包括行政处罚追究、刑事追究、民事追究、诚信体系追究。</span></p><p><span class="bjh-p">证监会有关部门负责人指出，要用足用好现有规则严惩违法违规公司。一方面要用好现有制度，做到违法违规行为的“三及时”，及时发现、及时制止、及时查处；另一方面，最高法出台司法意见为科创板改革护航，明确科创板虚假陈述、欺诈发行法律责任，强化违法违规者民事赔偿责任，提供了执法依据。证监会将在现有制度下，严肃认真惩处资本市场违法违规行为。</span></p><p><span class="bjh-p">与此同时，中介机构将进入从严监管新阶段。证监会多次强调，绝不姑息中介机构与上市公司相关主体串通违规。其中，对于中介机构围绕上市公司开展证券业务未勤勉尽责的，证监会坚持一案双查，违法上市公司与不良中介一起处罚，严格处罚，绝不姑息，倒逼中介机构诚实守信，勤勉尽责，发挥好资本市场“看门人”作用。</span></p><p><span class="bjh-p">此外，备受关注的是，目前，提高资本市场违法违规成本已形成共识并提上改革日程。证券法修订稿草案三审稿增加了加大对证券违法行为打击力度的相关内容。此外，公司法、刑法等修改也在推进中。</span></p><p><span class="bjh-p">针对康得新案，证监会重申，上市公司及大股东必须讲真话，做真账，及时讲话，牢牢守住“四条底线”，不披露虚假信息，不从事内幕交易，不操纵股票价格，不损害上市公司利益。证监会将一如既往对上市公司信息披露违法行为依法严惩，净化市场生态，努力提升上市公司质量，服务实体经济发展，为打造一个规范、透明、开放、有活力、有韧性的资本市场保驾护航。</span></p>', case_list: produceNewsData(8) }) return newArticleObject}export default { produceNewsData, newDateil}
前言不知道各位 coder 有没有碰到过许多重复的业务需求，比如排版相类似的报表，只不过是顺序稍微换了一下，就是一个新的页面，虽然基于模板思想来写的话也能减少不少代码，但是相对的不那么方便，笔者最近就是碰到了类似的需求，忍无可忍，遂该项目便诞生了了。正文演示gif 图稍大，若加载不出来请稍等片刻 (..••..)项目地址如果觉得我有帮到什么忙的，欢迎 star，我会更有动力的 ( ••)。Vue 拖拽图表使用方法详细的开发指南和配置参数就不在此赘言，在项目文档中已经有详细的说明，这里只是稍微介绍一下。首先该项目分为两个页面，一个是拖拽排版页面，一个是预览页面，布局都在排版页面中完成在排版页面中，左侧的 + 用来添加行（row），右侧的 + 用来添加列（col），或称组件所有的操作皆可通过拖拽完成，在完成排版之后点击 >> 按钮即可预览生成的页面在预览页面中有纯前端实现的 pdf 导出功能，具体思想是将 dom 转为 canvas，再导出为图片，再将图片转为 pdf当前的数据传输方式是将布局保存在了 localstorage 中得以实现的实际项目中建议的流程是先在排版页面中新建或者修改布局，在预览页面再保存或者更新布局后语减少人类重复无意义的工作，这就是程序员存在的意义，同时也是我的目标，不可否认该项目里面还是有不少冗余代码，一点点修改一点点完善，也欢迎大家私信我交流交流，撒花。页脚代码即人生，我甘之如饴。我在这里 gayhub@jsjzh 欢迎大家来找我玩儿。欢迎小伙伴们直接加我，拉你进群一起学习前端呀，记得备注一下你来自哪里哦。
在项目开发的过程中，有时候会出现后端数据还没出来，而前端需要数据的情况。这时候，如果等着后端人员开发完再进行测试，联调则会拖慢开发进度。这时候，Mock就显示出它的魅力。它可以进行生成随机数据，模拟后端接口数据，从而实现开发时，前后端分离，提高效率。在使用Mock之前，应该先和后端人员讨论接口文档的基本结构，确认接口文档的内容。在根据确认好的接口文档，使用Mock模拟数据。最近在vue-cli搭建的项目静态页面已逐渐完善，此时若能有数据模拟渲染，那作为前端新手更能熟悉开发流程。查阅文档和其他小伙伴的文章，开始了模拟数据之旅。Mock的简单使用1、安装npm i mockjs -S2、引入在src文件目录下，新建mock.js文件并引入：const Mock = require(‘mockjs’)之后，在main.js文件中加载mock.jsrequire(./mock.js)3、简单使用格式： Mock.mock(“请求的URL地址”,{“数据对象”})自己的代码：const Mock = require(‘mockjs’);const Random = Mock.Random; // 当需要生成随机数据时使用，更多的随机数据的生成使用参照官网示例// 示例1Mock.mock(“http://localhost:8080/getData”,{ “code”: 1, “msg”: “请求接口成功”, “data”: [ { “id”: 1, “name”: “英语”, “createTime”: “2019-01-01T21:18:02.000+0000”, “updateTime”: “2019-01-01T21:18:07.000+0000”, “ordinal”: 1 }, { “id”: 2, “name”: “趣味”, “createTime”: “2019-01-01T21:18:24.000+0000”, “updateTime”: “2019-01-01T21:18:28.000+0000”, “ordinal”: 2 } ]});// 示例2Mock.mock(“http://localhost:8080/getBanner”,{ “name”:“learn”, “title”: Random.ctitle(), // 随机生成中文标题 “describe”: “learnEnglish”, “imgs”: [ “https://m.360buyimg.com/babel/jfs/t1/29191/26/4235/95551/5c2f2996Eba0b025d/c6a2aa923a67f952.jpg”, “https://img1.360buyimg.com/da/jfs/t1/28807/10/4306/85260/5c30484cE8f828f42/3b36d2a6b80d10eb.jpg”, “https://img10.360buyimg.com/da/jfs/t18487/241/1444742474/110119/f5bc9082/5acb3af6N2af11d1c.jpg”, “https://m.360buyimg.com/babel/jfs/t1/22710/5/3081/75342/5c244f9eE54c2699a/74f8c021c36b6366.jpg” ]});4、进一步使用参照官方文档，在mock.js文件中引入Mock之后，根据数据模板生成模拟数据：Mock.mock( rurl?, rtype?, template|function( options ))rurl：可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则，如/index.js => /^/index.js$/ rtype：可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。 template：可选。表示数据模板，可以是对象或字符串。例如 { ‘id|1-10’:[{}] }。 function(options)：可选。表示用于生成响应数据的函数。options 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性。① 记录数据模板。当拦截到匹配 url 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。第三点的简单使用采用的就是这种形式。Mock.mock( rurl, template )② 记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。Mock.mock( rurl, function( options ) )Mock.mock(“http://localhost:8080/getNewslist”, function(options){ return options.type});③ 记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。Mock.mock( rurl, rtype, template )Mock.mock(“http://localhost:8080/geNewsinfo”, “get”, { “code”: 1, “msg”: “请求接口成功”, “data”: [ { “id”: 1, “name”: “英语”, “createTime”: “2019-01-01T21:18:02.000+0000”, “updateTime”: “2019-01-01T21:18:07.000+0000”, “ordinal”: 1 } ]});④ 记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。Mock.mock( rurl, rtype, function( options ) )Mock.mock(“http://localhost:8080/getImage”, “get”, function(options){ return options.type}); ...
引言 今天我们来聊聊Mock，随着互联网发展，这两年前后端分离的开发模式兴起，Mock也从以住的幕后走上了台面，让更多的人而得知，以前传统的开发方式Mock大多局限在后端人员接触较多一些。 Mock已经是老生常谈了，网上一搜索就很多，各位前辈们都讲的很到位，但今天我只讲它——easy-mock。 为什么会突然来聊它，这个就说来话长了，个人简介里就说过，专注于分享工作中遇到的坑，但这一次不是我的坑，来源于QQ群友（# 如果您有想知道的故事，而正好我也会，那么就由我为您讲出来吧，欢迎留言哦 # ），请看下图：这里是@IT·平头哥联盟，我是首席填坑官—苏南,用心分享 做有温度的攻城狮。什么是Mock 什么是Mock?? Mock其实就是真实数据存在之前，即调试期间的代替品，是个虚拟的存在，用人话讲它就是个备胎，如女生长的好看，追她的人多，但又不是很满意但也不拒绝，在自己心仪的小哥哥出现之前，一直吊着你????！如何Mock数据？不要告诉我 new 一个哦，对象可以 new，备胎可new不出来呢????；方法一：最low的方式将 Mock 数据写在代码里、json文件里；方法二：利用 Charles 、Fiddler等代理工具，将 URL 映射到本地文件；方法三：本地起 Mock Server，即mockjs，有点麻烦每次修改了后还要重启服务，nodemon能解决，但开的东西多了，电脑卡出翔，维护也麻烦；方法四：规范些的公司自己已经集成了一套mock数据体系；重点来了：easy-mock一个在线 Mock 平台，活儿好又性感是你备胎的最佳选择。当然优秀的你可能还有很多其他的方式，欢迎补充。//mock 基本使用示例import Mock from “mockjs”;Mock.mock({ “code”: 0, “message”: “请求成功”, “data|20”: [{ “name”: “@cname”,//cname 中文，name 英文 “userId”: “@id”, “lastDate”: “@datetime” }]})什么是easy-mock，能给我们带来什么？Easy Mock 是一个可视化，并且能快速生成 模拟数据 的持久化服务，Easy Mock 支持基于 Swagger 创建项目，以节省手动创建接口的时间；简单点说：Easy Mock就是一个在线创建mock的服务平台，帮你省去你 配置、安装、起服务、维护、多人协作Mock数据不互通等一系列繁琐的操作， 它能在不用1秒钟的时间内给你所要的一切，呼之即来、挥之即去的2018最优秀备胎没有之一，完全不用担心负任何责任哦。更多优点它在等你去发现哦……深入浅出 - 简介就跟人一样长的再好看，了解过后才懂，一样东西也是如何，谁用谁知道；Easy Mock支持团队协作，也可以是个人项目，以下以个人项目为例，与多人协作没有区别，只是少了成员邀请；深入浅出 - Mock语法回顾@ip -> 随机输出一个ip；@id -> 随机输出长度18的字符，不接受参数；“array|1-10” -> 随机输出1-10长度的数组，也可以直接是固定长度；“object|2” -> 输出一个两个key值的对象，"@image()" 返回一个占位图url，支持size, background, foreground, format, text；等等，这里就不再一一介绍。深入浅出 - 创建一个接口它的写法，跟Mock.js一模一样,上面代码已经展示过，更多示例使用Easy Mock创建一个接口，请看下图：深入浅出 - 高阶用法 Function在线编辑，它也能支持 function ，是不是很优秀，能获取到全部请求头，可以让我们像写在js里一样写逻辑，写运算，当然它肯定是还有很多局限性的，如并不支持ES6，有一点需要注意的是 function 里要写传出Mock对象，不能直接@…，来看示例：对象描述MockMock 对象_req.url获得请求 url 地址_req.method获取请求方法_req.params获取 url 参数对象_req.querystring获取查询参数字符串(url中?后面的部分)，不包含 ?_req.query将查询参数字符串进行解析并以对象的形式返回，如果没有查询参数字字符串则返回一个空对象_req.body当 post 请求以 x-www-form-urlencoded 方式提交时，我们可以拿到请求的参数对象…_req.cookies、ip、host等等，我只是一个代码的搬运，更详细请看这里//简单模拟登录，根据用户传入的参数，返回不同逻辑数据{ defaultName:function({_req}){ return _req.query.name; }, code: function({_req}){ return this.defaultName ? 0 : -97; }, message: function({_req}) { return this.defaultName ? “登录成功” : “参数错误”; }, data: function({req,Mock}){ return this.defaultName ? { token: Mock.mock("@guid()"), userId: Mock.mock("@id(5)"), cname: Mock.mock("@cname()"), name: Mock.mock("@name()"), avatar: Mock.mock("@image(200x100, #FF6600)"), other:"@IT·平头哥联盟-首席填坑官∙苏南 带你再谈Mock数据之easy-mock" }:{} }}深入浅出 - 在线调试再优秀的工程师写出的代码也一样要测试，没有人敢说自己的代码无Bug，Easy Mock 它是真的懂你的，已经为你准备好了，接口编写好后，立马就能让你测试，是不是觉得很棒棒呢？？如果是你自己本地写mock数据，你需要重启服务、手动写参数、可能还需要整个测试页，知道你已经非常饥渴迫切的想要知道，具体的调试方式了：看不清吗？？已经为你备好在线调试链接，支持POST、GET、PUT等方式，因gif图加载比较大，就不一一演示了结尾： 天下无不散之宴席，又到说再见的时候了，以上就是今天苏南为大家带来的分享，您GET到了吗？Easy Mock更多强大之处自己去折腾吧，#用心分享 做有温度的攻城狮#，希望今天的分享能给您带来些许成长，如果觉得不错记得点个赞哦，，顺便关注下方公众号就更棒了呢，每周为您推最新分享????????。更多文章：immutability因React官方出镜之使用总结分享！小程序项目之做完项目老板给我加了6k薪资～小程序项目之填坑小记面试踩过的坑，都在这里了～你应该做的前端性能优化之总结大全！如何给localStorage设置一个过期时间？动画一点点 - 如何用CSS3画出懂你的3D魔方？动画一点点 - 手把手教你如何绘制一辆会跑车SVG Sprites Icon的使用技巧作者：苏南 - 首席填坑官链接：https://blog.csdn.net/weixin…交流群：912594095、公众号：honeyBadger8本文原创，著作权归作者所有。商业转载请联系@IT·平头哥联盟获得授权，非商业转载请注明原链接及出处。 ...