@ecoding/mock
项目基于rax开发时,可使用此插件来解决工程mock数据
Last updated 2 months ago by w3cwhy .
MIT · Original npm · Tarball · package.json
$ cnpm install @ecoding/mock 
SYNC missed versions from official npm registry.

rax mock插件

开始前言

项目基于rax开发时,可使用此插件来解决工程mock数据

dip平台(http://dip.alibaba-inc.com

什么是dip平台的appId 强烈建议自己花10分钟去平台操作了解一下

avatar

什么是dip平台的UserId

你的花名就是

为什么要知道这两个

dip平台支持仓库创建和单独创建schema,单独创建的schema是在你的用户id下。在仓库建立的schema是在仓库id下。

build-scripts 指定配置 dev.json(手动新建)

"scripts": {
    "build": "build-scripts build",
    "start": "build-scripts start --config ./dev.json"
}

快速开始

tnpm i @kaola/vip.dev-plugin-rax-mock --save-dev

dev.json

根目录新建dev.json 在dev.json内新增 @kaola/vip.dev-plugin-rax-mock 插件

// 其他配置参照build.json
"plugins": [
    [
        "@kaola/vip.dev-plugin-rax-mock",
        {
            "enable": true,
            "type":"dip",
            "config":"./.mockrc.js"
        }
    ]
]

options说明

  1. enable : 开启mock功能
  2. type : local | dip

local: 本地目录文件作为 mock数据
dip: 结合 dip平台的mock数据

  1. config:指定配置文件路径(默认为项目根目录 .mockrc.js)

.mockrc.js 说明

在项目根目录创建 .mockrc.js 文件 配置了 exclude ,如果匹配到过滤项,则不走mock数据
配置了 include ,如果匹配到包含项,则走mock数据
若同时配置 exclude include,则逻辑是先排除,再包含。若都为空,则全走mock数据

module.exports = {
    // 排除需要mock的接口,该参数作用于dip模式和local模式
    exclude : [ 
        "/api/cxc",
        "/api/text"
    ],

    // 包含需要mock的接口,该参数作用于dip模式和local模式
    include : [
        "/api/sjj"
    ],

    // dip平台的 appid,userid,这个只作用于dip模式
    dip: { 
        ids : ['test-sg', '水谷']
    }
}

案例

本地mock案例

1. dev.json 配置插件

"plugins": [
    [
        "@kaola/vip.dev-plugin-rax-mock",
        {
            "enable": true,
            "type": "local"
        }
    ]
]

2. 根目录新建 mock目录,对应接口pathname逐一新建目录 例如:

avatar

3. 启动本地开发

npm run start

4. 业务代码

// 会请求到 mock/get/api/cxc/data.json
axios.get('/api/cxc')

远程dip mock案例

1. dev.json 配置插件

"plugins": [
    [
        "@kaola/vip.dev-plugin-rax-mock",
        {
            "enable": true,
            "type": "dip"
        }
    ]
]

2. 去dip 平台查看appid

一般情况下都只用填写appid avatar

3. 试着在仓库里新建个schema

avatar

注意:这里的schema名称用 __分割,api__cxc 对应你业务代码里写 api/cxc,既 __ 为 /

4. .mockrc.js 配置dip

module.exports = {
    exclude : [],
    include : [],
    // dip平台的 appid,userid,这个只作用于dip模式
    dip: { 
        ids : ['test-sg']
    }
}

5. 启动本地开发

npm run start

6. 业务代码

// 会请求到 dip 平台的对应仓库id下,名为 api__cxc schema模拟数据
axios.get('/api/cxc')

环境代理

新增一种环境代理,用于在前后端联调阶段,代理到指定的环境,配置如下:

{
                "enable": true,
                "type": "env",
                "envProxyTarget": "dev",
                "envProxyRule": {
                    "dev": {
                        "/gw": {
                            "target": "http://dataserver-kl.netease.com",
                            "changeOrigi": true,
                            "headers": {
                                "host": "localhost:3000"
                            }
                        }
                    }
                }
            }

当type改为env时候,需要新增envProxyTarget(代理环境名称),改名称需要跟 envProxyRule中第一层的key值对应上,可以在代理的header中新增模拟用户信息的cookie,方便指定用户调试

mock规则函数

demo

module.exports = function(request, response, DIP){
    return {
        code: 200,
        message: "success",
        body: {
            id: DIP.id(),
            url: DIP.url(),
            email: DIP.email(),
            age: DIP.num(200, 100),
            chineseName: DIP.chinese(10),
            englishName: DIP.str(10),
            image: DIP.Mock.Random.image('200x100', '#FF6600','一块腹肌'),
            date: DIP.Mock.Random.date(),
            info: DIP.repeat(100, function(name){
                return {
                    id: DIP.id(),
                    name,
                    profile: DIP.Mock.Random.image('200x100', '#FF6600','一块腹肌')
                }
            }, '腹肌')
        }
    }
}

DIP对象统一封装内置的规则函数和mockjs支持的规则函数

mock规则函数-内置规则函数

id()

返回一个唯一数值标识,用法:

console.log(DIP.id()); // 输出随机数值,保证在当前 mock 结果中是唯一的

str(len, min, chars)

返回一个随机字符串,参数说明:

参数名 类型 是否必需 默认值 描述
len Number 10 字符串长度,如果有 min 参数,则它表示最大长度
min Number 字符串最小长度
chars String ALPHA_NUMERIC_CHARS 字符串集

使用方法:

console.log(DIP.str()); // 输出随机字符串

chinese(len, min)

返回一个随机中文字符串,参数说明:

参数名 类型 是否必需 默认值 描述
len Number 10 需要生成的字符串长度,如果有 min 参数,则它表示最大长度
min Number 字符串最小长度

使用方法:

console.log(DIP.chinese()); // 输出随机中文字符串

email()

返回一个随机邮箱地址,参数: 无

使用方法:

console.log(DIP.email()); // 输出随机邮箱地址

url(protocol)

返回一个随机 url 地址,参数说明:

参数名 类型 是否必需 默认值 描述
protocol String http url 协议

使用方法:

console.log(DIP.url()); // 输出随机 url 地址

num(max, min)

返回一个随机数字,参数说明:

参数名 类型 是否必需 默认值 描述
max Number 100000 最大值
min Number 0 最小值

使用方法:

console.log(DIP.num()); // 输出随机数字

bool()

返回一个随机布尔值,参数: 无

使用方法:

console.log(DIP.bool()); // 输出随机布尔值

repeat(num, arrEleGenFunc, ...arrEleGenFuncArgs)

返回指定元素个数的数组。只对数组类型的参数有效。参数说明:

参数名 类型 是否必需 默认值 描述
num Number 3 生成的数组的元素个数
arrEleGenFunc Function 数组元素的生成函数

注意: arrEleGenFunc 之后的参数会传给 arrEleGenFunc 方法

使用方法:

console.log(DIP.repeat(10)); // 输出有 10 个元素的数组
console.log(DIP.repeat(10, DIP.url, 'https')); // 输出一个数组,它有 10 个元素,每个元素是一个 url 地址,并且 url 的协议是 https

mock规则函数-mockjs规则支持

系统中DIP已经集成了mockjs规则函数,需要通过DIP.Mock引用mockjs对象,用法可参考mockjs函数的使用。

DIP.Mock.Random.image('200x100', '#FF6600','一块腹肌')

mockjs

Current Tags

  • 0.0.7                                ...           latest (2 months ago)
  • 0.0.7-test-1                                ...           test (2 months ago)

8 Versions

  • 0.0.7-test-1                                ...           2 months ago
  • 0.0.7                                ...           2 months ago
  • 0.0.6                                ...           2 months ago
  • 0.0.5                                ...           2 months ago
  • 0.0.4                                ...           2 months ago
  • 0.0.3                                ...           2 months ago
  • 0.0.2                                ...           2 months ago
  • 0.0.1                                ...           2 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 9
Last Day 0
Last Week 8
Last Month 11
Dependencies (2)
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |