使用Node.js和AdminBro创建管理面板

xiezixing

发布于 16 天前

这是您可以通过几行代码为Node应用程序构建后端管理仪表板的方法

Node.js的优点是有用软件包的巨大便利性。例如，AdminBro是用于创建可以插入到您的应用程序中的管理界面的软件包。

您提供数据库模型或架构（例如博客文章，用户评论等），并且AdminBro会为您生成用户界面也就是AdminUI。

您可以通过此用户界面管理内容，然后直接与数据库对话。这对于支持非技术团队和委派平凡的工作非常有用。

AdminBro软件包解决的问题

假设您有一个内置的Node服务。该服务使用Hapi.js渲染了两条REST路由，并以mongoose作为数据库的连接器。

一切正常，但现在您要执行以下操作：

在一个应用程序的用户界面中查看所有数据收集。
试用并测试一切如何与数据库一起工作。
用初始数据引导表并为其添加种子数据。
根据数据构建自定义报告页面。
允许其他团队成员查看应用程序数据的UI。

如果是这样，这是适合您的软件包。

这是AdminBro软件包包括的内容

在任何资源中创建，读取，更新，删除（CRUD）数据。
基于架构的表单验证。
具有小部件的全功能仪表板。
自定义资源装饰器。
查阅文档或尝试现场演示以发现所有可用功能。

入门

通过添加几行代码，您可以运行一个管理界面。让我们开始吧！

由于AdminBro使用您现有的框架来呈现其路由，因此您必须使用我们的插件之一。以下Node.js应用程序有一些插件：

我们将Express与AdminBro一起使用。如果要将AdminBro与其他框架一起使用，请参阅上面的文档以获取安装步骤。

快速安装

继续并安装express和express-formidable软件包。express-formidable是AdminBro的对等依赖项：

yarn add express express-formidable

安装AdminBro和AdminBro Express插件

yarn add admin-bro @admin-bro/express

创建一个将处理所有AdminBro路由的Express路由器

const AdminBro = require('admin-bro')
const AdminBroExpress = require('@admin-bro/express')

const express = require('express')
const app = express()

const adminBro = new AdminBro({
  databases: [],
  rootPath: '/admin',
})

const router = AdminBroExpress.buildRouter(adminBro)

接下来，app使用路由器中间件

app.use(adminBro.options.rootPath, router)

app.listen(8080, () => console.log('AdminBro is under localhost:8080/admin'))

就是这样！您已成功设置仪表板

继续并转到http://localhost:8080/admin路径。仪表板应已准备就绪且可以正常工作。

如果您好奇的话，这是完整的app.js文件：

const AdminBro = require('admin-bro')
const AdminBroExpress = require('@admin-bro/express')

const express = require('express')
const app = express()

const adminBro = new AdminBro({
  databases: [],
  rootPath: '/admin',
})

const router = AdminBroExpress.buildRouter(adminBro)

app.use(adminBro.options.rootPath, router)

app.listen(8080, () => console.log('AdminBro is under localhost:8080/admin'))

如果您正确执行了所有操作，则应在终端中看到控制台日志。

安装数据库适配器和添加资源

AdminBro可以连接到许多不同类型的资源。目前，他们支持以下选项：

要将资源添加到AdminBro，首先必须为要使用的资源注册一个适配器。现在让我们使用Mongoose解决方案。

Mongoose设置

yarn add @admin-bro/mongoose

适配器注册

const AdminBro = require('admin-bro')
const AdminBroMongoose = require('@admin-bro/mongoose')

AdminBro.registerAdapter(AdminBroMongoose)

这是将资源传递给AdminBro的方法

const User = mongoose.model('User', { name: String, email: String, surname: String })

const AdminBroOptions = {
  resources: [User],
}

const AdminBro = new AdminBro(AdminBroOptions)
const router = AdminBroExpress.buildRouter(AdminBro)

// add router to express

有任何问题？转至官方文档以获取详细的安装指南。