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

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

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

引号的使用,单引号优先(如果不是引号嵌套,不要使用双引号)、空格的使用问题:(关键字后 符号后 排版 函数 赋值符号= )等、不写没有使用过的变量,如果定义了一个变量,后来一直没有参与过运算,那么不应该定义这个变量...

作为一个前端,可以如何机智地弄坏一台电脑?

有人说,前端的界限就在浏览器那儿。无论你触发了多少bug,最多导致浏览器崩溃,对系统影响不到哪去。想象一下,有天你在家里上网,吃着火锅还唱着歌,点开一个链接,电脑突然就蓝屏了!

前端工程师/程序员简历怎么写?

其实前端工程师并不少,但很多时候合适的前端工程师难找。可能是由于程序员比较内向,前端工程师都没有把自己最厉害的那一面表现出来。今天我们来聊聊前端工程师的简历怎么写,希望能够对大家有帮助。

优化网站性能规则_前端性能优化策略【网络加载、页面渲染】

前端网站性能优化规则:网络加载类、页面渲染类。包括:减少 HTTP 资源请求次数、减小 HTTP 请求大小、避免页面中空的 href 和 src、合理设置 Etag 和 Last-Modified、使用可缓存的 AJAX、减少 DOM 元素数量和深度等

实施微前端的六种方式

微前端架构是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。由此带来的变化是,这些前端应用可以独立运行、独立开发、独立部署。

Web前端工程师必备的PS技能之切图

Web前端工程师必备的PS技能之切图:PS中我的标尺的参考线为什么不能自动吸附图层或画布中间了?有个选项没有选择“菜单栏-视图-对齐”,按照设计师提供的设计稿,实现HTML页面,需要将设计稿切分成为最终在页面中呈现的一个个图片为“切图”

服务端渲染和客户端渲染的对比

这里结合art-template模板引擎说明。首先了解下前端页面中如何使用art-template。当不需要对SEO友好的时候,推荐使用客户端渲染;当需要对 SEO友好的时候,推荐使用服务器端渲染

前后端分离后,后端应该知道的一些基本前端知识

作为前端小白,经常遇到同样小白的后端,常常不得不三番五次科普一些前端的基础知识,特此做些总结,前后端分离后,后端需要知道的基本前端知识:什么是ajax?跨域、OPTIONS请求、重定向等

使用jenkins进行前端项目自动部署

使用jenkins进行前端项目自动部署:后端的nodeJS项目可以使用pm2进行自动部署,由于前端项目打包后是静态资源,不需要进程守护。一般地,前端项目使用jenkins来进行自动部署,包括打包、测试等一系列流程。本文将详细介绍jenkins的使用