前后端分离之让前端开发脱离接口束缚(mock)

时间: 2018-06-06阅读: 640标签: 前端

前后端分重构完成,再书写交互时遇到后台接口尚未完成,无法得到接口返回的测试数据,但是我们又需要一些数据来测试我们的前端功能的时候,往往会在这种情况下卡壳;最常见的办法就是:等~~~,等后台哥们完成接口再继续开发,似乎有了一个正当划水的理由。但是这样一点也不符合咱们早完事早收工的工作理念,所以呢,今天学习的关于前端模拟AJAX的三种办法,用于应对以上情况,加快开发效率;

解决办法:  
1、mockjax.js和mockJSON.js
2、mock.js
3、gulp-mock-server
 

方法一:mockjax.js和mockJSON.js

简介:
mockjax.js和mockJSON.js都是基于jQuery开发的Javascript Library;
mockjax主要是可以针对指定的网址进行mock, 当Ajax呼叫网址时拦截并回传假的数据,
mockJSON则是根据我们指定的格式随机数生成回传的Json资料.
使用方法:mockjax具体参数和进阶的使用方式可以看官方github https://github.com/jakerella/jquery-mockjax 
var isAjaxMocked = true;
if (isAjaxMocked) {
  var one = $.mockjax({
    url: 'Api/index/siteInfo',    url可以通过正则进行匹配
    data: {                       data用于请求同一接口时,传递的参数不同而返回不同的数据,注:需写多个mockjax
      type: 'cook'
    },
    status: 200,                  请求状态
    responseTime: 750,            请求时间       
    responseText: { "user": [{ "id": "1", "name": "david", "birthday": "2001/01/26" }] }    返回数据,此处就可以使用mockJSON来快速创建批量的数据
    使用mockJSON创建批量数据的书写方式:
    responseText: $.mockJSON.generateFromTemplate({
        "user|3-6": [{     随机3-6个
            "id|+1": 1,    +1递增
            "name": "@MALE_FIRST_NAME",    随机姓名
            "birthday": "@DATE_YYYY/@DATE_MM/@DATE_DD"   随机日期
        }]
    })
  });
}
$.mockjax.clear(one);    clear方法用于关闭某个mockjax实现
$.get('/Api/index/siteInfo', {type: 'cook'}, function(callback) {
    $('.wrap').html(JSON.stringify(callback));
    console.log(callback)
})

mockJSON的生成模板规则见 https://github.com/mennovanslooten/mockJSON 这个需要clone下来,看他的index.html,github上没介绍;

 

方法二、mock.js (相当于方法一的整合版) 推荐使用!

简介:mock.js结合了mockjax.js和mockJSON.js,适用于jquery、nodejs、angularjs,有完善的API文档和维护,适用性强
用法:简单是试用了jquery下的使用,跟方法一的用法类似,其他环境下没使用过也不好说啥,具体使用方法和介绍可以查看官网或则《使用Mock.js进行独立于后端的前端开发》 https://segmentfault.com/a/1190000003087224 这篇文章;
优点:中文API学习方便,适用环境多,mockjson生成方便,多种随机模型,JSON数据修改能马上能应用;
缺点:需手动书写多个Mock.mock(几个接口书写几个,相同的除外),对于维护某个特定接口时不易查找;
 

方法三、gulp-mock-server

通过使用gulp-mock-server构建本地服务,并拦截AJAX请求,指向定义好的文件目录中(默认是根目录的data文件夹),目录中存放好相同目录结构的json文件,当发起请求时会自动转向指定的文件,获得mockjson;
用法:安装node、npm、gulp、gulp-mock-server这些就不细讲了,说下gulpfile.js配置;
var gulp = require('gulp'),
    mockserver = require('gulp-mock-server');
