当前位置: 首页 > news >正文

mockjs让前端开发独立于后端

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

mockjs官网

原文:http://i.jakeyu.top/2016/08/1...

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

<script src="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 = 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 - (请求已完成)响应内容解析完成,可以在客户端调用了

相关文章:

  • Oracle学习(4)---数据定义语言---分组查询
  • 基于token的多平台身份认证架构设计
  • Heartbeat+Haresources+NFS配置一个简单的HA高可用+资源共享集群
  • Mybatis 轻松入门教程
  • 《疯狂java讲义2》读书笔记——面向对象的三大特性之一:继承(已更新完)...
  • Redis Cluster架构和设计机制简单介绍
  • Android View体系(六)从源码解析Activity的构成
  • EXCEL 读取
  • rip路由协议基本配置
  • [Unity3D]深度相机 Depth Camera
  • phpmyadmin安装教程及配置设置
  • 11.08---日记
  • 互斥量与信号量
  • 数据库备份那点事儿
  • maven 中使用jetty
  • 【技术性】Search知识
  • CentOS6 编译安装 redis-3.2.3
  • Druid 在有赞的实践
  • Flex布局到底解决了什么问题
  • HTTP那些事
  • IDEA常用插件整理
  • laravel with 查询列表限制条数
  • mysql_config not found
  • overflow: hidden IE7无效
  • Sequelize 中文文档 v4 - Getting started - 入门
  • Spring Security中异常上抛机制及对于转型处理的一些感悟
  • 聊聊sentinel的DegradeSlot
  • 漫谈开发设计中的一些“原则”及“设计哲学”
  • 面试遇到的一些题
  • 面试总结JavaScript篇
  • 如何学习JavaEE,项目又该如何做?
  • 设计模式 开闭原则
  • ​ 轻量应用服务器:亚马逊云科技打造全球领先的云计算解决方案
  • ​LeetCode解法汇总518. 零钱兑换 II
  • ​如何在iOS手机上查看应用日志
  • ​软考-高级-系统架构设计师教程(清华第2版)【第12章 信息系统架构设计理论与实践(P420~465)-思维导图】​
  • !!Dom4j 学习笔记
  • #NOIP 2014#day.2 T1 无限网络发射器选址
  • #NOIP 2014#Day.2 T3 解方程
  • #单片机(TB6600驱动42步进电机)
  • (07)Hive——窗口函数详解
  • (5)STL算法之复制
  • (6)【Python/机器学习/深度学习】Machine-Learning模型与算法应用—使用Adaboost建模及工作环境下的数据分析整理
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (四)docker:为mysql和java jar运行环境创建同一网络,容器互联
  • (新)网络工程师考点串讲与真题详解
  • (原創) 如何將struct塞進vector? (C/C++) (STL)
  • (转) Android中ViewStub组件使用
  • (转载)跟我一起学习VIM - The Life Changing Editor
  • ./mysql.server: 没有那个文件或目录_Linux下安装MySQL出现“ls: /var/lib/mysql/*.pid: 没有那个文件或目录”...
  • .FileZilla的使用和主动模式被动模式介绍
  • .NET开源项目介绍及资源推荐:数据持久层
  • .sh 的运行
  • @Autowired注解的实现原理
  • [ Algorithm ] N次方算法 N Square 动态规划解决