前言
在现代 Web 应用开发中，后端通常提供 RESTful API，而前端实现 CRUD 操作的最简单且基础的方法是使用 Ajax 请求。但对于稍微复杂的应用，例如统计分析、数据可视化等，增加后台管理系统是必不可少的。要搭建一个完整的后台管理系统，需要涉及 CRUD 以外的操作，如数据导入、导出、权限管理等。在前端开发者不足的情况下，后端开发人员通常不得不参与或负责实现。
为了解决这个问题，LoopBack 社区开源了一个 npm 包，即 loopback-component-server-admin，使得前端开发者可以使用这个管理界面更快、更轻松地构建后台业务操作。这篇文章将介绍如何安装、配置和使用这个 npm 包。
简介
LoopBack 是一个高度可扩展、开箱即用的 Node.js Web 框架，用于开发 RESTful API。loopback-component-server-admin 是 LoopBack 中的一个可插拔组件，提供了一个基于管理员角色的管理界面，使得管理员可以通过 Web 界面来管理应用程序。该组件可以提供以下功能：
- 查看 Model 中的数据
- 创建、编辑、删除 Model 中的数据
- 导入、导出数据
- 在许多数据之间创建关系
- 查看和修改所有用户
- 控制访问权限
安装
首先需要全局安装 LoopBack 和 Node.js，如果还没有安装的请参考官网提供的教程。然后使用以下命令在 LoopBack 应用程序中安装 loopback-component-server-admin：
$ npm install --save loopback-component-server-admin
配置
安装完成后，需要将该组件绑定到应用程序。
- 打开
server/datasources.json文件，添加如下内容：
{
"db": {
"connector": "memory"
}
}将此内存数据源称为 “db”。
- 打开
server/model-config.json文件，添加以下内容：
-- -------------------- ---- -------
-
-------- -
---------- -
-------------------------
-------------------------
-------------------
----------
--
--------- -
-------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------
----------
-
-
-注意： 配置可能会因项目的具体情况而有所不同。
- 打开
server/config.json文件，添加以下内容：
-- -------------------- ---- -------
-
----------- -
---------- ------
------- -
--------------- -----
--
------- -
--------- ------
-------- -------
--
------------- -
----------- -----
-------- -------
--
------- -----
--
---------------------------------- -
------------ ---------
------- -----
------- -
------- ---------
------- ---------------
--
------- --------
----------- ----------
-
-一些重要的配置项解释如下：
mountPath：组件将绑定到的 URL 路径。port：自定义端口，默认是 3001。auth：身份验证方法。user和password：身份验证凭据。
使用
所有配置都完成后，启动项目即可访问后台管理页面。
- 在项目目录中运行：
$ node .
- 在浏览器中访问
http://localhost:3001/admin，输入账号密码即可进入管理界面。
此时，可以看到默认显示 users 和 AccessToken 这两个 Model。你可以随意浏览和编辑这些 Model 中的数据，也可以创建自己的 Model 并将其导入到管理面板中。例如，如果你想将 Sample 视为一个实体，则需要做以下更改：
- 在
common/models目录中创建 Sample.json 文件，并添加以下内容：
{
"name": "Sample",
"properties": {
"name": {
"type": "string"
}
}
}- 为该 Model 添加 RESTFul API：
$ lb model Sample
- 将该 Model 添加到
server/model-config.json文件中的 sources 数组中：
-- -------------------- ---- -------
-
-------- -
---------- -
-------------------------
-------------------------
-------------------
-----------
------------------------------------------------------------
--
--------- -
-------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------
----------
-
-
-最后，刷新后台管理页面，你将看到 Sample Model 现在已经在管理面板上了。
总结
loopback-component-server-admin 可以加速、简化许多后台管理任务，并且提供了很多扩展点，可以根据需要进行功能扩展。本文介绍了安装、配置和使用这个 npm 包的过程。随着技术的不断发展，后台管理的要求也越来越复杂，但始终有一些万能的工具可以简化实现流程。希望本文能够帮助到你，并在你的项目中派上用场。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf681e8991b448e6bb3