从零开始-文件资源管理器-13-Next.js server action 创建文件夹、删除、移动

这次主要实现 创建文件夹、删除、移动 这三项功能。

常规开发时,需要现在服务端创建 http 接口,提供"创建文件夹、删除、移动"功能。客户端通过 fetch/xhr 链接到服务端。

Next.js@13 提供了一个叫 server action 的功能,可以省略创建 http 接口的过程,客户端可以直接调用服务端的方法。

开发

这次的功能开发涉及的文件较多,就只针对"移动"功能做详细解释。其余的两个可以在源码中查看。

文件树

scss 复制代码
explorer/src/components/move-modal/action.ts
explorer/src/components/move-modal/modal.tsx
explorer/src/components/move-modal/move-form.tsx
explorer/src/components/move-modal/move-path-context.tsx
explorer-manager/src/main.mjs

服务端:explorer-manager

新增一个移动方法,node 没有提供递归移动目录的方法。这里使用了一个外部依赖fs-extra.moveSync来来实现移动目录的功能。

javascript 复制代码
import fsExtra from 'fs-extra'

const { moveSync } = fsExtra

export const moveAction = async (src, dest) => {
  return moveSync(formatPath(src), formatPath(dest), { overwrite: false })
}

客户端:explorer

文件路径:explorer/src/components/move-modal/move-path-context.tsx

创建移动文件弹窗上下文。

typescript 复制代码
'use client'
import createCtx from '@/lib/create-ctx'
import React from 'react'
import MoveModal from '@/components/move-modal/modal'

export const MovePathContext = createCtx<string>()
export const useMovePathStore = MovePathContext.useStore
export const useMovePathDispatch = () => {
  const changeMovePath = MovePathContext.useDispatch()
  return (path: string) => changeMovePath(decodeURIComponent(path))
}
export const MovePathProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
  return (
    <MovePathContext.ContextProvider value={''}>
      {children}
      <MoveModal />
    </MovePathContext.ContextProvider>
  )
}

文件路径:explorer/src/components/move-modal/modal.tsx

移动文件弹窗组件

javascript 复制代码
'use client'
import React from 'react'
import { Modal } from 'antd'
import { isEmpty } from 'lodash'
import MoveForm from '@/components/move-modal/move-form'
import { useMovePathDispatch, useMovePathStore } from '@/components/move-modal/move-path-context'

const MoveModal: React.FC = () => {
  const move_path = useMovePathStore()
  const changeMovePath = useMovePathDispatch()

  return (
    <Modal
      title="移动"
      open={!isEmpty(move_path)}
      width={1000}
      onCancel={() => changeMovePath('')}
      footer={false}
      destroyOnClose={true}
    >
      <MoveForm />
    </Modal>
  )
}

export default MoveModal

文件路径:explorer/src/components/move-modal/move-form.tsx

移动文件 form 组件。基础的 antd form 封装。内部提供一个只读的来源目录。一个移动目标目录。一个当前文件名。

当点击"移动"时直接调用 moveAction 方法。

ini 复制代码
import React from 'react'
import { App, Flex, Form, Input, Space } from 'antd'
import SelectPathInput from '@/components/select-path-input'
import { useMovePathDispatch, useMovePathStore } from '@/components/move-modal/move-path-context'
import { moveAction } from '@/components/move-modal/action'
import SubmitBtn from '@/components/submit-btn'
import { useUpdateReaddirList } from '@/app/path/readdir-context'
import { parseDirPath } from '@/explorer-manager/src/parse-path.mjs'

const onFinish = (values: any) => {
  console.log('Success:', values)
}

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo)
}

type FieldType = {
  path?: string
  new_path?: string
  last?: string
}

