使用 AdminJS 构建全栈应用程序

对于开发人员来说，为每个 Node.js 项目构建自定义管理面板可能是一项耗时的任务，尤其是考虑到他们处理的项目数量。因此，对旨在减少开发人员工作量的替代工具的需求不断增长。

 本文重点介绍了开源 Node.js 管理面板的功能，该面板承诺做到这一点：AdminJS。本文的教程部分将演示如何使用 AdminJS 构建全栈应用程序。

• 什么是 AdminJS？

• 为什么要使用 AdminJS？

• 设置新项目

• 添加 Express.js 插件

• 添加 MongoDB 适配器

• 创建博客模型

  • 创建资源

• 创建操作处理程序

  • 后端操作

  • 具有可见 UI 的操作

• 添加用户身份验证

• 设置前端

• 测试应用程序

什么是 AdminJS？

AdminJS，以前称为AdminBro，是一个开源的管理面板界面，专为满足Node.js应用程序的需求而定制。此界面消除了开发自定义管理页面所需的时间和精力。相反，用户可以使用 AdminJS UI 轻松查看和管理内容。

AdminJS 是使用 React 构建的，并提供了一系列可定制性，它还提供了一个可以集成到其他应用程序中的 REST API。

为什么要使用 AdminJS？

使用 AdminJS，用户可以快速构建和设置管理仪表板和应用程序。电脑主板怎么刷新bios？ 三分钟完成主板刷新BIOS操作为了帮助您评估是否应该考虑使用 AdminJS 来满足应用程序需求，以下是其功能的摘要：

• 易于与其他应用程序集成：AdminJS可以轻松地集成到许多其他应用程序中，例如SQL和NoSQL数据源以及Express.js，NestJS和Fastify等框架

• 不会将其数据库架构强加给用户：AdminJS支持各种ORM和ODM，使用户能够连接他们选择的数据库

• 与后端无关：无论选择何种数据源，用户都可以创建、读取、更新和删除内容

• 高级过滤功能：用户可以通过应用多个条件轻松跟踪特定搜索查询，以快速过滤掉不需要的结果

• 灵活的用户管理：可以为用户设置不同的授权级别。此功能还可以创建角色，并且可以将特定操作（如数据修改）限制为特定用户

• 轻松定制：可修改 AdminJS UI 的视觉外观以满足用户需求

• 可自定义功能：可以将文件上传、批量编辑、导出、用户配置文件和密码哈希等多种标准功能应用于数据源;用户还可以根据需要创建独特的特征

设置新项目

要从 AdminJS 开始，怎么打开sql数据库文件？如何在Windows中打开SQL文件？我们需要安装 AdminJS 核心包，并使用我们选择的插件和适配器对其进行设置。在本教程中，我们将使用 Express.js 插件和 MongoDB 适配器。

要在本地计算机上安装 AdminJS 核心包，请导航到您选择的目录并打开 CLI。在命令行中，使用以下命令之一使用 npm 或 Yarn 安装 AdminJS：

npm init
//select default options and fill out fields as desired
npm i adminjs
yarn init
//select default options and fill out fields as desired
yarn add adminjs

添加 Express.js 插件

要添加 Express 插件，我们将在 CLI 中使用以下命令之一：

npm i @adminjs/express                # for Express server
yarn add @adminjs/express                # for Express server

添加 MongoDB 适配器

接下来，我们将使用以下命令之一将 MongoDB 适配器添加到我们的应用程序中：

npm i @adminjs/mongoose mongoose              # for Mongoose
yarn add @adminjs/mongoose mongoose               # for Mongoose

安装完成后，我们可趣知笔记以通过将已安装的插件和适配器连接到我们的 AdminJS 包来完成设置。首先，我们将安装 Express.js：

//npm
npm i express tslib express-formidable express-session
​
//yarn
yarn add express tslib express-formidable express-session

接下来，我们将使用 Express 设置一个简单的应用程序。在文件目录中，我们将创建一个新文件，并添加以下内容：App.js

const AdminJS = require('adminjs')
const AdminJSExpress = require('@adminjs/express')
const express = require('express')
​
const PORT = 3000
​
const startAdminJS = async () => {
  const app = express()
​
  const admin = new AdminJS({})
​
  const adminRouter = AdminJSExpress.buildRouter(admin)
  app.use(admin.options.rootPath, adminRouter)
​
  app.listen(PORT, () => {
    console.log(`Listening on port ${PORT}, AdminJS server started on URL: http://localhost:${PORT}${admin.options.rootPath}`)
  })
}
​
startAdminJS()

