前端之模拟数据 - HackerVirus - 博客园

阅读目录

  • 玩转前端之模拟数据

回到目录

玩转前端之模拟数据

 

博客园主页:http://www.cnblogs.com/handoing/

是否还在为前端模拟数据头疼?

是否还在为后端返回数据格式较多内心烦躁?

是否还想吸一支烟压压精?

看下去吧,这里比心理医生还管用。。。

 

1.满地拉屎版

复制代码

复制代码

function fetchUserList() {}var isDev = true;var data = {"status": 3,"message": "hello world","string": "★★★","number": 69,"boolean": true,"object": {"110000": "北京市","120000": "天津市","130000": "黑龙江省"},"array": [{"name": "Hello"},{"name": "Mock.js"},{"name": "!"},{"name": "Hello"},{"name": "Mock.js"},{"name": "!"}],"regexp": "6288712123-","time": "2014-01-16 21:21:22","color": "rgba(121, 242, 135, 0.94)","word": "jztuqwmur","text": "而风气究及。","name": "崔杰","url": "news://imkpjsnq.ev/dhthtrgqy"
};if (isDev) {fetchUserList(data);
} else {$.ajax({url: '/list',type: 'GET',dataType: 'json',success: function(data) {fetchUserList(data);}});
}

复制代码

复制代码

这段代码很好理解,如果你看不懂就不要往下看了,洗个澡睡觉休息吧!

有人会问了,看似很有条理的代码为什么叫满地拉屎呢?

让我告诉你这个data变量就是一坨屎。。。

在开发的时候我们会定义一个data来模拟后端返回的数据来进行下一步操作,如果这个data很长占满了整个屏幕,那你敲代码的时候上下翻来翻去是不是觉得很累。

这是其次,再一个就是当你联调把isDev改成了false的时候,有没有想到这个data有多孤单,自己在内存里游离,占着茅坑不拉屎。。。

那么你会说干脆把data和多余的判断代码删掉吧,我觉得这倒是可以,但是如果开发的程序前后端交互较多,你会觉得删起来挺不爽的,万一脑血栓犯了把有用的代码删掉了怎么办。。。

 

2.擦屁股高阶版

开发目录下创建一个json文件

 

添加json数据

复制代码

复制代码

{"status": 3,"message": "hello world","string": "★★★","number": 69,"boolean": true,"object": {"110000": "北京市","120000": "天津市","130000": "黑龙江省"},"array": [{"name": "Hello"},{"name": "Mock.js"},{"name": "!"},{"name": "Hello"},{"name": "Mock.js"},{"name": "!"}],"regexp": "6288712123-","time": "2014-01-16 21:21:22","color": "rgba(121, 242, 135, 0.94)","word": "jztuqwmur","text": "而风气究及。","name": "崔杰","url": "news://imkpjsnq.ev/dhthtrgqy"
}

复制代码

复制代码

ajax请求路径填写该文件地址

复制代码

复制代码

$.ajax({url: 'data/list.json',type: 'GET',dataType: 'json',success: function(data) {console.log(data);}
});

复制代码

复制代码

这样联调的时候只要把url改掉即可,看似很不错了,但是这个与满地拉屎版有一个共同点,数据不够灵活。

当你获取的数据有状态判断的话,怎么办,例如status这个key,你每次都得改这个value来对状态进行区分,好烦啊word哥!

 

3.强行装逼版

使用mock.js吧!一个模拟数据和编写自动化测试的库,目前github上1684个星也算不错了。

github:https://github.com/nuysoft/Mock

主页: http://mockjs.com/

中文的,文档通俗易懂,自己去看吧。。。

例子:

开发目录下创建一个js文件存放mock代码

html引入mock.js和data/list.js文件

复制代码

复制代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script type="text/javascript" src="./jquery.js"></script><script type="text/javascript" src="./mock.js"></script><script type="text/javascript" src="./data/list.js"></script><script type="text/javascript" src="./main.js"></script>
</head>
<body></body>
</html>

复制代码

复制代码

编写main.js

复制代码

复制代码

$.ajax({url: '/list',type: 'GET',dataType: 'json',success: function(data) {fetchUserList(data);}
});

复制代码

复制代码

编写data/list.js,模拟数据都写在这里,便于维护。

复制代码

复制代码

Mock.mock('/list', {"status|0-5": 0,"message": "hello world","string|1-10": "★","number|1-100": 100,"boolean|1-2": true,"object|2-4": {"110000": "北京市","120000": "天津市","130000": "黑龙江省","140000": "四川省"},"array|1-10": [{"name|+1": ["Hello","Mock.js","!"]}],"regexp|1-5": /\d{5,10}\-/,"time": '@datetime',"color": '@rgba',"word": '@word',"text": '@csentence(5)',"name": '@cname',"url": '@url'
});

复制代码

复制代码

