将数据从服务器传递到管理面板

如何使用 Strapi 插件将数据从服务器传递到管理面板

Strapi 中的插件可帮助您向现有的内置核心功能集添加其他功能。它们可用于扩展 API、自定义管理面板等。在许多情况下，您希望插件存储数据以供以后检索，并访问这些数据。

当 开发 Strapi 插件 时，您可能希望将数据从 /server 传递到 /admin 文件夹。在 /server 文件夹中，您可以访问 Strapi 对象并可以执行数据库查询，而在 /admin 文件夹中则不能。

Strapi 是 无头CMS 。管理面板与服务器完全分开。

可以使用管理面板的 Axios 实例将数据从 /server 传递到 /admin 文件夹：

graph LR
    A{Server} -->|Axios instance| B{Admin Panel}
    B --> A

要将数据从 /server 传递到 /admin 文件夹，您首先需要 创建自定义管理路由，然后 获取管理面板中返回的数据。

创建自定义管理路由

管理路由类似于任何控制器的路由，不同之处在于 type: 'admin' 声明会将它们从通用 API 路由器中隐藏，并允许您从管理面板访问它们。

以下代码将为 my-plugin 插件声明自定义管理路由：

module.exports = {
  'pass-data': {
    type: 'admin',
    routes: [
      {
        method: 'GET',
        path: '/pass-data',
        handler: 'myPluginContentType.index',
        config: {
          policies: [],
          auth: false,
        },
      },
    ]
  }
  // ...
}

当您向 /my-plugin/pass-data URL 端点发送 GET 请求时，此路由将调用 myPluginContentType 控制器的 index 方法。

让我们创建一个仅返回简单文本的基本自定义控制器：

'use strict'

module.exports = {
  async index(ctx) {
    ctx.body = 'You are in the my-plugin-content-type controller!'
  }
}

这意味着，当向 /my-plugin/pass-data URL 端点发送 GET 请求时，您应该获得随响应返回的 You are in the my-plugin-content-type controller! 文本。

获取管理面板中的数据

从管理面板组件发送到我们为其定义自定义路由 /my-plugin/pass-data 的端点的任何请求现在都应返回自定义控制器返回的文本消息。

因此，例如，如果您创建一个 /admin/src/api/foobar.js 文件并复制并粘贴以下代码示例：

import axios from 'axios'

const foobarRequests = {
  getFoobar: async () => {
    const data = await axios.get(`/my-plugin/pass-data`)
    return data
  },
}
export default foobarRequests

您将能够在管理面板组件的代码中使用 foobarRequests.getFoobar()，并让其返回带有数据的 You are in the my-plugin-content-type controller! 文本。

例如，在 React 组件中，您可以在组件初始化后使用 useEffect 获取数据：

import foobarRequests from '../../api/foobar'
const [foobar, setFoobar] = useState([])

// …
useEffect(() => {
  foobarRequests.getFoobar().then((res) => {
    setSchemas(res.data)
  })
}, [setFoobar])
// …

这会在组件状态的“foobar”数据中设置“您位于 my-plugin-content-type 控制器中！”文本。