在这里，趣知笔记网站地图我们创建了一个简单的 AdminJS 界面。在本教程中，我们将添加一个 MongoDB 数据源，向 AdminJS UI 添加身份验证，并使用数据库创建一个简单的应用程序。

创建博客模型

我们将使用 MongoDB 作为 AdminJS 面板的数据源。作为先决条件，我们需要在 MongoDB 上创建一个数据库，并使用 Mongoose 适配器将我们的应用程序连接到它。

要开始使用，请登录MongoDB并选择创建组织：

在这里，我们创建了一个名为“AdminJS 数据源”的组织。接下来，我们将向组织添加一个新项目;我们将该项目命名为“书籍模型”：

接下来，系统将提示我们创建一个新数据库。在本教程中，我们将构建一个名为“Books”的共享群集。

现在，我们将为群集创建管理员凭据，并将本地主机 URL 添加到 IP 地址字段。要获取连接凭据，请单击“连接”，然后选择“使用 MongoDB 本机适配器连接”。在全栈应用程序中，我们可以找到唯一的 URI 将我们的应用程序连接到数据库。

在应用程序的工作目录中，我们将创建一个文件夹和一个文件。在文件中，我们将定义数据库的架构：bookModelbook.model.jsbook.model.js

const mongoose = require('mongoose');
const BookSchema = new mongoose.Schema({
    title: { type: String },
    author: { type: String },
});
const Book = mongoose.model('Book', BookSchema);
​
module.exports = {
    BookSchema,
    Book,
}

定义的架构将具有以下字段：和 。BookModeltitleauthor

创建资源

接下来，我们将上一节中创建的模型添加到我们的文件中，将我们的应用程序连接到 MongoDB，并创建一个 AdminJS 实例。app.js

为此，请对文件进行以下修改：app.js

