node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

fie-plugin-mock

fie-plugin-mock

fie-plugin-mock 插件用于配置一个简单、易用、灵活的、可交互的前端 http 数据mock服务。

说明

  1. 前端与后端定义接口规范,DIP可以解决,它也可以生成基于请求/响应规范的mock数据及接口。 但这样的mock接口是不可交互的,比如请求的数据不支持分页、不支持搜索、不支持更新.....

  2. 即使通过DIP与后端定义接口规范后,联调等待将是一个相对比较漫长的过程,要依赖后端mock数据,还要依赖他们不稳定的环境。

如果前端可以配置一套完整的接口就好了,所以为解决以下痛点,通过本地配置一套接口的方法,实现:

  • 自动生成mock数据
  • 接口的常用操作:
    • 添加
    • 修改(更新)
    • 删除
    • 搜索(带分页,带搜索条件,带排序)
  1. mock自定义接口返回

使用场景

适合前后端分离的项目。项目中需要通过jsonp的方式

  • 获取数据列表(带分页,带搜索条件,带排序)
  • 添加或修改一条数据(添加后,获取当前数据或数据列表会相应更新)
  • mock接口返回定义一些额外逻辑

安装

  1. 基于FIE开发流程的安装
    $ npm install fie -g
    $ fie install fie-plugin-mock

该套件依赖 Node.jstnpmfie 。 请先确保本机已安装了fie的运行环境,若第一次使用,请参考该文档进行环境搭建

  1. 如果单独使用插件
    $ npm install fie-plugin-mock -g

注意,因为此插件原是FIE体制下的插件。如果您的项目需要单独使用插件,对应的命令行使用方式只需将fie与mock之间的空格去掉

  • $ fie mock init -> fiemock init
  • $ fie mock start -> fiemock start
  • $ fie mock fake -> fiemock fake
  • $ fie mock help -> fiemock help

使用

初始化

项目根目录下或随便一个目录

    $ fie mock init  

即可看到目录下生成以下文件

.
└── mock
    ├── mock-api.js
    ├── mock-db.json  
    └── mock-seed.js  

配置

在mock-seed.js定义mock数据生成规则。

  • 第一步:定义表名(资源名)
  • 第二步:添加字段,设置主键, 及生成mock数据规则
  • 第三步:设置循环生成mock数据

生成mock数据

根据mock-seed.js中定义的规则, 生成 mock-db.json

    $ fie mock fake

启动mock服务

    $ fie mock start

就可以通过http://localhost:9090 进行http请求了

显示帮助

    $ fie mock help

例子

todo List

  1. todos 是很多工具或框架入门常用例子。假设他的其本功能有:

    1. 获取所有的todo list,需要分页、排序
    2. 条件查询状态"末开始" 或“进行中”或“已完成” 的todo list, 需要分页、排序
    3. 新增一条todo 记录
    4. 根据itemId,获得一条todo 记录
    5. 改变一条todo 记录状态(由"未完成"改为“进行中”)
    6. 删除一条todo 记录
  2. 基于6个需求功能点,以下一步一步设置:

    1. 安装好fie 及 初始化 fie mock init 后,打开 ./mock/mock-seed.js(参看默认代码)
      • 在 step1_baseSet()方法中: 定义表名(资源名),如
      • 在 step2_design()方法中: 添加字段,设置主键, 及生成mock数据规则
      • 在 step3_generate()方法中:设置循环生成mock数据
    2. 执行
       $ fie mock fake

    根据mock-seed.js中定义的规则, 生成 mock-db.json 0. 执行

       $ fie mock start

    http://localhost:9090 mock服务起动

  3. http://localhost:9090 mock服务起动后,服务接口将支持的功能如下

