对于开发人员来说,为每个 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.js
book.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, }
定义的架构将具有以下字段:和 。BookModeltitle
author
创建资源
接下来,我们将上一节中创建的模型添加到我们的文件中,将我们的应用程序连接到 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", }; }, }, }, }, };
在这里,我们向 .上述命令将属性设置为 。因此,不会呈现任何组件,操作将在后端运行。生成的输出将是所选记录的数据。BookResourceOptioncomponent
false
具有可见 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.js
Books
.../api/resources/{resourceId}/actions/{action}
在这种情况下,我们的资源是 ,要执行的操作是 。此操作将返回资源中存储的所有数据。将以下代码添加到文件中:idBook
list``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。getStaticPropsprops
proptitle
author
测试应用程序
为了测试我们的应用程序,我们将使用 AdminJS 实例创建条目:
上面的仪表板列表中有三个条目,每个条目都包含书名和作者。如果我们导航到MongoDB Atlas上的MongoDB集合,我们可以看到在AdminJS实例中执行的操作产生的数据:Books``Create
现在,当我们运行 Next.js 应用程序时,我们得到以下结果:
结论
在本教程中,我们介绍了 AdminJS,回顾了它的许多功能,然后使用它来构建一个带有 Express.js 和 MongoDB 的全栈 Node.js 应用程序。您将如何在下一个项目中使用 AdminJS?