gulp.task('mock', function() {
    gulp.src('.')
        .pipe(mockserver({
            host: 'localhost',
            path: '/',
            open: 'http://localhost:8090/index.html',
            port: 8090,            端口号
            allowCrossOrigin : true   跨域
        }));
})
        更多参数请查看 https://github.com/sanyueyu/gulp-mock-server


文件结构:


$.get('/index/siteInfo', function(callback) {     url对应了data文件下的目录;
    $('.wrap').html(JSON.stringify(callback));
    console.log(callback)
})
$.get('/test', function(callback) {
    $('.wrap').html(JSON.stringify(callback));
    console.log(callback)
})
 优缺点:
1、优点:项目中只要启动服务,不需要在代码中引入相关的js文件,接口数据按文件结构分类,方便管理;
2、缺点:①json文件整理,归类繁杂,mockdata生成不方便;  ②更新json文件后,需要重启服务才能得到更新;

结合以上三种方式的mock,个人比较推荐使用mock.js,如果能根据接口文档自动生成需要的mockdata那就最好了。。。。。。

来源:https://www.cnblogs.com/milo-wjh/p/6424246.html

前端能力和后端能力

前端能力和后端能力常常有类比说:人是有操作系统的。譬如我们需要构建自己的操作系统,我们都需要不断升级自己的操作系统 等等,其实更简单一些说,人就如同一个程序,如果这个系统很烂,体验很差。那他做出来的事情,输出出来的东西,就是一团乱麻,没什么实际价值。

一份超全的 web 前端技术进阶指南

优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力。前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识

前端和后端的区别_为什么很多人选择前端?

什么是前端什么是后端,前端开发和后台开发是有区别的,工作的内容和负责的东西是完全的不同的,下面简单说一下:前端更容易入门,每天调整界面的展示,通过代码 完成优美的界面和酷炫的交互。后端入门稍困难,每天关注的是业务逻辑的处理,数据的增删改查,性能的优化

前端需要了解的后端知识

一名有前端工程师,除了掌握自身知识体系外,在业余时间也应该了解下后端的知识时间,由于前端与后端工作是最最密切相关的,多学习些后端知识对自身也是大有好处的。当然除了上述这些,计算机网络、数据结构和算法、计算机组成和原理、离散数学等知识都要涉及。

互联网前端现在这么多人,做前端还有出路吗?

前端能不能一直做,做前端能走多远?以后前端领域会不会被其他新的技术取代?又或者是面临着前端行业的萎缩,导致自己的失业?所有很多人对前端产生了一种所谓的认为:前端不能一直做下去。

女生30 岁转行做前端开发,晚吗?

30岁转行做前端程序开发!请把“晚吗”去掉。50多岁大爷都学编程了。你还担心啥?先从年龄上来说,这个年龄进入IT职业,那是相当棒的黄金时间,有目标,有干劲,有新颖的思想,而且仍是女孩子。

前端如何高效的与后端协作开发

前端与后端的分离,能使前端的开发脱离后端的开发模式,拥有更大的自由度,以此便可做前端工程化、组件化、单页面应用等。不管工具多么厉害,很多时候都免不了要当面沟通,友好、心平气和的沟通也是很重要的哩!

合格的前端不少,优秀的不多

同样的前端工作,有人的工作输出确实是更加的优秀。人与人之间,真的有很大的差别。 今天,我们就来聊一下身边的优秀的前端,是怎样对待前端这份工作的?总结了几点

谈前端框架的『御剑之道』

重视『特性』,而不是语法与API,如果想达到登峰造极的境界,就不要过于专注手里的剑。框架既是神兵利器,也是枷锁。既赋予我们力量,也束缚着我们。若想挣脱这个枷锁,就要达到手中无剑,心中有剑的境界

纯JS实现前端动态分页码

思路分析:有3种情况。第一种情况,当前页面curPage < 4;第二种情况,当前页面curPage == 4;第三种情况,当前页面curPage>4。此外,还要考虑,当前页码 curPage < pageTotal(总页码)-2,才显示...

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!