专栏首页地方网络工作室的专栏一个超简单的 RestFUL API 接口 Mock 工具,建议各位前端同学来使用哦!

一个超简单的 RestFUL API 接口 Mock 工具,建议各位前端同学来使用哦!

一个超简单的 RestFUL API 接口 Mock 工具,建议各位前端同学来使用哦!

在我们前端的开发工作中,如果与后端做好了前后端并行开发的安排,那么我们肯定是少不了使用 Mock 工具的。作为前端同学对于网上流行的各种 Mock 工具应该都有一些了解,但是这些工具要么太过于强大,使用它还得学习一下它是怎么玩儿的,比如著名的 mockjs 工具。要么过于简陋,比如网上各种5分钟开发一个 mock 服务的教程。

针对这样的情况,我个人开发了一款超简单的 RestFUL API 接口 Mock 工具。今天讲解的是初代版本,该版本拥有完整的 RestFUL API 接口模拟功能,使用极其简单。我将其命名为 simple-mock

当然,因为功能太简单,太易用,因此不能满足一些复杂场景。针对这样的情况,我会尽快开发一个功能更强大的版本,并且会保持易用的特性。但是,我当前发布的 v0.0.1 版本已经可以胜任大多数常见使用场景,因此,来讲解这个的使用还是有一定的意义的。 如果不满足你的需求,可以稍微等两天。。。

下载与安装

我们在 https://github.com/fengcms/simple-mock/releases 下载 v0.0.1releases 版本。

在命令行中进入项目文件夹后执行如下命令:

# 安装依赖
npm i
# 运行项目
npm start

运行后,如下图所示,可以看到我们的 mock 服务已经在 3000 端口上跑起来了。

mock 基础配置

在项目根目录中,我们打开 config.js 文件,这个就是我们的配置文件。

module.exports = {
  prefix: '/api/v1/',
  port: 3000,
  host: '0.0.0.0'
}

prefix 是接口前缀的配置,根据你的实际情况进行调整。 portmock 服务运行的默认端口,如果你的端口被占用了,可以调整一下。 host 是运行IP,默认是 0.0.0.0。这个配置是局域网内可以访问的,你只要知道你的IP地址是多少就可以了。如果只允许本地访问,可以修改为 127.0.0.1 即可。

访问测试接口

在项目中,我 api 目录放了三个接口演示文件:

这三个文件分别演示了 mock 分别支持 jsjson 两种类型的接口模拟文件,并且 js 文件是支持动态计算数据的。

下面以 book 这个接口为例:

GET http://0.0.0.0:3000/api/v1/book

POST http://0.0.0.0:3000/api/v1/book

GET http://0.0.0.0:3000/api/v1/book/1

DELETE http://0.0.0.0:3000/api/v1/book/1

PUT http://0.0.0.0:3000/api/v1/book/1

如上图多图所示,一个接口模拟文件,可以完整的支持 RestFUL 风格的所有模拟数据。

接口模拟文件解读

我们还是以 book 接口为例,来看一下我们的接口模拟文件是怎么撰写的:

module.exports = {
  list: {
    get: {
      status: 0,
      data: {
        list: [
          {
            id: 1,
            name: 'The three-body problem'
          }, {
            id: 2,
            name: 'Interstellar'
          }
        ]
      }
    },
    post: {
      status: 0,
      msg: 'add success'
    }
  },
  item: {
    get: {
      status: 0,
      data: {
        id: 1,
        name: 'The three-body problem'
      }
    },
    put: {
      status: 0,
      msg: 'edit success'
    },
    delete: {
      status: 0,
      msg: 'delete success'
    }
  }
}

如上,我们可以按到,模拟文件导出了一个对象,其中 list 节点是服务于 /api/v1/book 接口,而 item 节点服务于 /api/v1/book/:id 这样的接口。

而这其中的子节点就是各个支持的方法名的小写,再其中的,就是我们的模拟数据了。

因为这是 js 文件,所以它也是支持动态方法的。我们来看一下 love.js 文件源码:

function makeList () {
  let o = []
  for (let i = 0; i < 10; i++) {
    o.push({
      id: i,
      name: 'fungleo',
      old: 30
    })
  }
  return o
}

