关于前端:别因为后台只有文档没出接口就耽误开发mock一下吧

当初开发模式个别都是前后端拆散，那就免不了相互“迁就”，比如说后盾只把接口文档大体定好了，接口还没出，作为前端的不能傻等着啊，然而不联调的去开发，很多细节就关照不到，很容易就呈现邻近快交工的时候才出接口（这里不能狭窄的认为后盾成心地，就是菜而已），当联调的时候才发现很多问题，那就太难堪了，如果延误了，锅很容易就盖在了前端的头上，得想个辙：

“请”后盾加快速度并保证质量，这是一种方法，每次都要嘱托一下，托付托付。(往往没什么卵用图个心安。。。)
本人 mock 接口，更好地和后盾“异步”开发，疾速推动前端工作进度，尽早的裸露问题，给本人争取更多的工夫去解决。

首先装置mockjs

    yarn add -D mockjs

而后看一下本人的网路申请库用的是啥：

__axios__:

    ...
    import Mock from 'mockjs'
    ...
    
    Mock.mock(apiUrl, mock)
    ...

__fetch__：就得非凡解决一下

首先装置mockjs-fetch

    yarn add -D mockjs-fetch

而后

    ...
    import Mock from 'mockjs'
        import mockFetch from 'mockjs-fetch';
        mockFetch(Mock);
    ...
    Mock.mock(apiUrl, mock)

到此基本操作就搞定了，但这还不够。

我看过很多的我的项目，往往是写了一堆。。。。栗🌰：

import Mock from 'mockjs'
import {builder, getBody} from '../util'

const login = options => {const body = getBody(options)
  return builder(
    {id: Mock.mock('@guid'),            // 这个 @是 mockJs 的占位符，能够到官网理解一下，这个不重要，咱们次要 codeReview
      name: Mock.mock('@name'),
      username: 'admin',
      password: '',
      avatar:
        'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
      status: 1,
      telephone: '',
      lastLoginIp: '27.154.74.117',
      lastLoginTime: 1534837621348,
      creatorId: 'admin',
      createTime: 1497160610259,
      deleted: 0,
      roleId: 'admin',
      lang: 'zh-CN',
      token: '4291d7da9005377ec9aec4a71ea837f'
    },
    '',
    200
  )
}



Mock.mock(/\/auth\/login/, 'post', login)

首先咱们品评一下，不晓得是不是我的“审美”怪，我看这样的代码多少有点顺当。

首先在头部引入了mockjs
而后引入了两个工具函数, 咱先不论干嘛的
```
import {builder, getBody} from '../util'
```
Mock.mock(/\/auth\/login/, 'post', login)而后执行了 mock

__评估__：

em～～～，每写一个 mock 模块就引一下 mockjs 库，反复了尽管就一条，__但还算能忍__。
em～～～，为啥要引工具函数呢，为啥还要理解工具函数，还是两个！如果为了实现超出根本 mock 的性能领域，那讲不了，但就是 单纯 mock，这就有点。。。，__难忍了__。
what！！！，mock 的接口地址竟然“硬了”，想想硬编码所摆布的恐怖，这几乎，__不能忍，不能忍__！！！

__总结__：

反复（哪怕只有几条），关注的点多（哪怕只有几个），硬编码（哪怕只有一处），有能力重构就不能忍，咱们只是想 mock 数据，间接点，天然一点不好么，就像字面那样，我想“mock”一个“api”。

import BaseApi from './baseApi'

let config = {
    fetchLightAdd: "/light/fetchLightAdd",
    fetchLightUpdate: "/light/fetchLightUpdate",
    fetchLightDetail: "/light/fetchLightDetail",
    fetchTestDataList: "/light/fetchTestDataList",
}

export default new BaseApi({config})

import BaseMock from './baseMock'

let config = {
    fetchLightAdd: {...},
    fetchLightUpdate: {...},
    fetchLightDetail: (data) => {const { body = {} } = data;
        let params = JSON.parse(body);
        // 在这里就各种模仿入参状况施展不同后果。if (params.id === "0") {
            return {
                code: "200",
                data: [{
                    lightName: "test_lightName_0",
                    comment: "test_comment_0",
                    lightItems: [{lightItemId: 1, lightType: 0, baseSelect: 1, exclude: false}]
                }]
            }
        } else if (params.id === "1") {
            return {
                code: "200",
                data: [{
                    lightName: "test_lightName_1",
                    comment: "test_comment_1",
                    lightItems: [{lightItemId: 1, lightType: 0, baseSelect: 0, exclude: 0}, {lightItemId: 2, lightType: 1, baseSelect: 1, exclude: false}]
                }]
            }
        }

    },
    fetchTestDataList: {...}
}

export default function mock(api) {new BaseMock({ config, apiConfig: api.getUrlConfig() })
}

首先每个文件都引入了 mockjs：解决🆗，em～～～只不过取而代之的是引入了BaseMock😂，（原本这句我都想省，但就放心代码搞的不好懂了，要不我差点拔刀🐶）
关注点多：解决🆗
硬编码：解决🆗

__总结__：就是一个简略的数据结构，提供给你，配就完了，想 mock 哪个接口，就写这个接口名字，真是字面那样：我想“mock”一个“api”，其余不须要你关注了，就这么简略且天然。

{
    /* 配置 mock 启动 */
    const {NODE_ENV, MOCK} = process.env;
    if (NODE_ENV === "development") {if (MOCK != "none") {require('MOCK');
        }
    }
}

配置 webpak 的选项：

 //isEnvProduction 依据 process.env.NODE_ENVde 值判断失去的
 externals:isEnvProduction?{mockjs:mockjs}:{}

首先 Moderate 打包速度还是很快的，才 21s，嘿嘿😁

而后看下报告：

要求他人不如要求本人来的理论,mock 的确能缓解不少压力，前端不容易，ta 的难还不是那种～～～难，ta 真的是那种，那种很少见的那种，神经病一样的难度。

贯彻思维的🌰

关于前端:别因为后台只有文档没出接口就耽误开发mock一下吧

前端 mock

怎么用 mock

怎么优雅的用 mock

codeReview 一下：

如果一个 api 是这样的：

那么冀望 mock 的样子应该是这样的：

咱们再 codeReview 一下：

别忘了 mock 只在开发模式用。

依据环境动静引入：

公布打包的时候去掉，包体小点不好么：

打包咱们看下：

结语