投资集团网站建设,网站优化建设公司,集团门户,企业官网建站的流程文章目录 一、项目起航#xff1a;项目初始化与配置二、React 与 Hook 应用#xff1a;实现项目列表三、TS 应用#xff1a;JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook… 文章目录 一、项目起航项目初始化与配置二、React 与 Hook 应用实现项目列表三、TS 应用JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook路由与 URL 状态管理八、用户选择器与项目编辑功能九、深入React 状态管理与Redux机制十、用 react-query 获取数据管理缓存十一、看板页面及任务组页面开发1~34~67891011.排序乐观更新12.任务组页面 (上) 学习内容来源React React Hook TS 最佳实践-慕课网 相对原教程我在学习开始时2023.03采用的是当前最新版本
项版本react react-dom^18.2.0react-router react-router-dom^6.11.2antd^4.24.8commitlint/cli commitlint/config-conventional^17.4.4eslint-config-prettier^8.6.0husky^8.0.3lint-staged^13.1.2prettier2.8.4json-server0.17.2craco-less^2.0.0craco/craco^7.1.0qs^6.11.0dayjs^1.11.7react-helmet^6.1.0types/react-helmet^6.1.6react-query^6.1.0welldone-software/why-did-you-render^7.0.1emotion/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 十一、看板页面及任务组页面开发二 78 十一、看板页面及任务组页面开发三 910 十一、看板页面及任务组页面开发四 11.排序乐观更新
新建 src\utils\reorder.ts 这部分视频没有详细讲。。。之后项目中如果用到可以深挖一下
/*** 在本地对排序进行乐观更新* param fromId 要排序的项目的id* param type before | after* param referenceId 参照id* param list 要排序的列表, 比如tasks, kanbans*/
export const reorder ({fromId,type,referenceId,list,
}: {list: { id: number }[];fromId: number;type: after | before;referenceId: number;
}) {const copiedList [...list];// 找到fromId对应项目的下标const movingItemIndex copiedList.findIndex((item) item.id fromId);if (!referenceId) {return insertAfter([...copiedList], movingItemIndex, copiedList.length - 1);}const targetIndex copiedList.findIndex((item) item.id referenceId);const insert type after ? insertAfter : insertBefore;return insert([...copiedList], movingItemIndex, targetIndex);
};/*** 在list中把from放在to的前边* param list* param from* param to*/
const insertBefore (list: unknown[], from: number, to: number) {const toItem list[to];const removedItem list.splice(from, 1)[0];const toIndex list.indexOf(toItem);list.splice(toIndex, 0, removedItem);return list;
};/*** 在list中把from放在to的后面* param list* param from* param to*/
const insertAfter (list: unknown[], from: number, to: number) {const toItem list[to];const removedItem list.splice(from, 1)[0];const toIndex list.indexOf(toItem);list.splice(toIndex 1, 0, removedItem);return list;
};编辑 src\utils\use-optimistic-options.ts(在之前写的配置中调用完成乐观更新):
...
export const useReorderViewboardConfig (queryKey: QueryKey) useConfig(queryKey, (target, old) reorder({ list: old, ...target }));export const useReorderTaskConfig (queryKey: QueryKey) useConfig(queryKey, (target, old) {const orderedList reorder({ list: old, ...target }) as Task[];return orderedList.map((item) item.id target.fromId? { ...item, kanbanId: target.toKanbanId }: item);});由于 task 的排序有可能是跨 面板 的因此会复杂一些 查看效果发现在拖拽到其他面板后若是原面板为空拖不回去了。。。因此需要为 DropChild 加一个最小高度
编辑 src\screens\ViewBoard\components\ViewboardCloumn.tsx:
...
export const ViewboardColumn React.forwardRef...((...) {...return (Container {...props} ref{ref}...TasksContainerDrop {...}DropChild style{{minHeight: 5px}}.../DropChild/DropCreateTask kanbanId{viewboard.id} //TasksContainer/Container);
});
...至此拖拽大功告成
12.任务组页面 (上)
看板页面开发完接下来是任务组页面
新建 src\types\TaskGroup.ts
export interface TaskGroup {id: number;name: string;projectId: number;// 开始时间start: number;// 结束时间end: number;
}新建 src\utils\taskGroup.ts与看板 Viewboard(kanban) 类似可以复制后修改
import { cleanObject } from utils;
import { useHttp } from ./http;
import { TaskGroup } from types/TaskGroup;
import { QueryKey, useMutation, useQuery } from react-query;
import {useAddConfig,useDeleteConfig,
} from ./use-optimistic-options;export const useTaskGroups (param?: PartialTaskGroup) {const client useHttp();return useQueryTaskGroup[]([taskgroups, param], () client(epics, { data: cleanObject(param || {}) }));
};export const useAddTaskGroup (queryKey: QueryKey) {const client useHttp();return useMutation((params: PartialTaskGroup) client(epics, {method: POST,data: params,}),useAddConfig(queryKey));
};export const useDeleteTaskGroup (queryKey: QueryKey) {const client useHttp();return useMutation((id?: number) client(epics/${id}, {method: DELETE,}),useDeleteConfig(queryKey));
};新建 src\screens\TaskGroup\utils.ts:
import { useProjectIdInUrl } from screens/ViewBoard/utils;export const useTaskGroupSearchParams () ({projectId: useProjectIdInUrl(),
});export const useTaskGroupsQueryKey () [taskgroups,useTaskGroupSearchParams(),
];修改 src\types\Task.ts(属性字段需要和实际数据一致。。。)
export interface Task {id: number;name: string;projectId: number;processorId: number; // 经办人epicId: number; // 任务组(原 taskGroupId)kanbanId: number;typeId: number; // bug or tasknote: string;
}编辑 src\screens\TaskGroup\index.tsx之前新建路由时创建过页面布局有一部分与看板相同可以拿过来 src\screens\ViewBoard\index.tsx
import { Row, ViewContainer } from components/lib;
import { useProjectInUrl } from screens/ViewBoard/utils;
import { useTaskGroups } from utils/taskGroup;
import { useTaskGroupSearchParams, useTaskGroupsQueryKey } from ./utils;
import { Button, List, Modal } from antd;
import dayjs from dayjs;
import { useTasks } from utils/task;
import { Link } from react-router-dom;
import { TaskGroup } from types/TaskGroup;
import { useState } from react;export const TaskGroupIndex () {const { data: currentProject } useProjectInUrl();const { data: taskGroups } useTaskGroups(useTaskGroupSearchParams());const { data: tasks } useTasks({ projectId: currentProject?.id });return (ViewContainerRow between{true}h1{currentProject?.name}任务组/h1Button onClick{() setEpicCreateOpen(true)} type{link}创建任务组/Button/RowListstyle{{ overflow: scroll }}dataSource{taskGroups}itemLayout{vertical}renderItem{(taskGroup) (List.ItemList.Item.Metatitle{Row between{true}span{taskGroup.name}/spanButton onClick{() {}} type{link}删除/Button/Row}description{divdiv开始时间{dayjs(taskGroup.start).format(YYYY-MM-DD)}/divdiv结束时间{dayjs(taskGroup.end).format(YYYY-MM-DD)}/div/div}/div{tasks?.filter((task) task.epicId taskGroup.id).map((task) (Linkto{/projects/${currentProject?.id}/viewboard?editingTaskId${task.id}}key{task.id}{task.name}/Link))}/div/List.Item)}//ViewContainer);
};查看页面效果点击对应任务会跳转到看板并打开任务编辑窗口
编辑 src\screens\TaskGroup\index.tsx新增删除任务组功能
...
import { useDeleteTaskGroup, useTaskGroups } from utils/taskGroup;export const TaskGroupIndex () {...const { mutate: deleteTaskGroup } useDeleteTaskGroup(useTaskGroupsQueryKey());const confirmDeleteEpic (taskGroup: TaskGroup) {Modal.confirm({title: 确定删除项目组${taskGroup.name},content: 点击确定删除,okText: 确定,onOk() {deleteTaskGroup(taskGroup.id);},});};return (ViewContainerRow between{true}.../RowListstyle{{ overflow: scroll }}dataSource{taskGroups}itemLayout{vertical}renderItem{(taskGroup) (List.ItemList.Item.Metatitle{Row between{true}span{taskGroup.name}/spanButton onClick{() confirmDeleteEpic(taskGroup)} type{link}删除/Button/Row}description{...}/div.../div/List.Item)}//ViewContainer);
};查看页面可以正常删除任务组建议功能尝试放到完成创建功能之后再尝试你懂的。。。 部分引用笔记还在草稿阶段敬请期待。。。
