Have ideas to improve npm?Join in the discussion! »

    @shymean/koa-mock

    1.2.0 • Public • Published

    Koa-Mock

    特性

    mockjs可以在浏览器中拦截ajax请求,现在,你也可以在koa中拦截对应的url并返回模板数据,至可以在前端和后台环境中共用一套mock模板。

    此外,还支持模拟jsonp和本地文件资源映射。

    可以通过很方便地关闭mock环境,不会对逻辑代码产生侵入,也不用删除mock代码

    比下面这种侵入到逻辑代码的方式要好得多

    let apiModel = {
        submit(){
            return Mock.mock({
                // mock数据
            })
        }
    }

    mock模板可以当做接口文档保留在版本仓库中

    接口文档可能会更新不及时,而mock模板应用在最新的开发环境中,相对于文档而言,mock的字段模板对开发人员更加友好,因此与其把mock代码散落在控制器和接口中,不如把mock模板整合在一起,作为接口文档进行管理

    使用

    npm i @shymean/koa-mock -D
    

    准备mock模板

    参考mockjs官方文档,基本一致的语法

    // _mock.js
    // 对应的rurl会被中间件拦截,并返回mock数据
    Mock.mock('/', {
        data: [],
        msg: "hello mock",
        "code|1-4": 1,
    })
     
    // 可以mock指定的请求方法
    Mock.mock('/test', 'POST', {
        data: [],
        msg: "hello mock",
        "code|1-4": 1,
    })
     
    // 扩展rtype,支持jsonp形式,使用param传入对应的回调名
    Mock.mock('/test', {
        type: 'jsonp',
        param: 'callbackName'
    },{
        code: 0,
        msg: 'hello from mock jsonp',
        data: {
            "id|1000-9999": 1,
        }
    })
     
    // 默认回调名称 callback
    Mock.mock("/test2", "jsonp", {
        code: 0,
        msg: "hello from mock jsonp2",
        data: {
            "id|1000-9999": 1,
        }
    });

    引入中间件

    在koa中引入中间件和mock模板

    const Koa = require("koa");
    const app = new Koa();
     
    const mock = require('koa-mock')
    // 加载模板文件
    require("./mock/_mock.js");  
    app.use(mock())

    此时访问对应的模板url,就会自动返回对应的mock数据,跟浏览器中自动拦截rurl对应的请求类似。

    自定义url请求匹配

    有时候某个相同的url请求,根据业务参数需要返回不同的模拟数据,因此提供了自定义匹配请求url的功能,需要在模板文件中实现Mock.parseUrl方法即可, 该方法返回一个用于匹配的rurl

    Mock.parseUrl = function(ctx){
        // ctx为koa上下文对象
        return 'someUrl'
    }
     
    Mock.mock('someUrl', {code: 0})

    在浏览器中使用

    由于没有对mock模板进行注入,因此即使是在浏览器环境中使用同一套模板也是十分方便的

    <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <!-- 这里将mock模板直接引入到页面接口 -->
    <script src='/_mock.js'></script>

    Keywords

    none

    Install

    npm i @shymean/koa-mock

    DownloadsWeekly Downloads

    1

    Version

    1.2.0

    License

    ISC

    Unpacked Size

    12 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar