可视化mockjs - JavaShuo

前言

Mock就是用一个虚拟的对象（Mock 对象）来建立以便测试的测试方法。html

随着WEB技术的发展，先后端分离架构变得广泛起来，可是问题也随之而来，文档零散、不规范。而且常常碰到例如参数的新增、变更。这就致使了后端工程师须要耗费大量的时间维护接口文档
前端的开发工做依赖于后端提供的接口数据，可是后端接口每每没有那么快就能够开发完成。这就致使了前端在“等”数据。
上述的状况就会致使工做效率低下，沟通成本增长。接口管理平台的需求就日趋强烈

因此这也促进了mock的出现和发展前端

说说本身使用mock的变化

1.原地模拟数据

直接在页面data里面声明或者外部文件声明而后引入 vue

优势：这样相应页面就会有占位数据，有个直观的感受git

缺点：数据写死，不会变化，也不是从接口获取后期待对接的工做量仍是很高，并且前期成本也不低github

2.接口声明return数据

这里其实和第一种没什么区别，在接口定义的地方返回数据。只是起到占位的做用，非要和第一个对比，只是增长了接口简单声明，为后面对接少了一点点工做量，其实后面对接，仍是有不少工做要作。json

3.使用mock.js

其实较早接触mock.js 最近才知道YApi 直接模拟相应接口返回，接口名也能够自定义，数据类型也能够自定义随意改动等等好处在下一步慢慢体会直接使用引入mockjs而后使用后端

const ResultUtil = require('../_util/resultUtil');
const Mock = require('mockjs');
// 公告管理
const dataList = Mock.mock({
  'rows|12': [
    {
      demoId: '@id',
      demoTitle: '@ctitle(3,10)',
      demoCnte: '<h2 style="text-align: center;">公告</h2><p>测试测试，内容内容。</p>',
      'demoMan|1': ['张三', '李四'],
      demoTime: '@datetime',
      'demoStatusText|1': ['生效', '未生效'],
      'demoStatus|1': ['1', '2'],

      'demoRole|1': ['1', '2'],
      'demoRoleText|1': ['专家', '社会监督员'],
      'demoMethod|1': ['1', '2'],
      'demoMethodText|1': ['PC', '微信'],
      demoFileList: [
        {
          archiveFor: 'xls',
          archiveId: 107,
          archiveName: '任务管理病案审核专家意见模板.xls',
          bizId: 'ZJYY0001',
          cldArchiveId: '557',
          crteTime: 1606443355672,
          crterId: '0',
          crterName: '超级管理员',
          fileBase64: null,
          matId: '1303',
          rid: '557',
          updtTime: 1606443355672,
          valiFlag: null,
        },
      ],
    },
  ],
});
// 操做历史
const hisList = Mock.mock({
  'rows|32': [
    {
      hisId: '@id',
      hisResult: '@ctitle(3,40)',
      'hisName|1': ['张三', '李四'],
      hisTime: '@datetime',
      'hisTypeStatusText|1': ['生效', '未生效'],
      'hisTypeStatus|1': ['1', '2'],
      'opterRoleText|1': ['专家', '社会监督员'],
    },
  ],
});

module.exports = {
  // 查询列表
  'GET /demo/getList 500': ({ query }) => {
    const { pageNo = 1, pageSize = 10 } = query;
    const dataListItems = dataList.rows;
    const pageData = ResultUtil.pagination(pageNo, pageSize, dataListItems);
    return ResultUtil.pageSuccess(pageData, dataListItems.length);
  },
  // 查询详情
  'GET /demo/detail 500': ({ query }) => {
    const { demoId = '' } = query;
    const dataListItems = dataList.rows;
    const index = dataListItems.findIndex((item) => item.demoId === demoId);
    return ResultUtil.success(dataListItems[index !== -1 ? index : 0]);
  },
  //   查询历史记录
  'GET /demo/getHistory 500': ({ query }) => {
    const { pageNo = 1, pageSize = 10 } = query;
    const dataListItems = hisList.rows;
    const pageData = ResultUtil.pagination(pageNo, pageSize, dataListItems);
    return ResultUtil.pageSuccess(pageData, dataListItems.length);
  },
};

复制代码

这样的话在项目中就能够像调用接口而后去模拟随机生成数组，mockjs很强大不少api我也没搞懂，具体详情官网奉上 mock官方文档和项目地址api

这样的作法也是我以前的作法我在使用的时候就在想能不能更简单的去配置相似rap2或者easy-mock大搜车这样可视化操做。若是你是团队多人我也建议在这样的网站上拉个团队建个仓库多人协调工做数组

那我我的玩玩接下来介绍本文重点-一个本地化的可视化配置的mock项目浏览器

项目介绍

一个基于mockjs、vue二、koa实现一个本地化的可视化配置的服务项目(本文大篇幅介绍，也是本文最想表达的项目详情)

