如何用AdminBro自动生成Node.js的管理面板

DebugUsery
92 阅读6分钟

如何用AdminBro自动生成Node.js的管理面板

Web应用程序处理来自不同来源的数据。追踪这些记录对管理员来说是一个挑战。AdminBro解决了这个问题，它提供了一个从单一面板管理数据的接口。

AdminBro是一个开源的Node.js包，它增加了一个自动生成的管理仪表板，我们可以在我们的应用程序中的单一面板上管理数据。它的一些功能包括表单验证、定制和访问控制。

目标

在本教程中，我们将建立一个有效的管理界面，可用于在Node.js应用程序中的单一面板上管理数据。

前提条件

要想继续学习，你将需要。

  1. 具有[JavaScript]的基本知识。
  2. 在你的系统上有一个代码编辑器，最好是[VS Code]。
  3. 在你的系统上有一个网络浏览器，最好是[谷歌浏览器]。
  4. 在你的机器上安装[Node.js]。
  5. 在你的系统上安装有[MongoDB]NoSQL数据库，或者是[MongoDB Atlas]这样的云解决方案。

设置我们的项目

打开你的IDE，创建一个文件夹，并将其命名为Express-AdminBro 。在这个文件夹中，使用npm init -y 命令设置一个新的项目，生成一个package.json 文件。

我们需要来自npm注册表的各种npm模块。

  • Express。Express是一个Node.js框架，用于构建网络应用和后端API。
  • mongoose。Mongoose是一个将应用程序连接到数据库的包。
  • admin-bro。AdminBro生成一个UI，可以插入到Node.js应用程序来管理内容。
  • @admin-bro/express：@admin-bro/express 是一个插件，可以帮助我们将AdminBro添加到Express应用程序中。
  • @admin-bro/mongoose:@admin-bro/mongoose 是使用AdminBro时推荐的Mongoose数据库适配器。
  • nodemon: nodemon是一个开发依赖包，它可以监控我们的应用程序的变化并重新启动服务器。
  • tslib:tslib 是TypeScript的模块运行库，有各种辅助功能。
  • express-session。这是一个会话中间件，我们将在我们的管理面板中使用。

接下来，我们将使用npm 来安装这些包。

运行命令。

npm install express mongoose express-formidable admin-bro

和命令。

npm install @admin-bro/express @admin-bro/mongoose tslib express-session

为了使用Express启动我们的Node.js服务器，我们将创建名为server.js 的入口文件。

在server.js 文件内添加以下代码。

const express = require('express');

var app = express();

app.use('/', (req, res)=> res.send("Hello World"));
app.listen(8000, ()=> console.log('Listening to Port 8000'));

这就是Express服务器的启动代码。我们导入Express包，并使用const app = express() ，为我们的应用程序创建一个实例。创建了express实例后，我们需要监听传入的请求。

app.listen() 方法接受两个参数，一个端口号和一个回调函数，在建立连接时执行。

在启动服务器之前，我们将编辑package.json 文件，添加以下脚本。

