黑马程序员技术交流社区

标题: 【广州前端】- 前端开发利器Mock.js简介 [打印本页]

作者: AngularBaby 时间: 2018-4-19 15:30
标题: 【广州前端】- 前端开发利器Mock.js简介
本帖最后由 AngularBaby 于 2018-4-19 16:45 编辑

官网地址

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具，可以用来模拟服务器响应。
优点是非常简单方便，无侵入性，基本覆盖常用的接口数据类型。

前后端分离：让前端攻城师独立于后端进行开发
增加单元测试的真实性：符合直觉的接口
开发无侵入：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据
用法简单：通过随机数据，模拟各种场景
数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。

1. 安装
使用npm安装：

[Shell] 纯文本查看 复制代码

npm install mockjs

或者直接引入：

[HTML] 纯文本查看 复制代码

<script src="http://mockjs.com/dist/mock.js"></script>

2. 模拟数据
基本语法：

[JavaScript] 纯文本查看 复制代码



Mock.mock( rurl?, rtype?, template|function( options ) );

// rurl：可选。 表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。

// rtype：可选。 表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

// template：可选。 表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。 

// function(options)：可选。 表示用于生成响应数据的函数。

举个例子：

[JavaScript] 纯文本查看 复制代码

var data = Mock.mock('http://test.com', { // 需要拦截的url

          'list|10': [{

               'id|+1': 1, // id属性值自动加 1，初始值为1

                'name': '@cname', // 中文姓名

               'age|18-60': 1, // 18-60内随机整数，1只是确定类型

                'birthday': '@date("yyyy-MM-dd")', // 日期

                'city': '@city(true)', // 中国城市

                'gender|1': true, // 布尔值



        })

更多参数配置

3. 发送请求

[JavaScript] 纯文本查看 复制代码

$.ajax({

            type: "get", // 请求方式

            url: 'http://test.com', // 请求地址

            dataType: 'json', // 数据格式

            success: function (res) { // 成功回调

                console.log(res);

            }

        })

4. 查看结果

demo详见附件

点击查看更多精彩前端资源

mockjs.zip

32.26 KB, 下载次数: 49

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2