将自定义 CSS 文件添加到 AdminBro 组件中（自定义css样式怎么添加）

25-04-26 3

对于将自定义CSS文件添加到AdminBro组件中感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍自定义css样式怎么添加，并为您提供关于AdminBro-尝试上传并返回“isValid()不是

对于将自定义 CSS 文件添加到 AdminBro 组件中感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍自定义css样式怎么添加，并为您提供关于AdminBro - 尝试上传并返回“isValid() 不是函数”、AdminBro 中文件上传的自定义提供程序的问题、AdminBro 捆绑“没有这样的文件或目录”错误、AdminBro 表中的自定义数据的有用信息。

本文目录一览：

将自定义 CSS 文件添加到 AdminBro 组件中（自定义css样式怎么添加）
AdminBro - 尝试上传并返回“isValid() 不是函数”
AdminBro 中文件上传的自定义提供程序的问题
AdminBro 捆绑“没有这样的文件或目录”错误
AdminBro 表中的自定义数据

将自定义 CSS 文件添加到 AdminBro 组件中（自定义css样式怎么添加）

如何解决将自定义 CSS 文件添加到 AdminBro 组件中

我在 Admin bro 中有一个名为 gallery 的自定义页面。现在在他们我想导入一些我写的 css。我试过这个：

import ''./gallery.css'';

由于某种原因，这似乎不起作用。他们有什么办法可以将我的自定义 css 添加到 Adminbro 页面中的 react 组件中。

解决方法

这是我是怎么做的，请注意我使用的是 Express.js：

我试图在我的 AdminBro 页面中自定义表格的外观，发现已经有一个 admin-bro_TableBody css 类并且可以根据以下 github 问题覆盖它：

https://github.com/SoftwareBrothers/admin-bro/issues/361

所以我创建了一个 css 文件并使其可公开访问，如下所示：https://stackoverflow.com/a/58046155/4297337

然后在我的 adminBro 声明中，我这样做了：

  const adminBro = new AdminBro({
    assets: {
      styles: [''/css/admin.css''],},...
  }

我创建的css文件叫admin.css，adminBro页面会自动抓取它，你可以随意命名css文件，只要它在public/css/...文件夹中你项目的根目录

我的 CSS 文件是什么样的：

.admin-bro_TableBody {
  max-width: max-content;
  word-break: break-word;
}

AdminBro - 尝试上传并返回“isValid() 不是函数”

如何解决AdminBro - 尝试上传并返回“isValid() 不是函数”

尝试上传时，我收到一条错误消息，指出“isValid()”不是函数。图像也不会保存。

代码：

/** @type {Adminbro.After<Adminbro.ActionResponse>} */
const after = async (response,request,context) => {
  const { record,uploadImage } = context;
  if (record.isValid() && uploadImage) {
    const filePath = path.join(''uploads'',record.id().toString(),uploadImage.name);
    await fs.promises.mkdir(path.dirname(filePath),{ recursive: true });
    await fs.promises.rename(uploadImage.path,filePath);
    await record.update({ profilePhotoLocation: `/${filePath}` });
  }
  return response;
};

错误：

TypeError: record.isValid is not a function.

我关注了 JSCast 频道的视频。除此之外，其余的都在工作。关于上传系统的视频：https://www.youtube.com/watch?v=7WtKcFqJHho

已安装的库及其版本：

admin-bro@4.0.1,admin-bro-expressjs@2.1.1,admin-bro-mongoose@0.5.2,argon2@0.28.2,connect-mongo@4.4.1,express@4.17.1,express-formidable@1.2.0,express-session@1.17.2,mongoose@5.12.15

AdminBro 中文件上传的自定义提供程序的问题

如何解决AdminBro 中文件上传的自定义提供程序的问题

我使用 imagekit 和 Adminbro 创建用于文件上传的自定义提供程序。这是：

const { BaseProvider } = require("@admin-bro/upload");
const ImageKit = require("imagekit");

const imagekit = new ImageKit({
  publicKey: process.env.IMAGE_KIT_PUBLIC_KEY,privateKey: process.env.IMAGE_KIT_PRIVATE_KEY,urlEndpoint: process.env.IMAGE_KIT_URL,});

class UploadProvider extends BaseProvider {
  constructor() {
    super(process.env.IMAGE_KIT_URL);
  }

  async upload(file,key) {
    console.log(file);
    console.log(key);

    const imageBinary = Buffer.from(JSON.stringify(file));

    imagekit.upload(
      {
        file: imageBinary,fileName: "test.jpg",},function (error,result) {
        if (error) console.log(error);
        else console.log(result);
      }
    );

    return true;
  }

  async delete(key) {
    imagekit.deleteFile(key,result) {
      if (error) console.log(error);
      else {
        console.log(result);
        return true;
      }
    });
  }

  async path(key,bucket) {
    return bucket + key;
  }
}

module.exports = UploadProvider;

当我上传一个 img 文件时，我得到了这个回应：

{
  fileId: ''6065faae524afb4c982ea36b'',name: ''test_lQ-cxEt5i0.jpg'',size: 991,filePath: ''/test_lQ-cxEt5i0.jpg'',url: ''https://ik.imagekit.io/my-site/test_lQ-cxEt5i0.jpg'',fileType: ''non-image''
}

和 Imagekit 仪表板： jpg extension is lost

所以文件被发送到 imagekit 但它的扩展名丢失了。

这里也是 console.log(file) 中的内容：