//previous libraries import
const mongoose = require("mongoose");
const AdminJSMongoose = require("@adminjs/mongoose");
const { Book } = require("./bookModel/book.model.js");
​
AdminJS.registerAdapter({
  Resource: AdminJSMongoose.Resource,
  Database: AdminJSMongoose.Database,
})
​
//port
​
const startAdminJS = async () => {
  const app = express();
  const mongooseDB = await mongoose
    .connect(
      "mongodb+srv://ZionDev:[email protected]/?retryWrites=true&w=majority",
      {
        useNewUrlParser: true,
        useUnifiedTopology: true,
      }
    )
    .then(() => console.log("database connected"))
    .catch((err) => console.log(err));
​
  const BookResourceOptions = {
    databases: [mongooseDB],
    resource: Book,
  };
​
  const adminOptions = {
    rootPath: "/admin",
    resources: [BookResourceOptions],
  };
​
  const admin = new AdminJS(adminOptions);
    //other code

在这里，我们将模型作为资源添加到 AdminJS。我们还添加了MongoDB数据库，以便在我们在AdminJS中执行CRUD操作时自动更新。Book

如果我们使用命令运行应用程序，我们将获得 AdminJS 默认屏幕，模型将出现在导航部分中：node App.js``Book

创建操作处理程序

AdminJS 提供以下操作：列出、搜索、新建、显示、编辑、删除和批量删除。它还允许用户在需要时定义自定义操作。要创建的操作可以分为两类：

• 在后端运行且不显示可见 UI 的操作

• 呈现组件的操作

这两个操作的相似之处在于它们是以相同的模式创建的。两种模式之间的显着区别是增加了一个道具。让我们看看如何进行这两种类型的操作。component

后端操作

若要创建这些操作，我们将使用以下语法：

const BookResourceOptions = {
    resource: Book,
    options: {
      actions: {
        GetJsonData: {
          actionType: "record",
          component: false,
          handler: (request, response, context) => {
            const { record, currentAdmin } = context;
            console.log("record", record);
            return {
              record: record.toJSON(currentAdmin),
              msg: "Hello world",
            };
          },
        },
      },
    },
  };

在这里，我们向 .上述命令将属性设置为 。因此，不会呈现任何组件，操作将在后端运行。生成的输出将是所选记录的数据。BookResourceOptioncomponentfalse

具有可见 UI 的操作

接下来，我们需要创建一个操作将呈现的组件。然后，我们将设计的组件添加到属性字段。component

例如，假设我们有以下自定义 React 组件：

import React from 'react'
import { ActionProps } from 'adminjs'
​
const ShowRecord = (props) => {
  const { record } = props
​
  return (
    <Div>
      <h1>This is a simple component</h1>
    <p>Below are our records</p>
    <span>
      {JSON.stringify(record)}
    </span>
    </Div>
  )
}
​
export default ShowRecord

创建后，我们可以将其添加到属性中，如下所示：component

component: AdminJS.bundle('./ShowRecord'),

添加用户身份验证

AdminJS 可以添加用户身份验证以查看和管理内容;这有助于更好地保护数据并限制不需要的访问。我们可以使用插件将身份验证添加到我们的 AdminJS 应用程序。为此，我们将对文件进行以下修改：express``App.js

//other code

//login details
const DEFAULT_ADMIN = {
  email: '[email protected]',
  password: 'administrator',
}

// handle authentication
const authenticate = async (email, password) => {
  //condition to check for correct login details
  if (email === DEFAULT_ADMIN.email && password === DEFAULT_ADMIN.password) {
    //if the condition is true
    return Promise.resolve(DEFAULT_ADMIN)
  }
  //if the condition is false
  return null
}

最后，我们将 AdminJS 替换为 并将身份验证凭据传递给它：buildRouter``buildAuthenticatedRouter

const adminRouter = AdminJSExpress.buildAuthenticatedRouter(
    admin,
    {
      authenticate,
      cookieName: "AdminJS",
      cookiePassword: "Secret",
    },
    null,
    {
      store: mongooseDB,
      resave: true,
      saveUninitialized: true,
      secret: 'Secret',
      name: 'adminjs',
    }
  );

有了这个，我们得到了一个登录页面来访问 AdminJS 实例：

设置前端

接下来，我们将使用 Next.js 和 Axios 构建一个书单应用程序，将 AdminJS 接口连接到该应用程序，并显示存储的内容。要访问 AdminJS 内容，我们将创建对后端上运行的 URL 实例的 API 请求。

在目录中，我们将创建一个文件：。接下来，我们将向此文件中的资源发出 API 请求。资源的 API 终结点采用以下语法：apigetBooks.jsBooks

.../api/resources/{resourceId}/actions/{action}

在这种情况下，我们的资源是 ，要执行的操作是 。此操作将返回资源中存储的所有数据。将以下代码添加到文件中：idBooklist``getBooks.js

import axios from "axios";

export default async function handler(req, res) {
  await axios
    .get("http://localhost:3000/admin/api/resources/Book/actions/list")

    .then((response) => {
      return res.status(200).json(response.data.records);
    })
    .catch((error) => {
      console.log(error);
    });
}

上面的代码返回一个包含我们的资源数据的响应。我们可以像在文件的前端一样访问这些数据：static props``index.js

export default function Home(props) {
  console.log(props);
  return (
    <div style={
  
  {display:"flex", alignItems:"center", height:"100vvh", paddingTop:"55px", flexDirection:"column"}}>
      <h1>Book List Application</h1>
      <div style={
  
  {marginTop:"34px"}} >
        {/* book List container */}
        {props.books.map((book) => {
          return (
            <div style={
  
  {display:"flex", flexDirection:"column", border:"1px solid black", width:"500px", padding:"10px", margin:"10px"}}>
              <h2>{book.params.title}</h2>
              <p>{book.params.author}</p>
            </div>
          );
        }
        )}
      </div>
    </div>
  )
}

export const getStaticProps = async () => { 
  const res = await fetch('http://localhost:3001/api/getBooks');
  const data = await res.json();
  return {
    props: { books: data }
  }
}

我们用于从 API 路由获取数据并将其作为 .然后，我们可以在前端访问它，并为响应中的每个数组元素返回 and。getStaticPropspropsproptitleauthor

测试应用程序

为了测试我们的应用程序，我们将使用 AdminJS 实例创建条目：

上面的仪表板列表中有三个条目，每个条目都包含书名和作者。如果我们导航到MongoDB Atlas上的MongoDB集合，我们可以看到在AdminJS实例中执行的操作产生的数据：Books``Create

现在，当我们运行 Next.js 应用程序时，我们得到以下结果：

结论

在本教程中，我们介绍了 AdminJS，回顾了它的许多功能，然后使用它来构建一个带有 Express.js 和 MongoDB 的全栈 Node.js 应用程序。您将如何在下一个项目中使用 AdminJS？