在线项目地址

在线mock界面地址

PS:这里临时加点内容： 不少人说在线新增成功后接口会报错这是由于服务慢了一步，因此须要刷新一下页面。那我这里的建议是你本地把server文件的项目安装依赖而后本地跑起来，界面右上角换成你本地跑起来的服务地址，这样体验更佳(还没想到这个解决办法大佬们要是知道能够告诉我一下我尝试一下)。

服务接口地址http://1.14.164.222:6868+模块名+接口名(如：http://1.14.164.222.cn:6868/user/test2) user模块下test2接口配置：在线测试：

浏览器直接访问：

源码地址：

欢迎star！谢谢star！

PS:我这服务器只供在线小测试和练手使用(随时可能关闭)

1.项目结构

一个page是ui界面的项目一个server是本地接口服务项目

2.项目运行

首先page和server都要安装依赖先把服务跑起来而后再跑page

// 命令1
cd page
yarn 
yarn run serve
// 命令2
cd server
yarn 
yarn run serve

复制代码

3.项目使用

这是跑起来的ui界面你在这能够去添加各类模块和接口，而后自定义返回类型添加成功能够直接浏览器测试或者点测试接口也能够在项目中使用注意点：若是你接口有参数之类是要相应填写的

使用的话知道操做后就特别的流畅方便一开始上手可能须要摸清一下用法

4.server服务项目重点

简单说说server文件(服务)的项目

运行

yarn install: 安装依赖
yarn serve: 运行项目

自定义 mock 口访问(用于项目开发前端模拟接口使用)

本地项目运行成功后，接口访问格式为本地 ip 或者localhost+ 端口(统一为 6868)+ 所属模块的接口前缀(pathName)+ 所访问接口的接口地址(url)

例如，访问接口前缀为 user 的模块下的 add 接口，访问地址以下：

http://localhost:6868/user/add
复制代码

UI 界面操做接口(用于 UI 界面操做)

相关接口可见接口文档.md 文件，接口访问格式为本地 ip 或者localhost+ 端口(统一为 6868)+ 接口名称(如‘/section/createSection’)

例如，访问建立模块接口，访问地址以下：

http://localhost:6868/section/createSection
复制代码

主要目录结构说明

├── public                --存放接口生成的静态数据
├── README.md             --项目说明文件
├── 接口文档.md             --接口说明文件
├── 接口测试用例.md         --接口测试用例说明文件
├── index.ts              --服务启动文件
├── logger.ts             --日志处理文件
├── server.ts             --服务主要处理文件
├── src                   --项目代码目录
├──── api                 --路由相关处理目录
├──── config               --环境配置目录
├──── controller          --接口参数校验目录
├──── enum                --常量目录
├──── service             --接口具体操做处理目录
├──── types               --相关参数的 interface 定义 目录
├──── utils               --工具方法目录
├──── validate            --接口参数校验方法目录
复制代码

5.主要实现逻辑

分为模块相关接口和模块下接口相关操做的接口

模块相关接口实现

新增模块： public/sectionList 下新建以 pathName 命名的 json 文件（如下简称“模块 json 文件”），写入提交的模块相关信息；同时 public/下新建以 pathName 命名的文件夹（如下简称“模块接口文件夹”），用以存放该模块下的接口；
修改模块：修改模块 json 文件，对比旧的 pathName，如不同，须要将模块 json 文件重命名以及模块接口文件夹以新的 pathName 重命名；
获取模块详情：找到模块 json 文件，读取文件内容；
删除模块：删除模块 json 文件和模块接口文件夹(文件夹下的全部文件也需删除)；
获取带分页的模块列表：获取 public/sectionList 文件夹下的全部 json 文件个数及内容，拼接为带 list 和 total 的对象返回。

接口相关接口实现

新增接口：根据 pathName 找到对应的模块接口文件夹，建立以 url 命名的 json 文件（如下简称“接口 json 文件”），写入提交的接口相关信息；
修改接口：修改接口 json 文件，对比旧的 url，如不同，须要将接口 json 文件以新的 url 重命名；
获取接口详情：找到接口 json 文件，读取文件内容；
删除接口：删除接口 json 文件；
获取带分页的接口列表：获取模块接口文件夹下的全部 json 文件个数及内容，拼接为带 list 和 total 的对象返回。

自定义 mock 接口实现

读取接口 json 文件数据，获取请求参数和响应内容参数。第一步，校验请求的必填参数是否有提交，其次校验提交的参数类型是否正确。第二步，在第一步成功的基础上，对响应内容的数据进行处理，处理为 mock 可接收的对象，而后经过 mock，模拟数据返回。

6.serve接口文档

server的几个接口是重点好比增长模块增长接口删除接口等等因此放出一些接口文档

(1) 接口返回成功示例

{
  success: true  // 主要经过这个字段去判断成功或者失败
  message: "新增成功"
  data: {list: [,…], total: 2}
  code: 200
}
复制代码