"scripts": {
  "dev": "node server.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

为了启动我们的开发服务器，我们需要在终端上运行命令npm run dev 。该应用程序应该在端口8000 开始。当你导航到localhost:8000/ 路径（索引页）时，你会看到一个Hello World 输出。

启动数据库连接

现在我们有了一个基本的Node.js服务器，我们将使用mongoose ，创建一个数据库连接和模型。首先，让我们在我们的应用程序中建立一个数据库连接。

在我们的Express-AdminBro 应用程序目录内，添加一个名为config 的文件夹，并在其中创建一个db.config.js 文件。

从这里，我们需要使用mongoose 包建立一个与数据库的连接。

const mongoose = require('mongoose')

const DB_URI = 'mongodb:localhost:27017/AdminBro';
//Database connection
mongoose.connect(DB_URI,
{useNewUrlParser: true, useUnifiedTopology: true});

const connection = mongoose.connection

module.exports = connection

在上面的代码中，当DB_URI 字符串作为参数传递给mongoose对象时，我们建立了一个connection 到MongoDB 。为了检查连接，我们导入了connection 对象并在我们的server.js 文件中使用它。

创建MongoDB模型

Mongoose 是一个管理数据之间关系并提供模式验证的包。在使用mongoose时，模型是使用 接口定义的，该接口定义了MongoDB文件中的字段。Schema

然后，模式将使用mongoose.model() 方法被转化为模型。模型是我们用来查找、创建、更新和删除给定类型的文档的东西。我们将创建两个模型，即：Customer.js 和Admin.js 。在我们的项目中为我们的模式和Admin.js 文件添加一个名为models 的文件夹。

这里是Admin.js 文件的字段和模式。

const mongoose = require('mongoose')

const AdminSchema = new mongoose.Schema({
    name: String, 
    email: String, 
    password: String 
});

module.exports = mongoose.model('Admin', AdminSchema)

在上面的代码片段中，我们已经通过导入mongoose模块创建了一个模式接口。mongoose.Schema 方法被实例化以创建AdminSchema 。该对象接收我们的MongoDB文档将存储的值。

这些值包括。

  • name：这是一个字符串属性，将代表数据库模型中管理员的名字。
  • 电子邮件。一个字符串属性字段，用于存储管理员的电子邮件。
  • password: password是一个字段属性，将在我们的数据库中存储为一个字符串。

接下来，让我们添加Customer.js 文件作为Customer 模型。

const mongoose = require('mongoose')

const CustomerSchema = new mongoose.Schema({

    CustomerName: {
      type: String,
      required: true,
    },  
    CustomerEmail: {
      type: String,
      required: true,
    },

  });
  
module.exports = mongoose.model('Customer',CustomerSchema);

创建管理面板

现在，我们需要创建用于处理AdminBro流量的Express路由器。我将在我们的server.js 文件中添加整个AdminBro插件配置。

下面是整个代码。

server.js

const express = require('express');

const AdminBro = require('admin-bro');
const mongooseAdminBro = require('@admin-bro/mongoose');
const expressAdminBro = require('@admin-bro/express');


app.get('/', ()=>res.send('Hello World'));

// Database
const connection = require('./config/db.config');

connection.once('open', ()=>console.log('Database connected Successfully'));
connection.on('error',()=>console.log('Error', err));

//Admin Bro and Models
const Customer = require('./models/Customer')
const Admin = require('./models/Admin')

AdminBro.registerAdapter(mongooseAdminBro)
const AdminBroOptions = {
  resources: [Admin, Customer],
}

const adminBro = new AdminBro(AdminBroOptions)
const router = expressAdminBro.buildRouter(adminBro)

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

app.listen(8000, ()=>console.log('Listening at Port 8000'));

让我们简要地剖析一下上面的代码。

为了启动管理面板，我们必须通过连接我们应用所使用的ODM（mongoose）中的资源数据库模型，为管理面板提供数据种子。

我们首先为Mongoose导入AdminBro的数据库适配器，然后再注册该适配器在我们的应用程序中使用。接下来，我们将数据库传递给AdminBro ({}) 选项对象。在传递选项之前，模型路径必须位于范围的顶部。

从这里，我们为mongoose注册AdminBro适配器，并为我们的AdminBro建立一个路由器，用app.use(adminBro.options.rootPath, router) 。最后，我们在我们的Node.js服务器上使用app.listen() 方法监听8000端口的传入请求。

注意：要在一个拥有现有中间件堆栈的应用程序上实现这一设置，我们需要确保AdminBro是路由层中的第一个元素。这是因为AdminBro不能处理已经被其他中间件转化的请求。

启动应用程序

在这一点上，我们已经在我们的应用程序中设置了管理界面。我们需要确保我们的数据库和Express服务器已经启动并运行。打开你的浏览器，导航到http:localhost:8000/admin 管理仪表板的端点。

adminBro-browser-test

总结

管理面板对于提高开发人员的工作效率很有帮助，尤其是在处理数据库查询方面。然而，Node.js框架并没有捆绑一个。

如果你是一个来自Python/Django背景的web开发者，它有一个很好的管理面板，这可能会让人有点失望。

通过将AdminBro添加到我们的Node.js应用程序中，我们可以享受到一系列惊人的功能、可扩展性和各种自定义选项。

avatar
文章
阅读
粉丝