一个移动开发者的Mock数据之路(四)

简介: 一个移动开发者的Mock数据之路

2.有参:


格式1:image(size,background,foreground,format,text),size指定图片的尺寸,格式为300x250,background指定图片的背景色,foreground指定图片的前景色,format指定图片的格式,可选png、gif、jpg,text参数指定图片上的文字。


格式2:image(size)


格式3:image(size,background)


格式4:image(size,background,foreground)


格式5:image(size,background,foreground,text)


模拟图片二进制素材数据:


1.无参:dataImage生成随机的base64图像编码。


2.有参:


格式1:dataImage(size,text),size参数这是图片尺寸,text参数设置图片上的文字。


格式2:dataImage(size)


模拟颜色字符串的相关占位符:


1.color:随机生成格式为“#rrggbb”的颜色。


2.hex:随机生成格式为“#rrggbb”的颜色值。


3.rgb:随机生成格式为“rgb(r,g,b)”的颜色值。


4.rgba:随机生成格式为“rgba(r,g,b,a)”的颜色值。


5.hsl:随机生成格式为“hsl(h,s,l)”的颜色值。


模拟英文文本段落:


1.无参:paragraph随机生成一段文本。


2.有参:


格式1:paragraph(min,max)随机生成一段文本,句子个数在min于max之间。


格式2:paragraph(len)随机生成一段文本,len设置句子个数,示例如下:


{

   'data|3-5':[

    {

       time:'@date',

       expriseTime:'@datetime',

       image:'@image("300x250","#222312","#f1f2f3","jpg","image")' ,

       content:'@paragraph(1,3)'

   }

   ]

}

生成的随机数据如下:

image.png



模拟中文文本段落:


1.无参:cparagraph随机生成中文段落


2.有参:


格式1:cparagraph(min,max)


格式2:cparagraph(len)


模拟英文句子:


1.无参:sentence随机生成一句文本,首字母会大写。


2.有参:


格式1:sentence(min,max),随机生成一句文本,文本中单词个数为min到max之间。


格式2:sentence(len),随机生成一句文本,文本中单词个数为len。


模拟中文句子:


1.无参:csentence随机生成一句中文文本。


2.有参:


格式1:csentence(min,max)


格式2:csentence(len)


模拟英文单词:


1.无参:word随机生成一个单词。


2.有参:


格式1:word(min,max),生成单词中字符个数为min到max之间。


格式2:word(len),生成单词中字符个数为len。


模拟中文词:


1.无参:cword随机生成一个汉字。


2.有参:


格式1:cword(pool),pool为汉字字符串,从pool字符池中选取一个汉字。


格式2:cword(length),随机生成一个词,汉字个数为length。


格式3:cword(min,max),随机生成一个词,汉字个数为min到max之间。


格式4:cword(pool,length)


格式5:cword(pool,min,max)


模拟标题:


1.无参:title随机生成标题。


2.有参:


格式1:title(len)生成单词个数为len的标题。


格式2:title(min,max)生成单词个数为min到max之间的标题。


模拟中文标题:


1.无参:ctitle


2.有参:


格式1:ctitle(len)


格式2:ctitle(min,max)


模拟姓名相关的占位符:


1.first随机生成常见的英文名。


2.last随机生成常见的英文姓。


3.name(middle),随机生成一个英文姓名,middle为布尔参数,设置是否生成中间名。


4.cfirst随机生成一个中文姓。


5.clast随机生成一个中文名。


6.cname随机生成一个中文姓名。


模拟网址相关占位符:


1.url(protocol,host)随机生成一个url,protocol指定协议,host指定主机,也可以无参。


2.protocol随机生成一个url协议,例如http。


3.domain随机生成一个域名。


4.tld随机生成一个顶级域名。


5.email(domain)随机生成一个email地址,domain指定域名,也可以无参。


6.ip随机生成一个ip地址。


模拟地址相关占位符:


1.region随机生成一个中国区域,例如华北。


2.province随机生成一个中国省份。


3.city(pro)随机生成一个中国城市,pro为布尔值,指定是否生成其所在的省份,也可以无参。


4.county(all)随机生成一个中国县,all为布尔值,指定是否生成其所在的省市。也可以无参。


5.zip随机生成一个邮编。


模拟id相关占位符:


1.guid随机生成一个GUID。


2.id随机生成一个18位身份证号。


四、一个用express搭建Mock服务的示例


var express = require('express');

var app = express();

var Mock = require('mockjs');


app.get('/mock', function(req, res){

var data = Mock.mock({

 "name":'@cname',

 "content":'@string(0, 5)',

});

response = {

 "data":data

}

res.end(JSON.stringify(response));

});



var server = app.listen(8082, function(){

var host = server.address().address

var port = server.address().port

})

