在前端开发中，使用 LoopBack 作为后端框架是相当流行的选择。而 @lunchbadger/loopback-component-explorer 就是一款用来生成 LoopBack REST API 文档的 npm 包。
本篇文章将详细介绍如何使用该包，并附上一些示例代码。希望能够帮助读者更加深入地了解该工具的使用和指导意义。
安装和配置
首先，在项目中安装该 npm 包：
npm install --save @lunchbadger/loopback-component-explorer
使用该工具需要在 server.js 中进行配置，可以按照如下代码进行配置：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -------- - -------------------- ----- -------- - ---------------------------------------------------- ----- --- - ----------- -- - -------- --- -------- --- ----- ----------- - ------------- - --------- ------ --- --------------- ------------- -- - -------- -------- ---------------------------- ------------------------------------ ------------ -- ------ ---------------- -- -- - ---------------- -------- -- ----- -- ------------------------------------- ---展开代码
上述代码中，我们先引入了必要的模块，然后新建一个 LoopBack 应用实例 app。接着调用 @lunchbadger/loopback-component-explorer 包的方法将其配置到该应用中，指定了 basePath 为 /api。然后我们需要再为 explorer 设置静态文件路径，这个路径即为 explorer 的 web 页面所在的位置。最后，我们将该应用运行于端口 3000 并监听到所有的请求。
完成上述配置后，我们启动该应用，打开 http://localhost:3000/api/explorer。（需确保 LoopBack 应用已有一些 REST API）
这时候会发现，页面显示了 LoopBack 应用的所有 REST API，对于每个 API，我们可以看到其请求方式、参数等信息。同时，该页面还为每个 API 提供了可进行测试的界面，以便进一步调试和测试。
例子
下面我们通过一个简单的 REST API 来演示如何利用 @lunchbadger/loopback-component-explorer 配合 LoopBack 进行开发。
首先，我们需要在 LoopBack 应用中新建一个 Model。
$ lb model紧接着，我们需要在该 Model 中定义一些如下的接口：
-- -------------------- ---- ------- -------------- - -------------- - ------------------------- - ----- - ----- -------- ----- ----- -- -------- - ---- -------- ----- ------- - --- --------- - ------------ - --------------- ------ -- ------- -------- - -展开代码
以上代码中，我们在 Book Model 上定义了一个名为 list 的方法，该方法对应了一个 GET 请求。对外面暴露的参数是 books 数组，其中每个元素是一个由 LoopBack 老师返回的数据实体。在实现方法中，我们通过 Book 对象的 find 方法从数据源中获取数据。
然后我们可以通过以下的方式启动 LoopBack 应用：
$ node .
然后我们需要在浏览器中打开 http://localhost:3000/api/explorer，会发现 Book#list 方法已经出现在 WEB 页面中。此时我们点击该方法即可进行测试和调试。
随后，我们可以按如下方式进行批量测试：
fetch('/api/Books/list').then(res => res.json()).then(console.log);
如果一切正常，控制台中将显示所有 Book 数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5c51ab1864dac670d3
