当前位置: 首页 > 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
  • Apache Zeppelin在Apache Trafodion上的可视化
  • CentOS7 安装JDK
  • conda常用的命令
  • Eureka 2.0 开源流产,真的对你影响很大吗?
  • gf框架之分页模块(五) - 自定义分页
  • gops —— Go 程序诊断分析工具
  • JS学习笔记——闭包
  • leetcode-27. Remove Element
  • niucms就是以城市为分割单位,在上面 小区/乡村/同城论坛+58+团购
  • php面试题 汇集2
  • Rancher-k8s加速安装文档
  • Storybook 5.0正式发布:有史以来变化最大的版本\n
  • 百度地图API标注+时间轴组件
  • 基于Android乐音识别(2)
  • 名企6年Java程序员的工作总结,写给在迷茫中的你!
  • 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件(包含源代码)
  • 推荐一款sublime text 3 支持JSX和es201x 代码格式化的插件
  • 小程序 setData 学问多
  • 移动端 h5开发相关内容总结(三)
  • 与 ConTeXt MkIV 官方文档的接驳
  • 再次简单明了总结flex布局,一看就懂...
  • FaaS 的简单实践
  • # Swust 12th acm 邀请赛# [ K ] 三角形判定 [题解]
  • #周末课堂# 【Linux + JVM + Mysql高级性能优化班】(火热报名中~~~)
  • (03)光刻——半导体电路的绘制
  • (9)STL算法之逆转旋转
  • (HAL库版)freeRTOS移植STMF103
  • (MIT博士)林达华老师-概率模型与计算机视觉”
  • (第二周)效能测试
  • (一) storm的集群安装与配置
  • (转载)PyTorch代码规范最佳实践和样式指南
  • (转载)利用webkit抓取动态网页和链接
  • (轉貼) 蒼井そら挑戰筋肉擂台 (Misc)
  • ***linux下安装xampp,XAMPP目录结构(阿里云安装xampp)
  • ***监测系统的构建(chkrootkit )
  • .java 9 找不到符号_java找不到符号
  • .NET CORE 第一节 创建基本的 asp.net core
  • .Net MVC4 上传大文件,并保存表单
  • .netcore 如何获取系统中所有session_ASP.NET Core如何解决分布式Session一致性问题
  • .net对接阿里云CSB服务