• umi的mock


    Mock 数据

    Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞。

    约定式 Mock 文件

    Umi 约定 /mock 文件夹下所有文件为 mock 文件。

    比如:

    .
    ├── mock
    ├── api.ts
    └── users.ts
    └── src
    └── pages
    └── index.tsx

    /mock 下的 api.ts 和 users.ts 会被解析为 mock 文件。

    编写 Mock 文件

    如果 /mock/api.ts 的内容如下,

    export default {
    // 支持值为 Object 和 Array
    'GET /api/users': { users: [1, 2] },
     
    // GET 可忽略
    '/api/users/1': { id: 1 },
     
    // 支持自定义函数,API 参考 express@4
    'POST /api/users/create': (req, res) => {
    // 添加跨域请求头
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.end('ok');
    },
    }

    然后访问 /api/users 就能得到 { users: [1,2] } 的响应,其他以此类推。

    配置 Mock

    详见配置#mock

    如何关闭 Mock?

    可以通过配置关闭,

    export default {
    mock: false,
    };

    也可以通过环境变量临时关闭,

    $ MOCK=none umi dev

    引入 Mock.js

    Mock.js 是常用的辅助生成模拟数据的三方库,借助他可以提升我们的 mock 数据能力。

    比如:

    import mockjs from 'mockjs';
     
    export default {
    // 使用 mockjs 等三方库
    'GET /api/tags': mockjs.mock({
    'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }],
    }),
    };
  • 相关阅读:
    nginx基本命令
    一堆LCT板子
    17?17!
    ……妈妈我会写维修数列了!
    bzoj3744 Gty的妹子序列
    Noip2016 总结&反思
    bzoj4025 二分图
    [SHOI2008]堵塞的交通traffic
    bzoj4237 稻草人
    BestCoder Round #90
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/16036217.html
Copyright © 2020-2023  润新知