上面代码开启了一个get请求,如果正确安装了node,express,mock.js,使用node运行此文件后直接在浏览器通过127.0.0.1:8082/mock地址进行访问即可看到生成的mock数据。


   Mock数据的初衷是在前端开发中进行接口的模拟使用,在接口结构和访问url都已经确定,只是没开发完成是,可以使用Charles结合Mock数据来仿真接口返回。Charles工具可以将某个请求映射到另外一个地址上,在Charles抓到的请求上邮件,弹出的菜单中选择Map Remote选项。


image.png


在弹出的窗口中将映射到的主机设置为127.0.0.1,端口设置为8082,地址设置为mock即可访问上面文件生成的模拟数据。


五、一个方便易用的Java模拟数据客户端


   有时候我们需要mock的接口有很多,如果能够方便的对这些mock文件进行管理不用每次都通过终端来操作就更方便了。这里有我写的一个JAR小工具,可以在Mac或Windows上扩平台进行使用。下载地址如下:


http://zyhshao.github.io/EasyMock/welcome.html


这个工具就是一个简单的JAR包,在其中封装了操作终端的命名,只需要在左右列表中创建相应的请求路径,在右侧直接编写Mock.js模拟数据对象后,开启服务即可,开启服务后会将左右列表中所有的接口都开启。如下图:


image.png


还需要注意,这个工具不十分完善,如果有产生错误会被捕获但并没有任何提示,如果你没正确安装node或者express或者mock.js,再或者你的mock.js代码有问题,服务都不能正确启动。

目录
相关文章
|
3月前
|
前端开发 JavaScript Java
从前端到后端:构建全栈应用的技术路线探析
【2月更文挑战第3天】本文通过探讨前端和后端开发的基本概念和技术要点,深入剖析了构建全栈应用的技术路线。从前端的HTML、CSS和JavaScript,到后端的Java、C和数据库,我们将带您逐步了解如何将不同技术组合起来实现高效、稳定的全栈应用。
65 7
|
3月前
|
监控 安全 测试技术
《Eolink 征文活动- -RESTful接口全解测试-全方位了解Eolink-三神技超亮点》
《Eolink 征文活动- -RESTful接口全解测试-全方位了解Eolink-三神技超亮点》
67 0
|
2月前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈应用的技术挑战与解决方案
在当今互联网时代,全栈开发成为越来越受欢迎的技术趋势。本文将深入探讨从前端到后端的全栈开发过程中所面临的技术挑战,并提出相应的解决方案,涵盖前端框架选择、后端技术架构、数据库设计以及跨平台兼容性等关键问题。
|
2月前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发的技术生态
本文将探讨如何在全栈开发中构建完整的技术生态,从前端到后端各个层面进行深入剖析,讨论不同技术之间的协作与整合,为开发人员提供全面的指导与启示。
|
12月前
|
前端开发
前端学习笔记202304学习笔记第九天-脚手架开发痛点1
前端学习笔记202304学习笔记第九天-脚手架开发痛点1
49 0
|
12月前
|
Web App开发 前端开发 JavaScript
前端设计走查平台实践(前端篇)
随着前端业务的不断发展,前端对设计稿的还原程度也成为了影响用户对产品体验的一个关键指标,作为最靠近用户侧的研发,前端工程师通常需要和设计师同学通力配合来提升用户体验。其中,设计走查是设计同学最常见的测试前端同学是否完美还原了自己设计理念的方式,本文旨在通过设计走查平台在前端侧的实践总结下在前端上游研发链路中的一些基础建设,以期能够为其他有相关需要的同学提供一些实践思路。
116 0
|
网络协议 Cloud Native jenkins
从零到一落地接口自动化测试
早些时候,软件研发交付流程大多遵循V型或W型的瀑布模式,这种模式下只有开发编码完成才会提测进入测试验证阶段。这个阶段测试同学做的大多是基于业务流程和页面的功能测试工作,也就是我们自嘲的“点工”。
从零到一落地接口自动化测试
|
监控 前端开发 JavaScript
重学前端 1 # 前端发展史以及学习痛点
重学前端 1 # 前端发展史以及学习痛点
127 0
|
存储 资源调度 自然语言处理
浅谈前端工程化的发展以及相关工具介绍
随着发展的逐步发展,作为工程师除了需要关注需要写的⻚面,样式和逻辑之外,还需要面对日益复杂 的系统性问题,比如模块化文件的组织、ES6 JS 文件的编译、打包压缩所有的 JS 代码、优化和合并图片静态资源等等事情。
|
开发者
一个移动开发者的Mock数据之路(三)
一个移动开发者的Mock数据之路
174 0
一个移动开发者的Mock数据之路(三)