【实战】十一、看板页面及任务组页面开发（三） —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（二十五）

news2024/11/23 13:46:56

文章目录

    • 一、项目起航：项目初始化与配置
    • 二、React 与 Hook 应用：实现项目列表
    • 三、TS 应用：JS神助攻 - 强类型
    • 四、JWT、用户认证与异步请求
    • 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式
    • 六、用户体验优化 - 加载中和错误状态处理
    • 七、Hook，路由，与 URL 状态管理
    • 八、用户选择器与项目编辑功能
    • 九、深入React 状态管理与Redux机制
    • 十、用 react-query 获取数据，管理缓存
    • 十一、看板页面及任务组页面开发
      • 1~3
      • 4~6
      • 7.编辑任务功能
      • 8.看板和任务删除功能

学习内容来源：React + React Hook + TS 最佳实践-慕课网

相对原教程，我在学习开始时（2023.03）采用的是当前最新版本：

项版本
react & react-dom^18.2.0
react-router & react-router-dom^6.11.2
antd^4.24.8
@commitlint/cli & @commitlint/config-conventional^17.4.4
eslint-config-prettier^8.6.0
husky^8.0.3
lint-staged^13.1.2
prettier2.8.4
json-server0.17.2
craco-less^2.0.0
@craco/craco^7.1.0
qs^6.11.0
dayjs^1.11.7
react-helmet^6.1.0
@types/react-helmet^6.1.6
react-query^6.1.0
@welldone-software/why-did-you-render^7.0.1
@emotion/react & @emotion/styled^11.10.6

具体配置、操作和内容会有差异，“坑”也会有所不同。。。

一、项目起航：项目初始化与配置

  • 一、项目起航：项目初始化与配置

二、React 与 Hook 应用：实现项目列表

  • 二、React 与 Hook 应用：实现项目列表

三、TS 应用：JS神助攻 - 强类型

  • 三、 TS 应用：JS神助攻 - 强类型

四、JWT、用户认证与异步请求

  • 四、 JWT、用户认证与异步请求(上)
  • 四、 JWT、用户认证与异步请求(下)

五、CSS 其实很简单 - 用 CSS-in-JS 添加样式

  • 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(上)
  • 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(下)

六、用户体验优化 - 加载中和错误状态处理

  • 六、用户体验优化 - 加载中和错误状态处理(上)
  • 六、用户体验优化 - 加载中和错误状态处理(中)
  • 六、用户体验优化 - 加载中和错误状态处理(下)

七、Hook，路由，与 URL 状态管理

  • 七、Hook，路由，与 URL 状态管理(上)
  • 七、Hook，路由，与 URL 状态管理(中)
  • 七、Hook，路由，与 URL 状态管理(下)

八、用户选择器与项目编辑功能

  • 八、用户选择器与项目编辑功能(上)
  • 八、用户选择器与项目编辑功能(下)

九、深入React 状态管理与Redux机制

  • 九、深入React 状态管理与Redux机制(一)
  • 九、深入React 状态管理与Redux机制(二)
  • 九、深入React 状态管理与Redux机制(三)
  • 九、深入React 状态管理与Redux机制(四)
  • 九、深入React 状态管理与Redux机制(五)

十、用 react-query 获取数据，管理缓存

  • 十、用 react-query 获取数据，管理缓存（上）
  • 十、用 react-query 获取数据，管理缓存（下）

十一、看板页面及任务组页面开发

1~3

  • 十一、看板页面及任务组页面开发（一）

4~6

  • 十一、看板页面及任务组页面开发（二）

7.编辑任务功能

接下来新建编辑任务的组件：

先准备好调用编辑任务接口和获取任务详情的 Hook，编辑 src\utils\task.ts：

...
import { useAddConfig, useEditConfig } from "./use-optimistic-options";

export const useEditTask = (queryKey: QueryKey) => {
  const client = useHttp();
  return useMutation(
    (params: Partial<Task>) =>
      client(`tasks/${params.id}`, {
        method: "PATCH",
        data: params,
      }),
    useEditConfig(queryKey)
  );
};

