当前位置：首页 > article >正文

AdminJS - 集成 MySQL 的现代化管理面板开发指南

article 2024/12/22 21:03:29

AdminJS - 集成 MySQL 的现代化管理面板开发指南

MySQL 集成配置

首先需要安装必要的依赖：

npm install adminjs @adminjs/express express
npm install @adminjs/sequelize sequelize mysql2

基础配置示例

const AdminJS = require('adminjs')
const AdminJSExpress = require('@adminjs/express')
const AdminJSSequelize = require('@adminjs/sequelize')
const { Sequelize } = require('sequelize')

// 注册 Sequelize 适配器
AdminJS.registerAdapter(AdminJSSequelize)

// 配置数据库连接
const sequelize = new Sequelize('database', 'username', 'password', {
  host: 'localhost',
  dialect: 'mysql',
  port: 3306
})

// 定义模型示例
const User = sequelize.define('User', {
  name: {
    type: Sequelize.STRING,
    allowNull: false,
  },
  email: {
    type: Sequelize.STRING,
    allowNull: false,
  },
  status: {
    type: Sequelize.ENUM(['active', 'inactive']),
    defaultValue: 'active',
  }
})

// AdminJS 配置
const adminJs = new AdminJS({
  databases: [sequelize],
  rootPath: '/admin',
  resources: [{
    resource: User,
    options: {
      // 自定义属性显示
      properties: {
        createdAt: {
          isVisible: { list: true, filter: true, show: true, edit: false }
        }
      },
      // 自定义操作
      actions: {
        // 可以添加自定义操作
      }
    }
  }]
})

高级配置示例

// 添加自定义验证和格式化
const adminJsConfig = {
  resources: [{
    resource: User,
    options: {
      properties: {
        email: {
          isRequired: true,
          // 添加自定义验证
          custom: {
            isEmail: true
          }
        },
        status: {
          availableValues: [
            { value: 'active', label: '活跃' },
            { value: 'inactive', label: '停用' }
          ]
        }
      },
      // 自定义列表显示
      listProperties: ['id', 'name', 'email', 'status', 'createdAt'],
      // 自定义过滤选项
      filterProperties: ['name', 'email', 'status', 'createdAt'],
      // 自定义编辑字段
      editProperties: ['name', 'email', 'status']
    }
  }]
}

常用操作示例

1. 查询数据

// 自定义列表操作
const customListAction = {
  actionType: 'list',
  handler: async (request, response, context) => {
    const users = await User.findAll({
      where: {
        status: 'active'
      }
    });
    return {
      records: users
    }
  }
}

2. 数据验证

// 添加自定义验证规则
const userValidation = {
  before: async (request, context) => {
    const { email } = request.payload;
    const existingUser = await User.findOne({ where: { email } });
    if (existingUser) {
      throw new Error('邮箱已存在');
    }
    return request;
  }
}

实用功能

批量操作
- 支持批量删除
- 支持批量更新状态
- 自定义批量操作
数据导出
- CSV 导出
- Excel 导出
- 自定义导出格式
文件上传
- 图片上传
- 文件管理
- 支持多种存储方式

性能优化建议

合理使用索引
配置连接池
使用适当的查询缓存
分页加载数据

安全建议

const adminJsOptions = {
  // 配置认证
  authenticate: async (email, password) => {
    // 实现您的认证逻辑
    const user = await User.findOne({ where: { email } });
    if (user && validatePassword(password, user.password)) {
      return user;
    }
    return false;
  },
  // 配置权限
  cookiePassword: 'your-secure-password-here'
}