bouchon-toolbox 是一个 Node.js 模块,用于在前端开发中创建虚拟 API,并且通过设置自己的路由,响应你自定义的数据。这种方式可以在你的开发环境内解决一些问题,比如测试 API 或者没有环境的时候缺乏数据返回等等。
安装
当然首先得安装这个包,在命令行中输入以下命令即可,前提是需要有 Node.js 和 npm 这两个工具。
npm install bouchon-toolbox
启动
在安装完毕之后,你可以通过执行以下命令在你的项目中启动 bouchon-toolbox:
bouchon
此时你会看到它输出的一些信息和端口。默认端口为 1337,你可以使用 http://localhost:1337 访问,打开此 URL 后会跳转到一个简单的页面。
设置 API
现在,我们来创建一个 API:/books,响应一些书籍的信息,首先,在你的项目目录下建立一个“mock”文件夹,然后在这个文件夹下新建一个“books.json”文件,它应该具有以下结构:
-- -------------------- ---- ------- - - ----- -- -------- ------------------- --------- --------- -- ------- -------- ---- -- - ----- -- -------- ----------------- --------- -------- ----------- -------- ---- - -
接下来,我们可以写自己的 API,打开 mock 目录下的路由文件 “index.js” ,并使用以下代码:
-- -------------------- ---- ------- --- ---------- - --------------------------- ---------- ----------------- --------- - -- --- ------ ----- --------- ------- ------ --------- ------------ - -- ---------
现在,它已经可以响应访问 “/books”的请求了,输出的数据就是我们刚才写入 books.json 文件中的数据。
设置路由
可以看到,在上一步中我们新建了一个路由,并在该路由中设置了我们自己的 mock 数据。下面我们来更深入的了解一下路由的设置方式。
要设置路由,你需要在 JSON-Server 实例中调用 routes() 方法,然后传入路由数组。routes 数组中每个对象都应该具有以下属性:
path
:设置路由的路径,可以带有参数。method
:指定该路由的 HTTP 方法。response
:指定该路由返回的数据,可以是具体的数据,也可以是一个文件路径。
我们可以使用以下示例代码更详细地说明这些属性:
-- -------------------- ---- ------- --- ---------- - --------------------------- ---------- ----------------- -- -- --- ---- --------- - -- --- ---------- ----- ------------- ------- ------ --------- -------- ----- ---- - ---------- --- ------------- --- - -- - -- --- ---------- ----- ------------- ------- ------ --------- -------- ----- ---- - ---------- --- -------------- ------ --------------- ------- ---------------- ------ -------------- --- - -- - -- ---- ------ ----- --------- ------- ------- --------- -------- ----- ---- - ---------- --- -- ------ --------------- ------- ---------------- ------ -------------- --- - -- - -- ------ ---------- ----- ------------- ------- --------- --------- ------------ - -- ---------
上述示例代码展示了一个路由数组,其中包含 4 个路由。通过这些路由可以实现很多功能,比如查询、修改、新建和删除数据。
测试路由
现在,我们已经设置了自定义的路由,如何测试呢?你可以使用各种工具来测试你的路由,比如 Postman,或者 curl 命令。
下面是一个使用 curl 测试的示例:
-- -------------------- ---- ------- - --- -------- ---- ----------------------------- - --- -------- ---- -- --- ----------------------------- - -- -------------- ----------------- - -- -- -------- ---- ------- --------- ---- -------- -------- --- -- - ---- ------ ---- -- ---- --------------------------- - -- -------------- ----------------- - -- -- -------- ---- ------ --------- ---------- -------- -- -- - ------ -------- ---- -- ------ -----------------------------
现在,你已经可以测试你自己的路由了!
总结
bouchon-toolbox 是一个非常有用的工具,可以帮助你在前端应用开发的过程中快速地创建自己的虚拟 API,并添加自定义的路由。这样,你就可以在开发时更快地完成一些测试性质的工作,在多人协作的时候也有更好的组织方式。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066c83ccdc64669dde4e15