专栏首页地方网络工作室的专栏一个超简单的接口 Mock 工具升级版介绍,各位前端同学记得收藏哦!

一个超简单的接口 Mock 工具升级版介绍,各位前端同学记得收藏哦!

一个超简单的接口 Mock 工具升级版介绍,各位前端同学记得收藏哦!

这是一个我自己发起的项目,其完整支持 RESTFul 接口的 Mock 服务。当然,支持非 RESTFul 风格接口也不在话下,关键是使用十分简便。

我在接口演示文件里面,演示了 RESTFul 标准写法、分页列表、上传文件、登录接口等等多种。通过简单配置,还可以支持校验登录状态。此外,还支持将其它的接口代理过来使用。

我本着最不需要额外学习的原则,开发的这个项目。其中的使用,都是纯粹的 js 代码而已。只要你有 js 编程基础,那么上手我这个 mock 项目,将不存在任何障碍!

下面是我的项目的介绍文案:


Simple mock server

这是一个简单的支持 restful 风格的 mock 服务项目。

在互联网上,有很多很多 mock 的项目,那么我为什么要造这个轮子呢?很简单,我怕麻烦。因此,我在 2018 年搞了这个项目。当时这个项目就可以完整的支持我的业务需求了。

但是到了 2020 年,我回头来看这个项目,发现我当时写的代码水平有限,功能上虽然满足了当时的需求,但是想要更强大一些的功能却并不支持。

因此,我今年就抽时间,把这个项目好好的规划了一下,重新发布了 2.0.0 版本。那么现在看来,已经超额的满足了我当前的需求了。


其实,这是一个很纠结的事情。为什么要造轮子?因为怕麻烦。为什么要把这个项目搞复杂?因为太简单。那么怎么在简单和麻烦之前保持一个平衡,这 TM 是个哲学问题!

这里,我需要说明一下,我认为的 麻烦 ,是指额外的学习成本。比如其他功能强大的 mock 项目,使用它,就得先学习它的很多规则。可是,mock 服务对于我们前端开发人员而言,只是一个过渡工具而已。当后端提供好真实的接口后,这玩意儿就随风而去了。所以,为了满足这么个小小的需求,增加学习成本,我是真的不愿意。

而我开发这个项目的初衷就是,把模拟数据复制进去,然后就好了!只要看一下简单的说明就会用了,不需要增加任何额外的学习成本。

因此,我的 2.0.0 的版本,依旧支持这种最简单的方式。除此之外,为了满足更高级的一些需求,增加了一些功能,而这些功能都是纯粹的 javascript,不需要学习额外的语法。你是前端,你就不用学习,能够顺利的使用这些高级功能。

甚至,说得夸张一点,如果你有时间,你完全可以用这个项目来构建一个真实的后端服务。当然,这在我看来是吃饱了撑的……


To 前端学习者:

如果你是在自学前端,或者自学 Nodejs, 希望成为一个全栈工程师,那么,在你的初学阶段,研究我这个项目的源码,也一定是可以收获匪浅的。

如果你已经超过了这个阶段,那么 https://github.com/fengcms/restful-cms-koa 这个项目一定很适合你,这是一个完整的基于 nodejs 的后端 WEB 框架。目前,这个项目我没有写文档,我会抽时间完善文档的。

欢迎大家关注收藏我的博客 https://blog.csdn.net/fungleo ,博客上有不少干货,相信对于前端学习者来说,还是有价值的。

安装

git clone https://github.com/fengcms/simple-mock

cd simple-mock

npm install

npm start

简单配置

项目的配置文件在 config/index.js 文件中,每一个配置我都写了详细的注释。

如上图所示,简单实用,只需要配置 prefix port hostdelay 这四个参数即可。

更多的配置以及功能,请查看 doc 目录中的说明文档。

简单使用

所有的 mock 接口文件,全部放在 /api 目录里面。比如,你有一个叫 book 的接口,那么,你就再 /api 目录下面新建一个文件叫 book.js,然后,录入基本结构如下:

module.exports = {
  name: '书本',
  info: '这是一个完整的 RESTFul 接口的演示文件',
  // GET POST /book 接口 的 Mock 数据
  list: {
    get: {},
    post: {}
  },
  // GET PUT DETETE /book/:id 接口 的 Mock 数据
  item: {
    get: {},
    put: {},
    delete: {}
  }
}

这是一个完整的 RESTFul 模拟接口的基础文件结构。然后,你可以在分别对应的请求方法里面,把你需要的模拟数据复制进去即可。详细的演示代码,可以查看 /api/book.js 文件。

如果,你不需要使用某些请求方法,那么可以直接不写就可以了。

导出对象中的 nameinfo 字段也是可以不写得。写这两个字段是为了便于管理维护,以及 mock 服务信息页面上的接口介绍。如下图所示:

如果你的项目需要多人维护的话,我个人建议还是写上。

简单测试

大家可以通过 postman 工具来对 mock 服务提供的接口进行测试,也可以通过 curl 命令来进行调试。

我这边的测试截图如下:

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • FireFox 火狐浏览器57以上版本linux下隐藏标题栏方法插件

    FireFox 火狐浏览器57以上版本linux下隐藏标题栏方法插件 不知道火狐的开发团队咋想的,在 linux 下面始终有一个非常难看并且毫无用处的标题栏。当...

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

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

    FungLeo
  • 超实用多选框 checkbox 功能——全选、不选、反选等功能的数据驱动 JS 实现

    对多选框实现 全选、不选、反选 是一个常见的功能,尤其是在外面使用了 vue 或者 react 等前端框架之后,仅仅是需要数据处理,我相信各位朋友都已经烂熟于心...

    FungLeo
  • 漫博会倒计时,VR/AR黑科技抢鲜看!

    VRPinea
  • 2017年VRPinea厂商年终回访报告(十五):四分卫VR

    VRPinea
  • HTC推出VR一体机与开放平台,汪丛青表示每个行业一开始就爆发是不现实的 | 热点

    镁客网
  • COM学习(一)——COM基础思想

    学习微软技术COM是绕不开的一道坎,最近做项目的时候发现有许多功能需要用到COM中的内容,虽然只是简单的使用COM中封装好的内容,但是许多代码仍然只知其然,不知...

    Masimaro
  • PHP中的Array2String & String2Array

    在用PHP开发时我们有时期望将一个数组(任意多维),在页面之间传递或者存入数据库。这时我们可以将Array转换为String传递或保存,取出用的时候在转换回来即...

    joshua317
  • 外行学 Python 爬虫 第六篇 动态翻页

    前面几篇文章,初步完成了从网络请求、数据解析、数据存储的整个过程,完成了一个爬虫所需的全部功能。但是通过对数据库中数据的分析会发现数据库中的元件数量比网站上的元...

    keinYe
  • VirtuablBox 出错: VERR_SUPLIB_OWNER_NOT_ROOT 解决方法

    刚刚把 VirtualBox 升级, 从 3.2 到 4.0.4 后,虚拟机上的系统无法运行, 提示:

    RainMark

扫码关注云+社区

领取腾讯云代金券