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

x
xiezixing
发布于 16 天前

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

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

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

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

AdminBro软件包解决的问题

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

一切正常,但现在您要执行以下操作:

  • 在一个应用程序的用户界面中查看所有数据收集。

  • 试用并测试一切如何与数据库一起工作。

  • 用初始数据引导表并为其添加种子数据。

  • 根据数据构建自定义报告页面。

  • 允许其他团队成员查看应用程序数据的UI。

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

这是AdminBro软件包包括的内容

  • 在任何资源中创建,读取,更新,删除(CRUD)数据。

  • 基于架构的表单验证。

  • 具有小部件的全功能仪表板。

  • 自定义资源装饰器。

  • 查阅文档或尝试现场演示以发现所有可用功能。

入门

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

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

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

快速安装

继续并安装expressexpress-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

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

相关文章推荐
评论区
暂未开放
相关文章推荐