当前后端联调的时候只需要把mock.js和data/list.js删掉就好了,main.js里的代码一点都不用动噢兄弟们!这他妈多爽啊!!!

来让我们秀秀数据吧

复制代码

复制代码

{"status": 4,"message": "hello world","string": "★","number": 98,"boolean": false,"object": {"110000": "北京市","120000": "天津市","130000": "黑龙江省"},"array": [{"name": "Hello"},{"name": "Mock.js"},{"name": "!"},{"name": "Hello"},{"name": "Mock.js"},{"name": "!"},{"name": "Hello"},{"name": "Mock.js"},{"name": "!"}],"regexp": "241330-30881228-2632266897-","time": "2009-06-19 01:55:07","color": "rgba(242, 121, 165, 0.96)","word": "bry","text": "接看九统利。","name": "谢杰","url": "news://vykj.ag/frvlwkf"
}

复制代码

复制代码

复制代码

复制代码

{"status": 1,"message": "hello world","string": "★★★★★★★★★★","number": 86,"boolean": true,"object": {"120000": "天津市","130000": "黑龙江省"},"array": [{"name": "Hello"},{"name": "Mock.js"}],"regexp": "083728849-3321101-067657-","time": "2013-02-24 17:29:08","color": "rgba(158, 242, 121, 0.83)","word": "smutjy","text": "中往列军部。","name": "田勇","url": "rlogin://mmpooew.bw/kcuijlnk"
}

复制代码

复制代码

注:mock的第一个参数必须要与ajax请求的路径相同,并且get和post请求都可以进行匹配,数据足够灵活,应该能模拟99.9999%的情况了。

不过在我看来这个mock.js还不够完美,其有两个缺陷:

1.无法匹配带参数的ajax请求。

2.兼容性不够强(这个不重要,因为我们只会在开发环境中用到)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248963.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Cloud Gateway(五):路由定位器 RouteLocator

本文基于 spring cloud gateway 2.0.1 1、简介 直接 获取 路 由 的 方法 是 通过 RouteLocator 接口 获取。 同样&#xff0c; 该 顶 级 接口 有多 个 实现 类&#xff0c; RouteLocator 路由定位器&#xff0c;顾名思义就是用来获取路由的方法。该路由定位器为顶级接口有多个实…

【NOIP2018】DAY2T2——填数游戏(轮廓线状压的dp?搜索打表)

描述 小 D 特别喜欢玩游戏。这一天&#xff0c;他在玩一款填数游戏。 这个填数游戏的棋盘是一个n m的矩形表格。玩家需要在表格的每个格子中填入一个数字&#xff08;数字 0 或者数字 1&#xff09;&#xff0c;填数时需要满足一些限制。 下面我们来具体描述这些限制。 为了方…

团队开发进度报告9

&#xff08;1&#xff09;站立会议 &#xff08;2&#xff09;任务面板 &#xff08;3&#xff09;具体内容 昨天&#xff1a;完成了界面控件按钮的设置问题&#xff1a;PHP数据处理&#xff0c;如何实现在线数据交互问题今天&#xff1a;hbuilder后台环境搭建 转载于:https:/…

基于springboot多模块项目使用maven命令打成war包放到服务器上运行的问题

首先&#xff0c;大家看到这个问题&#xff0c;可能并不陌生&#xff0c;而且脑子里第一映像就是使用mava中的clear package 或者 clear install进行打包&#xff0c;然后在项目中的target文件夹下面找到xxx.war&#xff0c;将这个war包放到外置的tomcat服务器下的webapps下面&…

Kafka学习笔记(3)----Kafka的数据复制(Replica)与Failover

1. CAP理论 1.1 Cosistency(一致性) 通过某个节点的写操作结果对后面通过其他节点的读操作可见。 如果更新数据后&#xff0c;并发访问的情况下可立即感知该更新&#xff0c;称为强一致性 如果允许之后部分或全部感知不到该更新&#xff0c;称为弱一致性。 若在之后的一段时间&…

H5页面随机数字键盘支付页面

H5页面随机数字键盘支付页面 有个H5支付的业务需要随机数字的键盘 参考了下文&#xff1a;https://blog.csdn.net/Mr_Smile2014/article/details/52473351 做了一些小修改&#xff1a; 在原有的基础上&#xff0c;增加了一些按键反馈的效果。 每个按键加上边框。 最终效果&…

expressjs路由和Nodejs服务器端发送REST请求 - - ITeye博客

Nodejs创建自己的server后&#xff0c;我们如果需要从客户端利用ajax调用别的服务器端的数据API的接口&#xff0c;这时候出现了ajax跨域问题。 一种是利用在客户端解决跨域问题 这种方案大家可以去网上查查 另一种方案是在服务器端去请求别的服务器&#xff0c;然后将数据再…

Jmeter操作mysql数据库测试