export const useTask = (id?: number) => {
  const client = useHttp();
  return useQuery<Task>(["task", id], () => client(`tasks/${id}`), {
    enabled: Boolean(id),
  });
};

编辑 src\screens\ViewBoard\utils.ts(新增 useTasksModal)：

...
// import { useDebounce } from "utils";
import { useTask } from "utils/task";
...

export const useTasksSearchParams = () => {
  const [param] = useUrlQueryParam([
    "name",
    "typeId",
    "processorId",
    "tagId",
  ]);
  const projectId = useProjectIdInUrl();
  // const debouncedName = useDebounce(param.name)
  return useMemo(
    () => ({
      projectId,
      typeId: Number(param.typeId) || undefined,
      processorId: Number(param.processorId) || undefined,
      tagId: Number(param.tagId) || undefined,
      // name: debouncedName,
      name: param.name,
    }),
    // [projectId, param, debouncedName]
    [projectId, param]
  );
};

...

export const useTasksModal = () => {
  const [{ editingTaskId }, setEditingTaskId] = useUrlQueryParam(['editingTaskId'])
  const { data: editingTask, isLoading } = useTask(Number(editingTaskId))
  const startEdit = useCallback((id: number) => {
    setEditingTaskId({editingTaskId: id})
  }, [setEditingTaskId])
  const close = useCallback(() => {
    setEditingTaskId({editingTaskId: ''})
  }, [setEditingTaskId])
  return {
    editingTaskId,
    editingTask,
    startEdit,
    close,
    isLoading
  }
}

视频中使用 useDebounce 使得完全停止输入后才开始搜索，避免输入过程中频繁搜索造成系统资源浪费，且影响用户体验，博主这样更改后中文输入法无法正常使用。。。后续再解决

新建组件：src\screens\ViewBoard\components\taskModal.tsx：

import { useForm } from "antd/lib/form/Form"
import { useTasksModal, useTasksQueryKey } from "../utils"
import { useEditTask } from "utils/task"
import { useEffect } from "react"
import { Form, Input, Modal } from "antd"
import { UserSelect } from "components/user-select"
import { TaskTypeSelect } from "components/task-type-select"

const layout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16}
}