const MoveForm: React.FC = () => {
  const [form] = Form.useForm()
  const move_path = useMovePathStore()
  const { message } = App.useApp()
  const changeMovePath = useMovePathDispatch()
  const { update } = useUpdateReaddirList()
  const { last, remain } = parseDirPath(move_path)

  return (
    <Form
      form={form}
      labelCol={{ span: 3 }}
      initialValues={{ remember: true, path: move_path, new_path: remain, last: last }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item<FieldType> label="来源" name="path" rules={[{ required: true, message: '请输入来源' }]}>
        <Input disabled readOnly />
      </Form.Item>

      <SelectPathInput
        onSelect={(path) => {
          form.setFieldsValue({ new_path: '/' + path.join('/') + '/' })
        }}
        highlight_path={move_path}
      >
        <Form.Item<FieldType>
          label="新位置"
          name="new_path"
          rules={[{ required: true, message: '请输入移动置目录' }]}
          style={{ width: '100%' }}
        >
          <Input placeholder={`移动目录`} />
        </Form.Item>
      </SelectPathInput>

      <Form.Item<FieldType> label="名称" name="last" rules={[{ required: true, message: '请输入名称' }]}>
        <Input placeholder={`名称`} />
      </Form.Item>

      <Form.Item>
        <Flex justify="flex-end">
          <Space>
            <SubmitBtn
              onClick={async () => {
                const { path, new_path, last } = await form.validateFields()

                return moveAction(path, [new_path, last].join('/')).then(() => {
                  changeMovePath('')
                  update()
                  message.success('移动成功').then()
                })
              }}
            >
              移动
            </SubmitBtn>
          </Space>
        </Flex>
      </Form.Item>
    </Form>
  )
}

export default MoveForm

文件路径:explorer/src/components/move-modal/action.ts

文件顶部添加 'use server',标记为 server action 方法文件。

该方法返回一个 Promise 对象,内部直接调用了 node 的 explorer-manager 下的 moveAction 方法。

typescript 复制代码
'use server'
import { moveAction as sysMoveAction } from '@/explorer-manager/src/main.mjs'

export const moveAction: (path: string, new_path: string) => Promise<{ message: string; status: string }> = async (
  path,
  new_path,
) => {
  try {
    await sysMoveAction(path, new_path)

    return Promise.resolve({ status: 'ok', message: '移动成功' })
  } catch (err: any) {
    return Promise.resolve({ status: 'error', message: '移动失败' })
  }
}

观察浏览器开发者工具的"网络"信息时,Next.js 自动将该方法生成一个 API 接口,使用 fetch 的 post 的形式请求当前页面地址。

实际上还是客户端使用 fetch 请求服务端,只是开发者可以省略创建一个 API 路由的过程。

剩下的 "创建文件夹、删除"也是一样的流程,Node.js 分别创建 mkdirSync 创建文件夹、rmSync 删除文件方法。

Next.js 创建两个按钮,当点击按钮时,直接调用该方法,传入需要创建的文件名称、删除的文件路径即可。

server action 的方法默认为一个 Promise 对象,方法内 return 的则为 Promise 的数据。

可以使用 await serverAction or serverAction.then() 来读取 return 的数据。

删除菜单按钮

less 复制代码
      {
        icon: <DeleteOutlined />,
        label: '删除',
        key: 'delete',
        onClick: () => {
          modal.confirm({
            title: `确认删除?`,
            icon: <ExclamationCircleOutlined />,
            content: item.name,
            okText: '删除',
            cancelText: '取消',
            onOk: async () => {
              deleteAction(path).then(() => {
                deleteItemAction(item.name)
              })
            },
          })
        },
      }

创建文件,在 antd Form 的 onFinish 回调调用

ini 复制代码
const CreateFolderForm: React.FC = () => {
  const { update } = useUpdateReaddirList()
  const { message: appMessage } = App.useApp()
  const { replace_pathname } = useReplacePathname()

  return (
    <Form
      labelCol={{ span: 2 }}
      initialValues={{ dir_name: '新建文件夹' }}
      onFinish={(values) => {
        const { dir_name } = values

        createFolder([replace_pathname, dir_name].join('/'))
          .then(({ status, message }) => {
            if (status === 'error') {
              return Promise.reject({ status, message })
            }
            update()
            appMessage.success('新建文件夹成功').then()
          })
          .catch(({ message }) => {
            appMessage.error(`新建文件夹失败: ${message}`).then()
          })
      }}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item name="dir_name" rules={[{ required: true, message: '请输入文件夹名称' }]}>
        <Input />
      </Form.Item>

      <Form.Item>
        <Flex justify="flex-end">
          <SubmitBtn>确定</SubmitBtn>
        </Flex>
      </Form.Item>
    </Form>
  )
}

效果

git-repo

yangWs29/share-explorer

相关推荐
fruge42 分钟前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
demi_meng5 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
千码君20166 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20098 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔8 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼8 小时前
JavaWeb_p165部门管理
java·开发语言·前端
90后的晨仔8 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔8 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀8 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP9 小时前
Ajax 详解
java·前端·ajax·javaweb