ajax开发模拟后端数据接口
在做前端开发的时候,特别是一些业务逻辑集中在前端的开发中。我们经常需要自己来模拟获取到后台接口的数据。为什么要模拟?可能后台接口还没有开发完成,可能后台还没有数据返回,可能。。。等等原因。曾经,我也尝试过自己使用nodejs来自己写需要模拟后台接口,但因为种种原因,最后都不了了之,或许是因为太复杂,在开发的时候显得不够人性化。偶然之间,一个转身,我发现了mockjax和mockJSON。
mockjax和mockjson
mockjax主要是可以针对指定的网址进行mock,当Ajax请求网址时进行拦截并回传假的数据。OK,我要的就是这种功能!
mockJSON则有点像是JSON的数据自动生成中心,可以根据我们指定的格式随机生成回传的JSON数据,在需要大量数据时比较有用。
贴上这俩在github的地址,有兴趣的自行围观!
另外,这两个都是基于jquery开发的插件,所以针对jquery开发流派还是比较有用!
示例
首先,当然还是引入。
<script src="vendor/jquery.1.11.1.js"></script>
<script src="vendor/jquery.mockjax.js"></script>
<script src="vendor/jquery.mockjson.js"></script>
然后我们写一个ajax请求
$(function() {
$.ajax({
url: '/WebApi/test.html',
type: 'GET',
error: function(xhr) {
alert('请求失败');
},
success: function(res) {
alert(res);
}
});
});
由于url不存在,请求失败。然后我们来使用mockjax!
var isAjaxMocked = true;
if (isAjaxMocked) {
$.mockjax({
url: '/WebApi/test.html',
status: 200,
responseTime: 900,
responseText: {'info': 'hello world', 'status': 'success'}
});
}
ok,mock ajax请求成功。而且我们通过设置开关,可以很轻易的在模拟和真实的之间切换。
当需要批量模拟数据时,我们可以使用mockJSON,在这里我就不详细介绍了。
ajax开发模拟后端数据接口的更多相关文章
- App开发:模拟服务器数据接口 - MockApi
为了方便app开发过程中,不受服务器接口的限制,便于客户端功能的快速测试,可以在客户端实现一个模拟服务器数据接口的MockApi模块.本篇文章就尝试为使用gradle的android项目设计实现Moc ...
- Charles——前端必备模拟后端数据
Charles--前端必备模拟后端数据 现在都是前后端分离开发了,前端开发者经常会遇到一个问题如何模拟后端数据来进行开发调试,在这里给大家介绍一个前端神器--Charles. 安装 安装就不赘述了,直 ...
- Mock模拟后台数据接口--再也不用等后端的API啦
ok,在开发中经常需要从后台获取数据,那么有时候后台的数据接口并没有写好,所以这时候,就需要自己模拟数据接口,来实现前端逻辑, 今天数的就是阿里巴巴的一款mock产品,很好用的哦!!!! ok!这是我 ...
- vue+vuecli+webpack中使用mockjs模拟后端数据
前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...
- vue -webpack.dev.config.js模拟后台数据接口
在const portfinder = require('portfinder')后面添加 const express = require('express') const app = express ...
- 使用RAP2模拟假数据实现前后端分离
一.为什么使用RAP2 在一个项目的开发中,在页面需要使用大量数据进行渲染生成前,后端开发人员的接口可能还没有写完, 当前端没有后端数据支持的情况下,我们使用mock.js(mock.js用于生成随机 ...
- 循序渐进BootstrapVue,开发公司门户网站(5)--- 使用实际数据接口代替本地Mock数据
在我们开发一些门户网站功能的时候,有时候我们需要快速的创建数据模型来进行数据展示,因为数据结构可能处于不断的修正变化之中,因此服务端的接口我们可以暂时不开发,当我们基本完成数据结构和界面展示的时候,就 ...
- 如何在vue-cli项目中结合mockjs模拟假数据
1.前言 在如今前后端分离的开发方式已被广泛采用的今天,前端同学和后端同学各自独立开发,后端提供数据接口,前端调用接口获取数据渲染页面.但是在实际开发中,后端开发由于逻辑相对复杂接口迟迟提供不到位,而 ...
- vue-cli模拟后台数据交互
作为一个前端入坑的妹子,在学习vue的道路上挣扎徘徊,由一开始的对vue一直蒙圈只知道双向数据绑定和一些'V-x'的指令,慢慢通过一个视频的学习渐渐入坑,对于我这个js基础不怎么好而且编程思维又不是很 ...
随机推荐
- Codeforces Round #359 (Div. 2) C. Robbers' watch (暴力DFS)
题目链接:http://codeforces.com/problemset/problem/686/C 给你n和m,问你有多少对(a, b) 满足0<=a <n 且 0 <=b &l ...
- HDU 3911 Black And White (线段树区间合并 + lazy标记)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3911 给你n个数0和1,m个操作: 0操作 输出l到r之间最长的连续1的个数 1操作 将l到r之间 ...
- Light oj 1236 - Pairs Forming LCM (约数的状压思想)
题目链接:http://lightoj.com/volume_showproblem.php?problem=1236 题意很好懂,就是让你求lcm(i , j)的i与j的对数. 可以先预处理1e7以 ...
- 强连通分量(tarjan求强连通分量)
双DFS方法就是正dfs扫一遍,然后将边反向dfs扫一遍.<挑战程序设计>上有说明. 双dfs代码: #include <iostream> #include <cstd ...
- Jquery中使用setInterval和setTimeout
直接在ready中调用其他方法,会提示缺少对象的错误,解决方法如下: 方法1. 应用jQuery的扩展可以解决这个问题. $(document).ready(function(){ $.extend( ...
- rsync服务架设(数据同步|文件增量备份)
近期由于业务需要,需要将两台服务器数据保持同步.方案有很多,rsync是其中一种解决方案,本文对rsync的安装及配置进行简单说明,其他实现方式有兴趣可以研究.以下是本文提纲,供参考: rsy ...
- ios开发——仿新版iBooks书本打开与关闭动画
IOS新版iBooks吸引人的地方除了有干净整洁的界面.方便灵活的操作以及大容量的书籍容量以外.还有其优秀的用户交互,尤其是其动画的使用.打开一本书时书本缓慢放大并打开.关闭一本书后书本关闭并回到原位 ...
- delphi CoolBar这个怎么弄没了
CoolBar这个怎么弄没了 像Windows这样的 procedure TForm1.Button1Click(Sender: TObject); begin CoolBar1.Fix ...
- 实现经常使用的配置文件/初始化文件读取的一个C程序
在编程中,我们常常会遇到一些配置文件或初始化文件. 这些文件通常后缀名为.ini或者.conf.能够直接用记事本打开.里面会存储一些程序參数,在程序中直接读取使用.比如,计算机与server通信.se ...
- iOS开发——网络编程Swift篇&(五)同步Post方式
同步Post方式 // MARK: - 同步Post方式 func synchronousPost() { //创建NSURL对象 var url:NSURL! = NSURL(string: &qu ...