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. 003 RequestMapping——Ant路径

    一: 1.介绍 Ant风格资源地址支持3中配配符 ?:匹配文件名中的一个字符 *  :匹配文件名中的任意字符 **:匹配多层路径 2.RequestMapping支持的Ant风格的路径 二:程序说明 ...

  2. 全局查询文件linux

    在工作中,可能突然需要找到某个文件,这个又不知道,需要全局查询一下. 下面是命令行: find / -name "*.log" | xargs grep "elk&quo ...

  3. 009 jquery过滤选择器-----------(表单对象属性过滤选择器 与 表单选择器)

    1.表单对象属性选择器 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  4. Android SDK platforms build-tools等镜像下载

    Android SDK platforms build-tools等镜像下载     下载地址:http://mirrors.neusoft.edu.cn/android/repository/  这 ...

  5. 005.基于docker部署etcd集群部署

    一 环境准备 ntp配置:略 #建议配置ntp服务,保证时间一致性 etcd版本:v3.3.9 防火墙及SELinux:关闭防火墙和SELinux 名称 地址 主机名 备注 etcd1 172.24. ...

  6. 关于configure: error: no acceptable C compiler found in $PATH

    Linux系统在安装python3的时候报错: $ ./configure --prefix=/usr/local/python3 checking build system type... x86_ ...

  7. 迈出第一步,Hexo博客搭建

    很早之前看到别人的博客就总想着自己之后也要搭一个,最近突然来了干劲,就开始搭起了博客.不过搭博客还真是一个累活,失败了不下十次,用了好几天的时间,感觉自己在浪费时间,但是看到现在博客终于能用了,非常开 ...

  8. Javascript版经典游戏之《扫雷》

    翻出年初写的游戏贴上来,扫雷相信大家都玩过,先上图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  9. Mac 下的 .app文件如何生成.dmg ?

    安装 Node.js最新版. 安装方法不赘述. 安装 create-dmg: sudo npm install --global create-dmg 注意这里 sudo不能少. 终端切换到 .app ...

  10. BZOJ.4456.[ZJOI2016]旅行者(分治 Dijkstra)

    题目链接 \(Description\) 给定\(n\times m\)的带边权网格图.\(Q\)次询问从点\((x_i,y_i)\)到点\((x_j,y_j)\)的最短路. \(n\times m\ ...