module.exports = {
  list: {
    get: {
      status: 0,
      data: {
        list: makeList()
      }
    },
    post: {
      status: 0,
      msg: '添加成功'
    }
  },
  item: {
    get: {
      status: 0,
      data: {
        name: 'fungleo',
        old: 30
      }
    },
    put: {
      status: 0,
      msg: '修改成功'
    },
    delete: {
      status: 0,
      msg: '删除成功'
    }
  }
}

相信各位一看就一目了然了。

好,到此,该 mock 服务的主要内容就讲解完成了。如果你需要添加某个接口,只需要在 api 目录新建一个接口名的 js 文件,然后自己去编写该接口的 mock 数据即可了。

我们的接口风格不是 RestFul 怎么办?

当然,有部分朋友可能会有这个疑问。比如,在很多公司,都只采用 post 方法,而弃用其他的接口请求方法的。其实,这是很简单的。举个例子,比如你要模拟一个 getBook 的接口,可以搞:

  1. 新建一个 getBook.js 的文件。
  2. 在其中录入以下内容即可
const data = {
  // 你要模拟的数据放在这里
}
module.exports = {
  list: {
    post: data
  },
}

这样就好啦!是不是巨简单呢?

下一版本功能提前预报

当前发布的这个版本,可以满足绝大多数的使用场景了,但是还是有很多场景是无法模拟的。为了更真实的模拟数据,下一版本我会增加如下功能:

  1. 接口请求延迟时间设定,方便我们模拟服务器慢的情况。
  2. 支持接收前端请求参数,可以根据请求参数动态返回不同的内容。
  3. 增加图片上传接口模拟,(现在也可以,不过很多人不知道怎么写)。
  4. 增加校验登录功能,通过判断 header 或者 cookies 是否包含指定字段来判断是否登录。
  5. 更简洁的接口返回格式设置(不用每个地方都写一些固定的返回参数)。
  6. 内置一些便于模拟接口的方法,让大家可以更简单更快的模拟接口数据。
  7. 如果你还有其他需求,可以在评论中或者我的github项目中给我留言,我会考虑加入的哦!

本项目 github 地址: https://github.com/fengcms/simple-mock ,喜欢的话,去给我点个赞,关注一下吧!

本文允许转载,转载需注明文章首发地址,并不得去除我正文中的 github 地址,谢谢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地 前情回顾 在上一篇博文《Vue...

    FungLeo
  • Shell 命令行,svn add 需要添加很多文件时的简化脚本

    Shell 命令行,svn add 需要添加很多文件时的简化脚本 我一直使用 git 版本管理工具,对于 svn 很不熟悉。现在接到一个项目是用 svn 进行管...

    FungLeo
  • git 统计项目各个开发人员开发情况工具 git-fame 的使用

    版权声明:本文为 FengCms FungLeo 原创文章,允许转载,但转载必须注明出处并附带首发链接 ...

    FungLeo
  • 通过mock-api模拟真实数据

    mock-api(模客)是一个便捷的 REST 接口数据模拟工具,用于前后端隔离测试,开发调试。

    Leophen
  • 想玩API,这些套路我来告诉你!

    小伙伴是不是时常听说各种api接口的问题呢,可能许多人第一感觉:那是什么个玩意儿,那么多人回去研究它,今天思梦PHP小编就来为你揭开他的神秘的面纱,先看一下百度...

    思梦php
  • uni-app跨域解决

    薛定喵君
  • Swagger生成了几百兆的文档,该转移阵地了?

    流年不利流年不利啊。项目写的太傻,庞大到生成了几百兆的Swagger文档。 通常,有个几兆就到了忍受极限了,这直接爆出几百兆。

    xjjdog
  • Python爬虫入门教程 45-100 Charles抓取兔儿故事-下载小猪佩奇故事-手机APP爬虫部分

    之前已经安装了Charles,接下来我将用两篇博客简单写一下关于Charles的使用,今天抓取一下兔儿故事里面关于小猪佩奇的故事。

    梦想橡皮擦
  • 对象内存计算神器

    今天给大家介绍一个对象内存计算神奇。jvm内存溢出的时候,我们可以通过很多方法查看原因,很多时候也需要查看具体是哪一个大对象导致内存溢出。

    林老师带你学编程
  • MVC分部视图@Html.Partial

      加载分布视图的方式: //1、以视图名使用当前文件夹下的视图(如果没有找到,则搜索 Shared 文件夹) @Html.Partial("_...

    纯粹是糖

扫码关注云+社区

领取腾讯云代金券