使用mockjs_Mockjs让模拟数据丰富多彩

最新推荐文章于 2022-08-07 19:06:18 发布

weixin_39803207

最新推荐文章于 2022-08-07 19:06:18 发布

阅读量149

点赞数

文章标签：使用mockjs

本文链接：https://blog.csdn.net/weixin_39803207/article/details/111699847

版权

Mockjs 是一款强大的工具，它允许前端开发者独立于后端进行开发，通过生成随机数据模拟各种场景。它能拦截 Ajax 请求，返回模拟响应数据，支持生成各种类型的数据如文本、数字、日期等。只需简单配置，即可实现数据模板和占位符的使用，快速生成模拟数据。例如，Mock.Random 可以生成随机的省市区信息。这个工具对于前端开发和测试具有极高效率提升作用。

摘要由CSDN通过智能技术生成

Mockjs的两大必杀技：

1、生成随机数据

2、拦截 Ajax 请求

有了mockjs可以

1、让前端攻城师独立于后端进行开发。

2通过随机数据，模拟各种场景。

3、不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

4、支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

wiki地址：nuysoft/Mock

基本上半个小时就可以把官方自带例子浏览一遍了。

一、语法规范

1、数据模板

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名 name

// 生成规则 rule

// 属性值 value

'name|rule': value

属性值是可以是字符串 String、Number、Boolean、Object、Array、Function、RegExp

2、占位符

占位符格式：@占位符

占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符引用的是 Mock.Random 中的方法。

来个最简单的例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://mockjs.com/dist/mock.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      // @NAME占位符  使用的是Random类中随机名
      console.log(Mock.mock({
        name:'@NAME'
      }));
</script>
  </body>
</html>

二、mock()函数根据数据模板生成模拟数据

1、Mock.mock( template )

根据数据模板生成模拟数据。

2、Mock.mock( rurl, template )

当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

3、Mock.mock( rurl, function( options ) )

记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

4、Mock.mock( rurl, rtype, template )

记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

5、Mock.mock( rurl, rtype, function( options ) )

记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

其中rurl、rtype、template、function(options)均为可选参数

三、Mock中最常用的随机工具类Random

随机基本数据类型：

boolean,integer, float, string等

随机时间日期：

date, time, datetime, now

随机图片

img, dataImage(base64编码)

随机颜色

color, hex, rgb

随机文本

word, title,cword, ctitle

随机名字

first, last, name, cfirst, clast, cname

随机Web

url, domain, protocol, tld, email, ip

随机地址

region, province, city

来个简单的helloworld



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://mockjs.com/dist/mock.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      // 可以得到随机的省市区了
      console.log(Mock.Random.province(),Mock.Random.city(),Mock.Random.region());
</script>
  </body>
</html>