高效的JSX-一一网

背景

在日常开发中，经常会出现前端等后端接口的情况，mock数据便在这一过程中起到了非常重要的作用。很多时候，很多常规的mock方法，是通过直接模拟整个数据来实现，格式可能各有千秋，比如像下面的这个例子：

export default {
    'POST /xxx/xxx': {
        data: {
            // ...
        },
        code: 200,
        msg: 'success'
    }
}
复制代码

但是，这种方式更多的情况下，只适应于开发的场景，在一些迭代项目的需求上，其实mock数据写起来十分不方便，因为我们会用到真实数据，而有些真实数据可能会很长，需要mock的其实只有一点点。于是乎，我便撸了这么个项目，主要是方便我日常工作中的迭代需求。此项目以发布在npm上，可自行下载，下面进行文档的介绍。

安装

npm i jsx-mock-server -g
复制代码

全局安装即可

使用说明

命令行中使用如下命令获取帮助

mock-server --help
复制代码

Usage: mock-server [options]

命令：
  mock-server setting  desc: open setting.json
  mock-server mock     desc: open mock file
  mock-server start    desc: start mock server

选项：
  -h, --help     显示帮助信息                                             [布尔]
  -v, --version  显示版本号                                               [布尔]

示例：
  mock-server start
复制代码

mock-server setting

改写setting配置文件

{
    "server": [ // 使用的服务数组，可以同时开启多个服务
        {
            "name": "test", // 服务名称，对应 server.json 里的服务名
            "port": 8088, // 本地服务端口号
            "mockfile": "test", // mock文件名称，如不填，则默认使用服务名称
            "proxyUrl": "https://xxx.xx.xx.xxx:443" // 代理的服务器地址
        }
    ]
}
复制代码

可以同时开启多个服务，以便应用于同时mock多个项目的场景

mock-server mock

打开mock目录，目录下的文件名对应setting中的mockfile

-mock
 -test.jsx
复制代码

在下文会介绍mockfile文件的详细语法

mock-server start

启用mock服务

mockfile文件，使用jsx语法

即我们示例中的test.jsx文件

// 需要先引入一下react
const React = require('react');

// 导出mock数据
module.exports = <mock>
    <post>
        <prefix name='trade'>
            <replace>{ data }</replace>
            <path name='queryTrade'>
                <target keys={ ['data', 'list', 0] }>
                    <merge>{ data }</merge>
                </target>
            </path>
        </prefix>
    </post>
    <get></get>
</mock>
复制代码

mock标签，声明启动mock数据
post标签，声明这下面的都是 post 请求，与之对应的还有get标签
prefix标签，表示一个请求的前缀
- name 属性，表示前缀的值
path标签，表示第 n 级接口地址到这里为止
- 小提示：可以将path和prefix的值叠加使用，像这样：或者
replace标签，表示整个替换当前接口的返回值
merge标签，表示和当前接口的返回值进行覆盖合并，就像Object.assign(接口实际返回值, mock值)
target标签，表示会依次选择keys中的字段名，选择对对应的值进行replace或merge操作
- 例如接口返回数据为
```
  {
      data: {
          list: [
              {
                  test: test
                  // ...
              }
          ]
      }
  }
复制代码
```
如果我只想replace返回数据中的data.list[0]，其它值保持不变，就可以指定keys为[‘data’, ‘list’, 0]
更多标签还在考虑中…

示例中的xml会被解析为：

[
    {
        method: 'POST',
        url: '/trade',
        type: 'replace',
        data: data
    },
    {
        method: 'POST',
        url: '/trade/queryTrade',
        target: true,
        targetKeys: ['data', 'list', 0],
        type: 'merge',
        data: data
    },
]
复制代码

一些不对的写法

对于一些不严重的错误写法，会做兼容处理

<post test='test'>
    <prefix name='print'>
        <!-- 同一层级有多个 data 存在时，仅第一个生效 -->
        <replace>{ data1 }</replace>
        <!-- 这个会被忽略 -->
        <replace>{ data2 }</replace>
        <!-- 当标签内没有有效的数据项时，这个标签会被忽略 -->
        <prefix name='center1'></prefix>
    </prefix>
</post>
复制代码