bro 使用_节点js使用admin bro创建管理面板

bro 使用

In this blog, I am presenting how to create an admin panel that automatically performs the CRUD operations based on our models.

在此博客中，我将介绍如何创建一个管理面板，该面板将根据我们的模型自动执行CRUD操作。

To do that, I am using Admin Bro which is an automatic UI generator that generates UI based on the models.

为此，我使用的是Admin Bro，这是一个自动UI生成器，可基于模型生成UI。

1. Creating a Node JS Project

   创建一个节点JS项目

2. Creating Models

   创建模型

3. Creating Admin Panel

   创建管理面板

1.创建一个Node.js项目(1. Creating a Node.js project)

Create a new directory and initialize node with the command npm init.

创建一个新目录并使用命令npm init初始化节点。

mkdir expresstemplate
cd expresstemplate/
npm init -y
npm i nodemon

Express JS is an open-source web framework for node JS. The below command installs express to our project.

Express JS是用于节点JS的开源Web框架。 下面的命令将express安装到我们的项目中。

npm install express --save

package.json

package.json

"scripts": {
  "start": "nodemon index.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

index.js

index.js

const express = require('express')
var app = express()
app.get('/', function(req,res){
  res.send('Hello world')
})
app.listen(8000,function(){
  console.log('Listening to PORT 8000')
})

2.创建模型 (2. Creating Models)

Now install mongoose which is an Object Data Modeling library for MongoDB and Node.js. It manages relationships between data and provides schema validation. The command installs mongoose.

现在安装mongoose ，它是MongoDB和Node.js的对象数据建模库。 它管理数据之间的关系并提供架构验证。 该命令将安装猫鼬。

npm i mongoose

After installing mongoose, connect MongoDB to Node.js. The connection can be achieved just by passing the MongoDB connecting string to the mongoose.

安装猫鼬后，将MongoDB连接到Node.js。 只需将MongoDB连接字符串传递到猫鼬即可实现连接。

index.js

index.js

var express = require('express');
var app = express();
const mongoose = require('mongoose');//Routes
app.get('/', function (req, res) {
    res.send('Hello World!');
});
//Database
mongoose.connect('mongodb://localhost/test', {useNewUrlParser: true});mongoose.connection.once('open',function(){
    console.log('Database connected Successfully');
}).on('error',function(err){
    console.log('Error', err);
})app.listen(8000, function () {
    console.log('Listening to Port 8000');
});

After successfully connecting node with MongoDB, create a folder named Models where all Schemas will be kept. Inside the Models folder, create a file named emp.js. Inside this file, create a schema named empSchema and declare all the fields you want. Finally, export the schema.

在成功将节点与MongoDB连接之后，创建一个名为Models的文件夹，其中将保留所有模式。 在Models文件夹中，创建一个名为emp.js的文件。 在此文件中，创建一个名为empSchema的架构，并声明所需的所有字段。 最后，导出架构。

Models/emp.js

Models/emp.js

const mongoose = require('mongoose');const empSchema = new mongoose.Schema({
  empName: {
    type: String,
    required: true,
  },  empEmail: {
    type: String,
    required: true,
  },
})module.exports = mongoose.model('Emp',empSchema)

3.创建管理面板 (3. Creating Admin Panel)

Now, let’s start creating our Admin panel. To do that, we need to install Admin bro to our project.

现在，让我们开始创建“管理”面板。 为此，我们需要将Admin bro安装到我们的项目中。

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

The above commands install Admin bro and other required dependencies that make Admin bro work.

上面的命令将安装Admin bro和使Admin bro正常工作的其他必需依赖项。

After installation, copy the below code in the index.js file.

安装后，将以下代码复制到index.js文件中。

index.js

index.js

var express = require('express');
const Emp = require('./Models/emp')
const AdminBro = require('admin-bro')
const AdminBroMongoose = require('@admin-bro/mongoose')
const AdminBroExpress = require('@admin-bro/express')var app = express();
const mongoose = require('mongoose');//Routes
app.get('/', function (req, res) {
    res.send('Hello World!');
});//Database
mongoose.connect('mongodb://localhost/test', {useNewUrlParser: true});
mongoose.connection.once('open',function(){
    console.log('Database connected Successfully');
}).on('error',function(err){
    console.log('Error', err);
})//Admin Bro
AdminBro.registerAdapter(AdminBroMongoose)
const User = mongoose.model('User', { name: String, email: String, surname: String })
const AdminBroOptions = {
  resources: [User, Emp],
}
const adminBro = new AdminBro(AdminBroOptions)
const router = AdminBroExpress.buildRouter(adminBro)
app.use(adminBro.options.rootPath, router)app.listen(8000, function () {
    console.log('Listening to Port 8000');
});

Once done, navigate to http://localhost:8000/admin. There you will see something like the below one.

完成后，导航到http：// localhost：8000 / admin 。 在那里，您将看到类似下面的内容。

Admin Bro Demonstration

管理员兄弟示范

Also, check my previous blog wherein I have explained about the template engines with node js.

另外，请查看我以前的博客，其中我已经解释了有关带有节点js的模板引擎的信息。

Feel free to contact me for any queries. Email: sjlouji10@gmail.com Linkedin: https://www.linkedin.com/in/sjlouji/

如有任何疑问，请随时与我联系。 电子邮件：sjlouji10@gmail.com Linkedin： https ://www.linkedin.com/in/sjlouji/

Complete code on my GitHub:

我的GitHub上的完整代码：

Happy coding!

编码愉快！

翻译自: https://medium.com/javascript-in-plain-english/node-js-creating-admin-pannel-with-admin-bro-41725198a81c

bro 使用