export const TaskModal = () => {
  const [form] = useForm()
  const { editingTaskId, editingTask, close } = useTasksModal()
  const { mutateAsync: editTask, isLoading: editLoading } = useEditTask(useTasksQueryKey())

  const onCancel = () => {
    close()
    form.resetFields()
  }

  const onOk = async () => {
    await editTask({...editingTask, ...form.getFieldsValue()})
    close()
  }

  useEffect(() => {
    form.setFieldsValue(editingTask)
  }, [form, editingTask])

  return <Modal
    forceRender={true}
    onCancel={onCancel}
    onOk={onOk}
    okText={"确认"}
    cancelText={"取消"}
    confirmLoading={editLoading}
    title={"编辑任务"}
    open={!!editingTaskId}
  >
    <Form {...layout} initialValues={editingTask} form={form}>
      <Form.Item
        label={"任务名"}
        name={"name"}
        rules={[{ required: true, message: "请输入任务名" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item label={"经办人"} name={"processorId"}>
        <UserSelect defaultOptionName={"经办人"} />
      </Form.Item>
      <Form.Item label={"类型"} name={"typeId"}>
        <TaskTypeSelect />
      </Form.Item>
    </Form>
  </Modal>
}

注意：与 Drawer 一样，在Modal 组件中使用通过 useForm() 提取的 form 绑定的 Form 时，需要添加 forceRender 属性，否则在页面打开时绑定不到会有报错，参见：【实战】React 实战项目常见报错 —— Instance created by ‘useForm’ is not connected to any Form element. Forget…

编辑：src\screens\ViewBoard\index.tsx（引入 TaskModal）：

...
import { TaskModal } from "./components/taskModal";

export const ViewBoard = () => {
  ...

  return (
    <ViewContainer>
      ...
      <TaskModal/>
    </ViewContainer>
  );
};
...

编辑：src\screens\ViewBoard\components\ViewboardCloumn.tsx（引入 useTasksModal 使得点击 任务卡片 可以打开 TaskModal 进行编辑）：

...
import { useTasksModal, useTasksSearchParams } from "../utils";
...

export const ViewboardColumn = ({ viewboard }: { viewboard: Viewboard }) => {
  ...
  const { startEdit } = useTasksModal()
  return (
    <Container>
      ...
      <TasksContainer>
        {tasks?.map((task) => (
          <Card onClick={() => startEdit(task.id)} style={{ marginBottom: "0.5rem", cursor: 'pointer' }} key={task.id}>
            ...
          </Card>
        ))}
        ...
      </TasksContainer>
    </Container>
  );
};
...

查看功能和效果，点击 任务卡片 后 TaskModal 出现，编辑并确认后即可看到修改后的任务（用了乐观更新，完全无感）：
在这里插入图片描述

8.看板和任务删除功能

接下来先实现一个小功能，搜索结果中关键字高亮

新建 src\screens\ViewBoard\components\mark.tsx：

export const Mark = ({name, keyword}: {name: string, keyword: string}) => {
  if(!keyword) {
    return <>{name}</>
  }
  const arr = name.split(keyword)
  return <>
    {
      arr.map((str, index) => <span key={index}>
        {str}
        {
          index === arr.length -1 ? null : <span style={{ color: '#257AFD' }}>{keyword}</span>
        }
      </span>)
    }
  </>
}

编辑 src\screens\ViewBoard\components\ViewboardCloumn.tsx（引入 Task 并将 TaskCard 单独提取出来）：

...
import { Task } from "types/Task";
import { Mark } from "./mark";

...

const TaskCard = ({task}: {task: Task}) => {
  const { startEdit } = useTasksModal();
  const { name: keyword } = useTasksSearchParams()
  return <Card
    onClick={() => startEdit(task.id)}
    style={{ marginBottom: "0.5rem", cursor: "pointer" }}
    key={task.id}
  >
    <p>
      <Mark keyword={keyword} name={task.name}/>
    </p>
    <TaskTypeIcon id={task.id} />
  </Card>
}

export const ViewboardColumn = ({ viewboard }: { viewboard: Viewboard }) => {
  const { data: allTasks } = useTasks(useTasksSearchParams());
  const tasks = allTasks?.filter((task) => task.kanbanId === viewboard.id);
  return (
    <Container>
      <h3>{viewboard.name}</h3>
      <TasksContainer>
        {tasks?.map((task) => <TaskCard task={task}/>)}
        <CreateTask kanbanId={viewboard.id} />
      </TasksContainer>
    </Container>
  );
};
...

查看效果：

在这里插入图片描述

下面开始开发删除功能

编辑 src\utils\viewboard.ts（创建并导出 useDeleteViewBoard）：

...
export const useDeleteViewBoard = (queryKey: QueryKey) => {
  const client = useHttp();
  return useMutation(
    (id?: number) =>
      client(`kanbans/${id}`, {
        method: "DELETE",
      }),
    useDeleteConfig(queryKey)
  );
};

编辑 src\screens\ViewBoard\components\ViewboardCloumn.tsx：

...
import { Button, Card, Dropdown, MenuProps, Modal, Row } from "antd";
import { useDeleteViewBoard } from "utils/viewboard";

...

export const ViewboardColumn = ({ viewboard }: { viewboard: Viewboard }) => {
  const { data: allTasks } = useTasks(useTasksSearchParams());
  const tasks = allTasks?.filter((task) => task.kanbanId === viewboard.id);
  return (
    <Container>
      <Row>
        <h3>{viewboard.name}</h3>
        <More viewboard={viewboard}/>
      </Row>
      <TasksContainer>
        {tasks?.map((task) => <TaskCard task={task}/>)}
        <CreateTask kanbanId={viewboard.id} />
      </TasksContainer>
    </Container>
  );
};

const More = ({ viewboard }: { viewboard: Viewboard }) => {
  const {mutateAsync: deleteViewBoard} = useDeleteViewBoard(useViewBoardQueryKey())
  const startDelete = () => {
    Modal.confirm({
      okText: '确定',
      cancelText: '取消',
      title: '确定删除看板吗？',
      onOk() {
        deleteViewBoard(viewboard.id)
      }
    })
  }
  const items: MenuProps["items"] = [
    {
      key: 1,
      label: "删除",
      onClick: startDelete,
    },
  ];
  return <Dropdown menu={{ items }}>
    <Button type="link" onClick={(e) => e.preventDefault()}>
      ...
    </Button>
  </Dropdown>
}
...

测试一下删除看板，功能正常

下面是删除任务功能

编辑 src\utils\task.ts（创建并导出 useDeleteTask）：

...
export const useDeleteTask = (queryKey: QueryKey) => {
  const client = useHttp();
  return useMutation(
    (id?: number) =>
      client(`tasks/${id}`, {
        method: "DELETE",
      }),
    useDeleteConfig(queryKey)
  );
};

编辑 src\screens\ViewBoard\components\taskModal.tsx：

...
import { useDeleteTask, useEditTask } from "utils/task";

export const TaskModal = () => {
  ...
  const { mutateAsync: deleteTask } = useDeleteTask(useTasksQueryKey());
  ...

  const startDelete = () => {
    close();
    Modal.confirm({
      okText: '确定',
      cancelText: '取消',
      title: '确定删除看板吗？',
      onOk() {
        deleteTask(Number(editingTaskId));
      }
    })
  }

  return (
    <Modal {...}>
      <Form {...}>
        ...
      </Form>
      <div style={{ textAlign: 'right' }}>
        <Button style={{fontSize: '14px'}} size="small" onClick={startDelete}>删除</Button>
      </div>
    </Modal>
  );
};

测试一下删除任务，功能正常

部分引用笔记还在草稿阶段，敬请期待。。。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/910667.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Docker容器：docker数据管理、镜像的创建及dockerfile案例

Docker容器：docker数据管理、镜像的创建及dockerfile案例

文章目录 一、docker数据管理1.为何需要docker数据管理2.数据管理类型3.数据卷4.数据卷容器5.容器的互联 二.docker镜像的三种创建方法1.基于现有镜像创建1.1 启动镜像1.2 生成新镜像 2.基于本地模板创建2.1 OPENVZ 下载模板2.2 导入容器生成镜像 3.基于dockerfile创建3.1 dock…
阅读更多...
基于Jenkins构建生产CICD环境、jenkins安装

基于Jenkins构建生产CICD环境、jenkins安装

目录 Jenkins简介 安装配置Jenkins Jenkins简介 Jenkins是一个用Java编写的开源的持续集成工具。在与Oracle发生争执后&#xff0c;项目从Hudson项目独立。官方网站&#xff1a;https://jenkins.io/。 Jenkins提供了软件开发的持续集成服务。它运行在Servlet容器中&#xff…
阅读更多...
Web 3.0 安全风险，您需要了解这些内容

Web 3.0 安全风险，您需要了解这些内容

随着技术的不断发展&#xff0c;Web 3.0 正在逐渐成为现实&#xff0c;为我们带来了许多新的机遇和挑战。然而&#xff0c;与任何新技术一样&#xff0c;Web 3.0 也伴随着一系列安全风险&#xff0c;这些风险需要被认真对待。在这篇文章中&#xff0c;我们将探讨一些与Web 3.0 …
阅读更多...
【excel密码】如何禁止移动、删除excel工作表？

【excel密码】如何禁止移动、删除excel工作表？

想要工作表不被他人移动、删除等操作&#xff0c;该如何设置&#xff1f;今天分享如何设置才能够禁止excel工作表移动、删除。 打开excel工作表&#xff0c;点击工具栏中的审阅 – 保护工作簿 点击保护工作簿之后&#xff0c;会有弹框出现&#xff0c;输入想要设置的excel密码…
阅读更多...
新的后端渲染：服务器驱动UI

新的后端渲染：服务器驱动UI

通过API发送UI是一种彻底的新方法&#xff0c;将改变传统的UI开发。 一项正在改变我们对用户界面 (UI) 的看法的技术是通过 API 发送 UI&#xff0c;也称为服务器驱动UI。这种方法提供了新水平的活力和灵活性&#xff0c;正在改变 UI 开发的传统范例。 服务器驱动 UI 不仅仅是…
阅读更多...
Web 事务管理

Web 事务管理

Web在执行的过程中需要保证一致性&#xff0c;从而需要引入事务来对SQL事件进行事务的管理。具体而言可以参考这篇博客MySQL事务(transaction)。 具体而言&#xff0c;我们获得一个这样的需求&#xff0c;删除一个部门&#xff0c;在删除部门的过程中需要删除部门下的所有员工…
阅读更多...
无人机航管应答机 ping200XR

无人机航管应答机 ping200XR

产品概述 ping200XR是一个完整的系统&#xff0c;旨在满足航管应答器和自动相关监视广播(ADS-B)的要求&#xff0c;在管制空域操作无人航空系统(UAS)。该系统完全可配置为模式A&#xff0c;模式C&#xff0c;模式S转发器和扩展ADS-B发射机的任何组合。ping200XR包括一个精度超…
阅读更多...
几个Web自动化测试框架的比较：Cypress、Selenium和Playwright

几个Web自动化测试框架的比较：Cypress、Selenium和Playwright

介绍&#xff1a;Web自动化测试框架对于确保Web应用程序的质量和可靠性至关重要。它们帮助开发人员和测试人员自动执行重复性任务&#xff0c;跨多个浏览器和平台执行测试&#xff0c;并在开发早期发现问题。 以下仅代表作者观点&#xff1a; 本文探讨来3种流行的Web自动化测…
阅读更多...
怎么把视频转换成mp4格式？分享几种视频格式转换方法

怎么把视频转换成mp4格式？分享几种视频格式转换方法

将视频格式转换成MP4格式的好处包括&#xff1a;更广泛的兼容性&#xff0c;因为MP4是一种通用格式&#xff0c;大多数设备和平台都支持&#xff1b;更小的文件大小&#xff0c;因为MP4使用高效的压缩算法&#xff0c;可以将视频文件压缩到更小的大小&#xff1b;更好的视频质量…
阅读更多...
Linux常用命令——diff3命令

Linux常用命令——diff3命令

在线Linux命令查询工具 diff3 比较3个文件不同的地方 补充说明 diff3命令用于比较3个文件&#xff0c;将3个文件的不同的地方显示到标准输出。 语法 diff3(选项)(参数)选项 -a&#xff1a;把所有的文件都当做文本文件按照行为单位进行比较&#xff0c;即给定的文件不是文…
阅读更多...
element-ui中二次封装一个带select的form组件

element-ui中二次封装一个带select的form组件

带select的form组件 样式 代码 <template><el-form-item label"是否有" class"append" prop"tag"><el-form-itemprop"isShare"><el-select v-model"query.tag"><el-option v-for"(item, …
阅读更多...
Shell编程基础02

Shell编程基础02

0目录 1.case语法 2.grep 3.sed 4.awk 5.linux安装mysql 1.case语法 创建一个txt文档 执行 查询用户名 case 用法 写一个计算器脚本 加入函数 补充查看进程命名 2.find grep命令 Find 查询当前目录下 以sh结尾的文件 Grep 查询义开头的 或者加入正则表达…
阅读更多...
AIGC 施展“物理魔法”，3D视觉突破“精度极限”

AIGC 施展“物理魔法”，3D视觉突破“精度极限”

点击关注 文&#xff5c;姚悦&#xff0c;编&#xff5c;王一粟 “没有艺术&#xff0c;全是物理&#xff01;物理让你快乐&#xff0c;不是吗&#xff1f;” 近日&#xff0c;在世界计算机图形会议 SIGGRAPH 2023 上&#xff0c;英伟达创始人、CEO 黄仁勋宣布&#xff0c;将…
阅读更多...
小型便携式气象站的功能特点

小型便携式气象站的功能特点

小型便携式气象站是一种&#xff0c;集多种传感器和自动化功能于一体的气象观测设备&#xff0c;具有便携性和自动化的特点。能够自动测量和记录各项气象参数&#xff0c;为人们提供实时气象数据。 小型便携式气象站的功能特点如下&#xff1a; 1.小型便携式气象站轻便便携&a…
阅读更多...
秒懂算法│博弈论

秒懂算法│博弈论

博弈论是二人或多人在平等的对局中各自利用对方的策略变换自己的对抗策略,达到取胜目标的理论。博弈论是研究互动决策的理论。博弈可以分析自己与对手的利弊关系,从而确立自己在博弈中的优势,因此有不少博弈理论,可以帮助对弈者分析局势,从而采取相应策略,最终达到取胜的目的。…
阅读更多...
StreamingWarehouse的一些思考和未来趋势

StreamingWarehouse的一些思考和未来趋势

300万字&#xff01;全网最全大数据学习面试社区等你来&#xff01; 一篇笔记。 以Hudi、Iceberg、Paimon这几个框架为例&#xff0c;它们支持高效的数据流/批读写、数据回溯以及数据更新。具备一些传统的实时和离线数仓不具备的特性&#xff0c;主要有几个方面&#xff1a; 这…
阅读更多...
【30天熟悉Go语言】10 Go异常处理机制

【30天熟悉Go语言】10 Go异常处理机制

作者&#xff1a;秃秃爱健身&#xff0c;多平台博客专家&#xff0c;某大厂后端开发&#xff0c;个人IP起于源码分析文章 &#x1f60b;。 源码系列专栏&#xff1a;Spring MVC源码系列、Spring Boot源码系列、SpringCloud源码系列&#xff08;含&#xff1a;Ribbon、Feign&…
阅读更多...
2023国赛数学建模A题B题C题D题资料思路汇总 高教社杯

2023国赛数学建模A题B题C题D题资料思路汇总 高教社杯

本次比赛我们将会全程更新思路模型及代码&#xff0c;大家查看文末名片获取 之前国赛相关的资料和助攻可以查看 2022数学建模国赛C题思路分析_2022年数学建模c题思路_UST数模社_的博客-CSDN博客 2022国赛数学建模A题B题C题D题资料思路汇总 高教社杯_2022国赛a题题目_UST数模…
阅读更多...
三维模型OSGB格式轻量化的数据压缩与性能平衡分析

三维模型OSGB格式轻量化的数据压缩与性能平衡分析

三维模型OSGB格式轻量化的数据压缩与性能平衡分析 在三维模型应用中&#xff0c;OSGB格式轻量化处理是一种常见的技术手段&#xff0c;它可以通过数据压缩、简化、滤波等操作&#xff0c;降低三维模型数据的存储空间和传输带宽需求&#xff0c;提高应用程序的性能和用户体验。但…
阅读更多...
python35种绘图函数总结，3D、统计、流场，实用性拉满

python35种绘图函数总结，3D、统计、流场，实用性拉满

文章目录 基础图误差线三维图等高线图场图统计图非结构坐标图 基础图 下面这8种图像一般只有两组坐标&#xff0c;直观容易理解。 函数坐标参数图形类别plotx,y曲线图stackplotx,y散点图stemx,y茎叶图scatterx,y散点图polarx,y极坐标图stepx,y步阶图barx,y条形图barhx,y横向条…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023