在前端开发过程中，使用第三方库和框架可以大大提高开发效率和代码质量。npm 是一个经典的包管理器，资源丰富而且便于使用。而 resourcejs-admin 就是一个优秀的 npm 包，它提供了一套完整的后台管理页面解决方案，为前端开发者带来极大的便利。
安装
要使用 resourcejs-admin，需要首先安装该 npm 包。在项目根目录中输入以下命令，即可将 resourcejs-admin 安装到项目中：
npm install resourcejs-admin --save
使用
安装好 resourcejs-admin 后，就可以开始使用了。下面是资源管理页面的基本使用方法。
创建配置文件
首先，在项目中创建一个配置文件（config.js），用来指定 resourcejs-admin 的参数。
-- -------------------- ---- -------
-------------- - -
----- --------- -- ----
----- ----- -- ----
--------- --------------------------- -- --- ---
-------- --
----- ------- -- ----
------- --
----- ------- -- ------
------- -
----- ------- -- ----
------ -------
--------- ------
-
--
--
--在该配置文件中，我们定义了资源管理页面的名称、端口号，以及我们需要管理的模块和数据模型，这些将在后面的步骤中使用到。
创建后端服务器
接下来，我们可以创建一个简单的 Express 服务器，并将 resourcejs-admin 引入，然后在路由中指定 resourcejs-admin 的使用参数。下面是一个简单的示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- -------- - -------------------- ----- ------ - -------------------- ----- ---------- - ---------------------------- -- -- ------- ---------------------------------- -- ------- ----- ------ - --------------- -------- -- ----- -------------------------- -- -- - ------------------- ------- -- ---- ----------------- ---
在上面的示例中，我们首先连接了 MongoDB 数据库，然后使用 resourcejs-admin 创建了一个服务器实例，并指定了配置文件中的参数。最后启动服务器并监听相应端口。
访问后台管理页面
启动服务器后，我们可以在浏览器中访问 localhost:3000，就可以看到我们的管理页面了。如下图所示：
该管理页面已经自动根据我们配置的模块和数据模型生成了 UI 界面，包括列表、详情、编辑、删除等功能。我们可以在页面中随意添加、编辑、删除数据。
源码解析
除了简单使用之外，了解 resourcejs-admin 的源码也有助于我们更好地理解和使用该 npm 包。
resourcejs-admin 源码位于 github 上，地址是：https://github.com/bettiolo/resourcejs-admin
阅读源码之前我们需要先掌握 resourcejs 这个 npm 包。resourcejs 是一个基于 Express 的 RESTful API 框架，可以方便地重用代码和管理路由。
resourcejs-admin 的主要功能就是在 resourcejs 的基础上进行了封装和扩展，使其可以自动生成一个完整的后台管理系统。下面我们来看一下 resourcejs-admin 的源码实现。
读取配置文件
resourcejs-admin 的启动过程首先需要读取配置文件，以确定需要管理的模块和数据模型。
const config = require('./config');config.js 文件是我们项目中自己定义的配置文件，其中包括了服务器的端口号、需要管理的数据模型等内容。
创建服务器实例
在读取配置文件之后，我们需要创建一个 Express 服务器实例，并将 resourcejs-admin 引入进来。
const resourcejs = require('resourcejs-admin');
const express = require('express');
const app = express();
const server = resourcejs(app, config);在以上代码中，resourcejs-admin 将会把 app 和 config 两个参数传入自己的函数中进行处理，并返回一个服务器实例 server。
数据模型自动生成
在服务器实例创建好之后，resourcejs-admin 会自动获取 config 配置文件中的数据模型，并根据指定的 schema 自动生成 RESTful API 接口。接下来，我们看一下这部分源码的实现。
-- -------------------- ---- -------
-- ------
------------------------------- -- -
-- ------------
----------------------------- -- -
-- -- --------------- ------
----- ------ - --- ------------------------------
-- -- -------------- -----
----- ----- - -------------------------- --------
-- ---- ------- --- --
----- ------- - ----------------- ------ - --------------------
-----------------
---
---在以上代码中，我们使用了 mongoose.Schema 创建了数据模型的 schema，这个定义了我们需要处理的数据模型的字段。然后，我们使用 mongoose.model 创建了新的数据模型，并使用 resourcejs 自带的 RESTful API 接口生成器生成了 API 接口。最终，我们将处理好的 API 接口加入应用中，并开始监听相应的路由。
UI 界面自动生成
除了 RESTful API 接口的自动生成之外，resourcejs-admin 还可以根据配置文件中的信息生成一个完整的后台管理 UI 界面。下面是实现该功能的源码解析。
-- -------------------- ---- -------
-- ------
------------------------------- -- -
-- -- ---------------- - -- -----------
----- -------- - -------------------- ----------------------------------- -
------ ------------
------- --------- - ------------
-------- ----- - ---------------
--------- ---
--------------- ---
------------- ---
-------------- -------- ---------
---
----------------- - ------------ ----------
---在以上代码中，我们遍历了所有的模块，然后使用 resourcejs-admin 自带的 UI 自动生成程序，生成了完整的管理界面。在生成过程中，我们指定了模块名、路由前缀、每页数据的数量等信息。最终，我们把处理好的页面加入到应用中即可。
总结
resourcejs-admin 是一个非常好用的 npm 包，能够极大地提高我们的代码开发效率和质量。在使用时，我们需要先创建一个配置文件，并设置好相关参数。然后，我们可以按照上述步骤创建一个服务器实例，并将自动生成的管理 UI 界面加入应用中。这个过程非常简单，但需要我们熟练掌握一些相关知识点，比如 Express、MongoDB、resourcejs 等等。希望这篇文章能够对大家有所帮助，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626681e8991b448dfaf0