Skip to main content

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

🌐 How to pass data from server to admin panel with a Strapi plugin

Page summary:

通过创建自定义管理路由并使用 getFetchClient API 从管理组件请求数据，将数据从 Strapi 插件的服务器传递到管理面板。

🌐 Pass data from a Strapi plugin's server to the admin panel by creating a custom admin route and using the getFetchClient API to request data from admin components.

Strapi 是 无头

A headless CMS is a Content Management System that separates the presentation layer (i.e., the front end, where content is displayed) from the back end (where content is managed).

Strapi is a headless CMS that provides:

  • a back-end server exposing an API for your content,
  • and a graphical user interface, called the admin panel, to manage the content.
The presentation layer of your website or application powered by Strapi should be handled by another framework, not by Strapi.

。管理面板与服务器完全分开。

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

🌐 When developing a Strapi plugin you might want to pass data from the /server to the /admin folder. Within the /server folder you have access to the Strapi object and can do database queries whereas in the /admin folder you can't.

可以使用管理面板内置的 fetch client 将数据从 /server 文件夹传送到 /admin 文件夹：

🌐 Passing data from the /server to the /admin folder can be done using the admin panel's built-in fetch client:

Loading diagram...

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

🌐 To pass data from the /server to /admin folder you would first create a custom admin route and then get the data returned in the admin panel.

创建自定义管理员路由​

🌐 Create a custom admin route

管理路由就像你为任何控制器设置的路由，只是 type: 'admin' 声明会将它们从通用 API 路由中隐藏，并允许你从管理面板访问它们。

🌐 Admin routes are like the routes that you would have for any controller, except that the type: 'admin' declaration hides them from the general API router, and allows you to access them from the admin panel.

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

🌐 The following code will declare a custom admin route for the my-plugin plugin:

/my-plugin/server/routes/index.js
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 方法。

🌐 This route will call the index method of the myPluginContentType controller when you send a GET request to the /my-plugin/pass-data URL endpoint.

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

🌐 Let's create a basic custom controller that simply returns a simple text:

/my-plugin/server/controllers/my-plugin-content-type.js
'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! 文本。

🌐 This means that when sending a GET request to the /my-plugin/pass-data URL endpoint, you should get the You are in the my-plugin-content-type controller! text returned with the response.

在管理面板中获取数据​

🌐 Get the data in the admin panel

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

🌐 Any request sent from an admin panel component to the endpoint for which we defined the custom route /my-plugin/pass-data should now return the text message returned by the custom controller.

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

🌐 So for instance, if you create an /admin/src/api/foobar.js file and copy and paste the following code example:

/my-plugin/admin/src/api/foobar.js
import { getFetchClient } from '@strapi/strapi/admin';

const { get } = getFetchClient();

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

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

🌐 You will be able to use foobarRequests.getFoobar() in the code of an admin panel component and have it return the You are in the my-plugin-content-type controller! text with the data.

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

🌐 For instance, within a React component, you could use useEffect to get the data after the component initializes:

/my-plugin/admin/src/components/MyComponent/index.js
import foobarRequests from "../../api/foobar";

const [foobar, setFoobar] = useState([]);
// …
useEffect(() => {
  foobarRequests.getFoobar().then(data => {
    setFoobar(data);
  });
}, [setFoobar]);
// …

这将设置组件状态中 foobar 数据内的 You are in the my-plugin-content-type controller! 文本。

🌐 This would set the You are in the my-plugin-content-type controller! text within the foobar data of the component's state.

On this page