1. 选中线程组鼠标点击右键添加-->配置元件-->JDBC Connection Configuration&#xff1b; 2. DataBase Connection Configuration配置 Variable Name&#xff1a;配置元件的的所有配置所保存的变量&#xff0c;自定义变量名称(不能使用mysql作为变量名&#xff0c;多个…

前端“智能”静态资源管理 - Onebox - 博客园

前端“智能”静态资源管理 模块化/组件化开发&#xff0c;仅仅描述了一种开发理念&#xff0c;也可以认为是一种开发规范&#xff0c;倘若你认可这规范&#xff0c;对它的分治策略产生了共鸣&#xff0c;那我们就可以继续聊聊它的具体实现了。 很明显&#xff0c;模块化/组件化…

我们是如何做好前端工程化和静态资源管理 - 無雄 - 博客园

我们是如何做好前端工程化和静态资源管理 随着互联网的发展&#xff0c;我们的业务也日益变得更加复杂且多样化起来&#xff0c;前端工程师也不再只是做简单的页面开发这么简单&#xff0c;我们需要面对的十分复杂的系统性问题&#xff0c;例如&#xff0c;业务愈来愈复杂&…

峰度(Kurtosis)和偏度(Skewness)

峰度&#xff08;Kurtosis&#xff09; 定义峰度又称峰态系数&#xff0c;表征概率密度分布曲线在平均值处峰值高低的特征数&#xff0c;即是描述总体中所有取值分布形态陡缓程度的统计量。直观看来&#xff0c;峰度反映了峰部的尖度。这个统计量需要与正态分布相比较。 公式定…

多功能嵌入式解码软件(2)

多功能嵌入式解码软件&#xff08;2&#xff09; 验证类库 通信协议 下面进行一个示例&#xff1a; 下位机需要向上位机发送3中数据帧&#xff0c;数据帧以功能码来识别&#xff0c;每种数据帧的协议如下3个表格所示&#xff0c;上位机需要把这些数据按照协议解码出来&#xff…

vue项目如何打包扔向服务器 - Hi-Sen - 博客园

当我们将 vue 项目完成后&#xff0c;面临的就是如何将项目进行打包上线&#xff0c;放到服务器中。我使用的是 vue-cli&#xff08;simple&#xff09; 脚手架&#xff0c;所以就讲一下如何将项目进行打包&#xff0c;并放到 tomcat 上。 如果是 vue-cli (非 simple 脚手架…

MySQL备份与恢复-mysqldump备份与恢复

这片博文主要用来介绍MySQL的备份与恢复&#xff1a; MySQL的备份形式可以分为如下几种&#xff1a; 热备----即不停机备份冷备----需要关闭MySQL&#xff0c;然后备份其数据文件。&#xff08;停机备份一般是直接拷贝其datadir目录&#xff09;温备----在线备份&#xff0c;对…

第六次实训作业异常处理

第六次实训作业异常处理 编写一个类ExceptionTest&#xff0c;在main方法中使用try-catch-finally语句结构实现&#xff1a;在try语句块中&#xff0c;编写两个数相除操作&#xff0c;相除的两个操作数要求程序运行时用户输入&#xff1b;在catch语句块中&#xff0c;捕获被0除…

k8s学习笔记-调度之Affinity

Kubernetes中的调度策略可以大致分为两种 一种是全局的调度策略&#xff0c;要在启动调度器时配置&#xff0c;包括kubernetes调度器自带的各种predicates和priorities算法&#xff0c;具体可以参看上一篇文章&#xff1b; 另一种是运行时调度策略&#xff0c;包括nodeAffinity…

MapReduce编程实践

一、MapReduce编程思想 学些MapRedcue主要是学习它的编程思想&#xff0c;在MR的编程模型中&#xff0c;主要思想是把对数据的运算流程分成map和reduce两个阶段&#xff1a; Map阶段&#xff1a;读取原始数据&#xff0c;形成key-value数据&#xff08;map方法&#xff09;。即…

webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园

一.webpack基础 1.在项目中生成package.json&#xff1a;在项目根目录中输入npm init&#xff0c;根据提示输入相应信息。&#xff08;也可以不生成package.json文件&#xff0c;但是package.json是很有用的&#xff0c;所有建议生成&#xff09; 2.安装webpaack a.在全局中安装…

编译原理--NFA/DFA

现成的, 讲义: https://www.cnblogs.com/AndyEvans/p/10240790.html https://www.cnblogs.com/AndyEvans/p/10241031.html 一个例子, 写得非常好. 一下子就全明白了, 尤其是像我这种没有听过编译原理课程的人. https://blog.csdn.net/tyler_download/article/details/53139240 …

OpenLayers3关于Map Export的Canvas跨域

一 Canvas跨域现象 地图导出是地图中常用的功能&#xff0c;并且OpenLayers3中也提供了两个地图导出的例子:http://openlayers.org/en/latest/examples/export-map.html http://openlayers.org/en/latest/examples/export-pdf.html。 看到这两个例子我们都很兴奋&#xff0c;直…