(2) 接口返回失败示例

{
  success: false
  data: null
  message: "child "url" fails because ["url" is required]"
  code: 400
}
复制代码

新增模块接口 post 方式 /section/createSection

{
  "name": "模块1", // 模块名称-必填
  "pathName": "user", // 建立的文件夹名称以及调用接口须要加的前缀-必填且只能是英文(页面就叫接口前缀吧),每一个模块的pathName惟一
  "description": "模块介绍" // 接口描述可选
}
复制代码

详情模块接口 post 方式 /section/getSectionDetail

{
  "pathName": "user" // pathName-必填
}
复制代码

更新模块接口 post 方式 /section/updateSection

{
  "id": 123, // id-必填
  "name": "模块1", // 模块名称-必填
  "pathName": "user", // 必填
  "description": "模块介绍" // 接口描述可选
}
复制代码

删除模块接口 post 方式 /section/deleteSection

{
  "pathName": "user" // pathName-必填
}
复制代码

获取模块列表 post 方式 /section/getSectionList

{
  "page": 1, // 当前页数可选
  "size": 2, // 每页显示条数可选
  "isPage": true // 必填，表示是否分页，true分页、false不分页
}
复制代码

新增接口 post 方式 /interface/createData

// 提交参数
{
  "pathName": "user", // 所属模块的模块pathName必填
  "name": "示例接口", // 接口名必填
  "url": "/createJson", // 接口地址必填
  "method": "GET", // 接口请求方式可选，默认"POST"
  "status": 200, // 状态码可选，默认200
  "description": "描述" // 接口描述可选
}
复制代码

详情接口 post 方式 /interface/getDetailData

{
  "pathName": "user", // 所属模块的模块pathName必填
  "url": "/createJson" // 接口地址必填
}
复制代码

修改接口 post 方式 /interface/updateData （参数必填项还未所有肯定）

{
  "pathName": "user", // 所属模块的pathName必填
  "id": 123, // 所更改的接口id--必填
  "name": "示例接口", // 接口名--必填
  "url": "/createJson", // 接口地址--必填
  "method": "GET", // 接口请求方式--必填
  "status": 200, // 状态码--必填
  "description": "描述" // 接口描述
  // 自定义请求参数
  "request": [
      {
        "id": 100,
        "parentId": -1,
        "name": "name", // 字段名
        "required": true, // 是否为必填项
        "type": "String", // 字段类型
        "rule": "", // 生成规则
        "value": "", // 初始值
        "description": "数组属性示例" // 字段描述
      },
    ],
  // 自定义返回内容
    "response": [
      {
        "id": 6,
        "parentId": -1,
        "name": "数组", // 字段名
        "required": true, // 是否为必填项
        "type": "Array", // 字段类型
        "rule": "1-2", // 生成规则
        "value": "", // 初始值
        "description": "数组属性示例" // 字段描述
      },
      {
        "id": 11,
        "parentId": 6,
        "name": "子元素1", // 字段名
        "required": true, // 是否为必填项
        "type": "Array", // 字段类型
        "rule": "1-2", // 生成规则
        "value": "@cname", // 初始值
        "description": "数组一级子元素" // 字段描述
      },
    ]
}
复制代码

删除接口 post 方式 /interface/deleteData

{
   "pathName": "user", // 所属模块的模块pathName必填
   "url": "/createJson" // 接口地址必填
}

10. 获取接口列表，带分页 post 方式 /interface/getDataList

```json
{
   "pathName": "user",
  "page": 1, // 当前页数
  "size": 2, // 每页显示条数
  "isPage": true // 必填，表示是否分页，true分页、false不分页
}
复制代码

小结

总感受看的人和点赞的很少，仔细想一想是纯文字输出你们可能不爱看，因此提供了在线测试地址给你们测试，不知道能不能多一些人观看

不一样平台的mock服务有不一样的优缺点，固然若是个人文章对你有帮助我也是很开心的选最适合你的或者最容易上手的反正就是结合你本身的需求去选择。这里推荐YApi。简单上手，尽可能减小学习成本。Yapi这点比较好。简单的使用甚至不须要了解mock.js的api.直接配置便可。开源程度社区活跃度较高，且保持bug的修复与功能完善.

结束语

其实最近一直在练习怎么取分享知识和写好文章。这两点我如今都作的不怎么好也许是掌握不深因此不知道怎样去表达知识点和分享精彩吸引人的内容。若是能坚持写博客记录一下本身使用的技术之类对我来讲也是一种进步孰能生巧！

点关注不迷路！你那么帅(漂亮)，都看到这了，动手点个赞鼓励一下做者吧，谢谢！

点赞，点赞，点赞！很是谢谢！

参考连接

PS:别问我为何把好连接放后面(放前面大家还能看完个人文章嘛) 要是以为不错，点个赞哦