{
  size: 45742,path: ''C:\\\\Users\\\\adibu\\\\AppData\\\\Local\\\\Temp\\\\upload_7627ceeabb5e466ad9e4c780613105f7'',name: ''candle.jpg'',type: ''image/jpeg'',hash: null,_events: {},_eventsCount: 0,_writeStream: {
    fd: null,pos: undefined,mode: 438,flags: ''w'',start: undefined,closed: true,bytesWritten: 45742,_maxListeners: undefined,_writableState: {
      sync: false,ended: true,ending: true,length: 0,corked: 0,writing: false,onwrite: [Function: bound onwrite],writecb: null,allNoop: true,errored: null,finished: true,writelen: 0,buffered: [],needDrain: true,destroyed: true,pendingcb: 0,emitClose: true,objectMode: false,allBuffers: true,finalCalled: false,constructed: true,prefinished: true,autoDestroy: true,errorEmitted: false,closeEmitted: true,highWaterMark: 16384,decodeStrings: true,bufferedindex: 0,defaultEncoding: ''utf8'',bufferProcessing: false,afterWriteTickInfo: null
    }
  },lastModifiedDate: 2021-04-01T16:54:05.017Z
}

我不知道为什么文件在上传时丢失了扩展名，有人知道解决方案吗？

AdminBro 捆绑“没有这样的文件或目录”错误

如何解决AdminBro 捆绑“没有这样的文件或目录”错误

我只是想在我的 docker 容器上使用 NodeJS 和 Nginx 运行 Adminbro，我从 Nginx 错误日志中收到以下错误：

2021/06/05 07:34:28 [error] 13187#13187: *24 open() "/home/aguero/lasfar/website/admin/frontend/assets/global.bundle.js" Failed (2: No such file or directory),client: 172.17.0.1,server:,request: "GET /admin/frontend/assets/global.bundle.js HTTP/1.1",host: "0.0.0.0:8080",referrer: "http://0.0.0.0:8080/admin"
2021/06/05 07:34:28 [error] 13187#13187: *24 open() "/home/aguero/lasfar/website/admin/frontend/assets/app.bundle.js" Failed (2: No such file or directory),request: "GET /admin/frontend/assets/app.bundle.js HTTP/1.1",referrer: "http://0.0.0.0:8080/admin"
2021/06/05 07:34:28 [error] 13187#13187: *26 open() "/home/aguero/lasfar/website/admin/frontend/assets/design-system.bundle.js" Failed (2: No such file or directory),request: "GET /admin/frontend/assets/design-system.bundle.js HTTP/1.1",referrer: "http://0.0.0.0:8080/admin"
2021/06/05 07:34:28 [error] 13187#13187: *26 open() "/home/aguero/lasfar/website/admin/frontend/assets/components.bundle.js" Failed (2: No such file or directory),request: "GET /admin/frontend/assets/components.bundle.js HTTP/1.1",referrer: "http://0.0.0.0:8080/admin"

网页没有显示任何错误，而是空白。

admin.js：

// ============================================
// Admin bro
const Adminbro = require(''admin-bro'')
const AdminbroExpress = require(''@admin-bro/express'')
const adminbro = new Adminbro({
  databases: [],rootPath: ''/admin'',})
adminbro.watch()
const router = AdminbroExpress.buildrouter(adminbro)
// ============================================
// Server
const express = require("express");
const server = express();
server
  .use(adminbro.options.rootPath,router)
  .listen(3000,() => console.log("Server started"));

admin.js 在 /home/aguero/lasfar/website/nodejs 下

Nginx.conf:

user  aguero;
worker_processes  1;
error_log  /var/log/Nginx/error.log warn;
pid        /var/run/Nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/Nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main  ''$remote_addr - $remote_user [$time_local] "$request" ''
                      ''$status $body_bytes_sent "$http_referer" ''
                      ''"$http_user_agent" "$http_x_forwarded_for"'';
    access_log  /var/log/Nginx/access.log  main;
    server {
        listen 0.0.0.0:80 default_server;
        location /admin {
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection ''upgrade'';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    } 
    sendfile        on;
    keepalive_timeout  65;
}

Nginx.conf 文件中有更多位置，但它们位于完全不同的路径中，因此为了简单起见，我将它们删除了。
我使用 setup_16.x 脚本和 APT 安装了 NodeJS。软件包是通过以下方式安装的：

npm install tslib
npm i admin-bro @admin-bro/express express express-formidable

我正在将端口 80 从容器映射到主机的 8080 端口。
知道为什么会出现这些错误吗？如有必要，我可以提供更多信息。

AdminBro 表中的自定义数据

如何解决AdminBro 表中的自定义数据

我是 Adminbro 的新手，正在尝试将自定义数据添加到我的 Adminbro 可视化表格中。我想合并来自我的数据库表不同列的数据。例如，从我的“货币”列中获取货币，并将其连接到我从“价格”列中获得的值，最后，将其存储在我自己创建的自定义列中，例如“customPrice” （未存储在数据库中）。是否有可能，或者我只能在没有操作的情况下可视化来自数据库的直接数据？找不到。

谢谢！

关于将自定义 CSS 文件添加到 AdminBro 组件中和自定义css样式怎么添加的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于AdminBro - 尝试上传并返回“isValid() 不是函数”、AdminBro 中文件上传的自定义提供程序的问题、AdminBro 捆绑“没有这样的文件或目录”错误、AdminBro 表中的自定义数据的相关知识，请在本站寻找。

本文标签：