cp  from  : https://www.codercto.com/a/9839.html

mock.js 可以模拟ajax数据,拦截ajax请求,返回模拟数据,无需后端返回就可以测试前端程序

引入文件

首先在head头中引入我们需要的mockjs文件

<script src="//upyun1.codercto.com/images/1x1.png" data-original="http://mockjs.com/dist/mock.js"></script>
定义数据 

在ajax请求之前,用mack定义返回数据

Mock.mock('http://laoyu', {
"errorcode": 0,//0表示成功,1表示错误
"message": "xx信息不完整", //弹出错误信息
});

创建请求

在ajax中,open()的url要与mock中的相同,比如我这里是 http://laoyu ,那么

XHR.open("post/get","http://laoyu",true/false)

测试

好了,说到这里,我们进行测试一下

<script>

//调用mock方法模拟数据
Mock.mock('http://laoyu', {
"errorcode": 0,//0表示成功,1表示错误
"message": "xx信息不完整", //弹出错误信息
}); //使用ajax进行测试
var xhr = new XMLHttpRequest();
xhr.open("post","http://laoyu",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status>=200 && xhr.status<300) || xhr.status== 304){
var data = JSON.parse(xhr.responseText); //因为reponseText返回的是字符串,将字符串转换成我们想要的JSON数据,这样就可以调用了 console.log(data); //在控制台中打印出返回的内容
}else{
alert("Request was unsuccessful: " + xhr.status);
}
}
}
</script>

看到没,返回了我们使用mock模拟的数据,这样就可以无需后台,直接进行自己的测试了

xhr.readyState的五种状态

0 - (未初始化)还没有调用open()方法
1 - (服务器连接已经建立)已调用open()方法,正在发送请求
2 - (请求已接收)send()方法执行完成,已经接收到全部响应内容
3 - (请求处理中)正在解析响应内容
4 - (请求已完成)响应内容解析完成,可以在客户端调用了

链接:https://www.codercto.com/a/9839.html
来源:Coder·码农
本文发布于 Coder·码农,转载请注明出处,谢谢合作!

[Web 前端] mockjs让前端开发独立于后端的更多相关文章

  1. 让前端独立于后端进行开发,模拟数据生成器Mock.js

    让前端独立于后端进行开发,模拟数据生成器Mock.jsMock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. Home · nuysoft/Mock Wiki ...

  2. Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转改

    Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...

  3. mock.js-无需等待,让前端独立于后端进行开发

    概述 首先啦,我不认识mock.js的作者,带着需求找到mock.js让我觉得很惊艳. 相对于其他同类的框架的实现,mock.js超出了我的意料. 基于 数据模板 生成模拟数据. 基于 HTML模板 ...

  4. 转 - Web新人(偏前端)应该怎样学习(个人观点,勿喷)

    我自己是会计专业,转行自学web的,学习有一两年了,也还是新人一个,只不过不是那种超级“新”的,所以有什么话说得不对,请轻喷.欢迎大家来和我交流. 1.我能不能转行学web? 能不能学web这个不是别 ...

  5. 如何成为一名优秀的web前端工程师(前端攻城师)?

    程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · 詹姆士 我所遇到的前端程序员分两种:第一种一直在问:如何学习前端?第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀. ...

  6. 【转】如何成为一名优秀的web前端工程师(前端攻城师)?

    [转自]http://julying.com/blog/how-to-become-a-good-web-front-end-engineer/ 程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · ...

  7. web前端体系-了解前端,深入前端,架构前端,再看前端。大体系-知识-小细节

    1.了解前端,深入前端,架构前端,再看前端.大体系-知识-小细节 个人认为:前端发展最终的导向是前端工程化,智能化,模块化,组件化,层次化. 2.面试第一关:理论知识. 2-1.http标准 2-2. ...

  8. 2020年最新版Web前端学习路线图-前端小白入门必读-pink老师推荐

    Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业有什么帮助呢? 我学到什么程度可以胜任工作? ... 这里,p ...

  9. 循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

    循序渐进VUE+Element 前端应用开发的系列文章中,前面介绍了系统各个功能的处理实现,本篇随笔从一个主线上介绍前后端开发的整合,让我们从ABP框架后端的查询接口的处理,前端API接口调用的封装, ...

随机推荐

  1. day10--协成\异步IO\缓存

       协成(Gevent) 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程.CPU只认识线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将 ...

  2. php 会话控制(理解会话控制的概念)

    理解一个概念就需要理解他的背景及产生的原因,这里引入web环境及其http协议. 会话控制产生的背景: http协议是web服务器与客户端相互通信的协议,它是一种无状态协议,所谓无状态,指的是不会维护 ...

  3. 菜鸟nginx源码剖析

    菜鸟nginx源码剖析 配置与部署篇(一) 手把手配置nginx "I love you" TCMalloc 对MYSQL 性能 优化的分析 菜鸟nginx源码剖析系列文章解读 A ...

  4. BZOJ2911 : [Poi1997]The Number of Symmetrical Choices

    新建源汇S,T,根据题意可以建出一个DAG 设f[x][y]为从x走到y的回文路径的方案数,则 边界条件: f[x][x]=1 对于一条边x->y,若a[x]==a[y],则f[x][y]=1 ...

  5. spring cloud 学习(5) - config server

    分布式环境下的统一配置框架,已经有不少了,比如百度的disconf,阿里的diamand.今天来看下spring cloud对应的解决方案: 如上图,从架构上就可以看出与disconf之类的有很大不同 ...

  6. html5 js实现浏览器全屏

    全屏 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullsc ...

  7. ARM JTAG 信号 RTCK 应该如何处理?

    用户在调试内嵌可综合内核的 CPU 如 ARM7TDMI-S 时,需要通过打开仿真器的自适应时钟功能. 此时,ARM仿真器根据 RTCK 时钟信号的频率,产生可用于 CPU 内核当前时钟主频的最快的 ...

  8. C#中POST数据和接收的几种方式

    POST方式提交数据,一种众所周知的方式: html页面中使用form表单提交,接收方式,使用Request.Form[""]或Request.QueryString[" ...

  9. rcp(插件开发)插件B需要引用插件A中的jar包-如何处理依赖关系

    如果插件B需要引用插件A中的jar 通常需要以下几步: 1.插件B要依赖插件A 2.在插件B的build path中添加插件A的jar包 3.插件A的runtime导出插件B中使用jar的packag ...

  10. 8张图理解Java---importnew---programcreek

    http://www.importnew.com/11725.html https://www.programcreek.com/2013/09/top-8-diagrams-for-understa ...