如何创建一个React文件管理器

所以我们已经完成了我们的服务器部分，现在我们将在反应项目中实现它：

// src/store/actions/file-manager/createDirectory.ts
import Kernel from "../Kernel";

export default function createDirectory(kernel: Kernel) {
  return function create(
    directoryName: string,
    directoryPath: string = kernel.currentDirectoryNode?.path as string,
  ) {
    console.log("create directory", directoryName);
  };
}

到目前为止，这就是我们在createDirectory 动作中的代码，现在我们将向服务器发出请求。

更新文件管理器服务

但让我们先在file-manager-service.ts 类中发出请求：

// src/services/file-manager-service.ts
import endpoint from "@mongez/http";
import FileManagerServiceInterface from "../types/FileManagerServiceInterface";

export class FileManagerService implements FileManagerServiceInterface {
  /**
   * {@inheritDoc}
   */
  public list(directoryPath: string): Promise<any> {
    console.log(directoryPath);

    return endpoint.get("/file-manager", {
      params: {
        path: directoryPath,
      },
    });
  }

  /**
   * {@inheritDoc}
   */
  public createDirectory(directoryName: string, saveTo: string): Promise<any> {
    throw new Error("Method not implemented.");
  }
  ...
}

那是我们在file-manager-service.ts 类中的代码，现在我们首先更新返回类型，使其自动取自方法的返回，然后我们将更新createDirectory 方法：

// src/services/file-manager-service.ts
import endpoint from "@mongez/http";
import FileManagerServiceInterface from "../types/FileManagerServiceInterface";

export class FileManagerService implements FileManagerServiceInterface {
  /**
   * {@inheritDoc}
   */
  public list(directoryPath: string) {
    return endpoint.get("/file-manager", {
      params: {
        path: directoryPath,
      },
    });
  }

  /**
   * {@inheritDoc}
   */
  public createDirectory(directoryName: string, path: string) {
    return endpoint.post("/file-manager/directory", {
      path,
      name: directoryName,
    });
  }
}

就这样，现在我们将更新我们的createDirectory 动作。

调用createDirectory方法

现在让我们回到我们的createDirectory 动作并调用createDirectory 方法：

// src/store/actions/file-manager/createDirectory.ts
import Kernel from "../Kernel";
import fileManagerService from "../services/file-manager-service";

export default function createDirectory(kernel: Kernel) {
  return function create(
    directoryName: string,
    directoryPath: string = kernel.currentDirectoryNode?.path as string,
  ) {
    fileManagerService.createDirectory(directoryName, directoryPath);
  };
}

这将向服务器发出一个成功的请求，但我们还没有处理响应。

同时，我们可以在请求进行时显示一个加载指示器，但我们将在下一章中进行。