功能点 调用 Api Ajax Method 参数 返回结果
获取所有的todo list,需要分页、排序。 http://127.0.0.1:9090/todos?pramas=xxxx
或http://127.0.0.1:9090/getlist?pramas=xxxx
基中 xxxx = JSON.stringify(参数)
GET { "query": {"pageSize":10, "pageNum":1}, "sort": "itemId desc"} todos list
条件查询状态"末开始" 或“进行中”或“已完成” 的todo list, 需要分页、排序 同上 GET { "query": {"pageSize":10, "pageNum":1, "status":"末开始"}, "sort": "itemId desc"} todos list
新增一条todo 记录 http://127.0.0.1:9090/todos
http://127.0.0.1:9090/todos/create
POST {"title":"code review", "status":"未开始",...others }
(...others指其他字段数据)
新增的todo
根据itemId,获得一条todo 记录 http://127.0.0.1:9090/todos/1
http://127.0.0.1:9090/todos/get?itemId=1
GET {"itemId":"1"} 将 返回id = 1 的那条数据。
改变一条todo 记录状态(由"未完成"改为“已完成”) http://127.0.0.1:9090/todos/1
或http://127.0.0.1:9090/todos/edit
PUT或POST {"itemId": 1,"status":"已完成"} 返回更新(修改)后id = 1 的那条数据
删除一条todo 记录 http://127.0.0.1:9090/todos/1
http://127.0.0.1:9090/todos/delete
DELETE或POST {"itemId":"1"} 将 删除掉id = 1 的那条数据。再调用http://127.0.0.1:9090/todos 会发现数据已经被删除

PS: 调用API有的有两个,插件默认是支持Resful Api规范的, 但实际项目中,后端不一定遵循此规范。 所以, 增删改查的接口用 :resoure/keyworks 方式:

进阶使用方法

上面例子是其本用法, 也是推荐用法。满足生成数据的mock规范,以及70%左右mock接口需求。

  1. 如果觉得mock规范比较麻烦,可以直接手动编辑./mock/mock-db.json

比如您在JSON根节点添加:

    "bu":[ {
       "id": 1,
       "name": "taobao"
     },
     {
       "id": 2,
       "name": "tmall"
     }
   ]

fie mock start 后,您就会获得支持接口支持: 如 http://127.0.0.1:9090/bu/create (把上面表的todos 变在 bu )

PS: 但您就不能再执行 fie mock fake 了,否则会被mock-seed.js 生成的数据覆盖

  1. 如何自定义接口返回格式?

    • 打开./mock/mock-api.js 便是一个让你灵活配置的地方 如下你可以改变查询列表返回的的数据结构
        /*根据请求条件获取列表数据----响应JSON结构*/            
        return {
            success: true,
            totalCount: dataResult.totalCount,
            pageSize: dataResult.pageSize,
            pageNum: dataResult.pageNum,
            totalPage:  dataResult.totalPage,
            hasMore: dataResult.hasMore,
            data:  dataResult.data // 你可以把data 改为model: dataResult.data 
        }
  2. 如何新增自定义接口?

    • 比如要添加一个 http://127.0.0.1:9090/helloworld 的接口,返回数据随着

      • 打开./mock/mock-api.js
      • 在apiRouteMap 下添加:
      "helloworld": function(data , method) {
          //data 是POST或GET过来的数据,method是POST/GET/PUT/DELETE
          return {
           success: true,
           data: "hello world!"
          }
      }

      * 如果需要返回一个极其复杂的数据结构呢?既包含数组又包含对象,比如这样的返回:

       {
              success: true,
              data: {
                  a: [], 
                  b: {},
                  c: "whatever"
              }
       }

      你可以选择在helloworld里面写死,但a,b 数据量较大的时候,mock-api.js 这个文件会变得臃肿。 所以建议造数据及字段尽量在mock.seed.js 中定义好。 因为 数据a 或实体b 对应的字段可重复列用的可能性较大 这时我们就可以这样:

      "helloworld": function(data , method) {
         return  {
              success: true,
              data: {
                  a: this.db.get("a").value(), //获取一个数组的数据,注意:this.db.get("a")是[loadash对象](https://lodash.com/docs/4.15.0), 你可以用loadash方法做数据过滤
                  b: this.db.get("b").value()[0], //取一条数据当对象
                  c: "whatever"
              }
          }
      }
  3. 我不想用以上方式定义数据接口,我只有一份json 数据,怎么快速生成接口?

todo

* 接口平台化 

问题反馈

  1. 套件开发者:@六韬
  2. 建议及问题反馈入口:https://github.com/fieteam/fie-plugin-mock/issues/new
    PS: 注意将issues Assignee 给@俞上津_Alex Yu。