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

> Source: https://strapi.nodejs.cn/cms/plugins-development/guides/pass-data-from-server-to-admin

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

通过创建自定义管理路由并使用 `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 是 **无头** 。管理面板与服务器完全分开。

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

🌐 When [developing a Strapi plugin](/cms/plugins-development/developing-plugins) 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](/cms/plugins-development/admin-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](/cms/plugins-development/admin-fetch-client):

要将数据从 `/server` 文件夹传递到 `/admin` 文件夹，你首先需要 [创建自定义管理路由](#create-a-custom-admin-route)，然后 [在管理面板中获取返回的数据](#get-the-data-in-the-admin-panel)。

🌐 To pass data from the `/server` to `/admin` folder you would first [create a custom admin route](#create-a-custom-admin-route) and then [get the data returned in the admin panel](#get-the-data-in-the-admin-panel).

## 创建自定义管理员路由 {#create-a-custom-admin-route}

🌐 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:

```js title="/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:

```js title="/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}

🌐 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:

```js title="/my-plugin/admin/src/api/foobar.js"

const { get } = getFetchClient();

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

```

你将能够在管理面板组件的代码中使用 `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:

```js title="/my-plugin/admin/src/components/MyComponent/index.js"

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.