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

文章目录

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

学习内容来源：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.看板列表开发准备工作

之前的项目详情进入看板页的路由有个小问题，点击浏览器返回按钮回不去，原因如下：

  • 路由列表是栈结构，每访问一个路由都会 push 一个新路由进去，当点击返回，就会将上一个路由置于栈顶；而进入项目详情页(从'projects'到'projects/1')默认重定向子路由是看板页(projects/1/viewboard)，返回上一个路由时，默认又会重定向到看板页路由。列表栈示例如下：
  • ['projects', 'projects/1', 'projects/1/viewboard']

接下来解决一下这个问题，编辑 src\screens\ProjectDetail\index.tsx (重定向标签新增属性 replace，在重定向时直接替换原路由)：

...
export const ProjectDetail = () => {return (<div>...<Routes>...<Route index element={<Navigate to="viewboard" replace/>} /></Routes></div>);
};

为了方便后续类型统一调用，将 src\screens\ProjectList\components\List.tsx 中 interface Project 提取到 src\types 目录下

视频中 是用 WebStorm ，博主用的是 VSCode：

  • 在需要重构的变量上右击，选择重构（快捷键 Ctrl + Shift + R），选择 Move to a new file,默认同变量名的文件会创建在当前文件所在同一级目录下，其他引用位置也相应改变，涉及引用位置：
    • src\utils\project.ts
    • src\screens\ProjectList\components\SearchPanel.tsx
    • src\screens\ProjectList\components\List.tsx
  • 拖动新生成的文件到 src\types 目录下，可以看到其他引用位置也相应改变
  • 相关功能文档：TypeScript Programming with Visual Studio Code

src\screens\ProjectList\components\SearchPanel.tsx 中 interface User 也执行同样操作，涉及引用位置：

  • src\screens\ProjectList\components\SearchPanel.tsx
  • src\screens\ProjectList\components\List.tsx
  • src\auth-provider.ts
  • src\context\auth-context.tsx
  • src\utils\use-users.ts

看板页还需要以下两个类型，新建一下：

  • src\types\Viewboard.ts:
export interface Viewboard {id: number;name: string;projectId: number;
}
  • src\types\Task.ts
export interface Task {id: number;name: string;projectId: number;processorId: number; // 经办人taskGroupId: number; // 任务组kanbanId: number;typeId: number;      // bug or tasknote: string;
}

接下来创建数据请求的 hook：

src\utils\viewboard.ts:

import { cleanObject } from "utils";
import { useHttp } from "./http";
import { Viewboard } from "types/Viewboard";
import { useQuery } from "react-query";export const useViewboards = (param?: Partial<Viewboard>) => {const client = useHttp();return useQuery<Viewboard[]>(["viewboards", param], () =>client("kanbans", { data: cleanObject(param || {}) }));
};

src\utils\task.ts:

import { cleanObject } from "utils";
import { useHttp } from "./http";
import { Task } from "types/Task";
import { useQuery } from "react-query";export const useTasks = (param?: Partial<Task>) => {const client = useHttp();return useQuery<Task[]>(["tasks", param], () =>client("tasks", { data: cleanObject(param || {}) }));
};

2.看板列表初步开发

接下来开始开发看板列表，展示需要用到项目数据，可以提取一个从 url 获取 projectId，再用 id 获取项目数据的 hook

新建 src\screens\ViewBoard\utils.ts：

import { useLocation } from "react-router"
import { useProject } from "utils/project"export const useProjectIdInUrl = () => {const { pathname } = useLocation()const id = pathname.match(/projects\/(\d+)/)?.[1]return Number(id)
}export const useProjectInUrl = () => useProject(useProjectIdInUrl())export const useViewBoardSearchParams = () => ({projectId: useProjectIdInUrl()})export const useViewBoardQueryKey = () => ['viewboards', useViewBoardSearchParams()]export const useTasksSearchParams = () => ({projectId: useProjectIdInUrl()})export const useTasksQueryKey = () => ['tasks', useTasksSearchParams()]

注意：每一个 useXXXQueryKey 都要确保返回值第一项 与后续列表请求 useXXX 中 useQuery 的第一个参数保持一致，否则后续增删改都无法正常自动重新请求列表，问题排查比较困难

为看板定制一个展示列组件（任务列表），供每个类型来使用

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

import { Viewboard } from "types/Viewboard";
import { useTasks } from "utils/task";
import { useTasksSearchParams } from "../utils";export const ViewboardColumn = ({viewboard}:{viewboard: Viewboard}) => {const { data: allTasks } = useTasks(useTasksSearchParams())const tasks = allTasks?.filter(task => task.kanbanId === viewboard.id)return <div><h3>{viewboard.name}</h3>{tasks?.map(task => <div key={task.id}>{task.name}</div>)}</div>
}

编辑 src\screens\ViewBoard\index.tsx：

import { useDocumentTitle } from "utils";
import { useViewboards } from "utils/viewboard";
import { useProjectInUrl, useViewBoardSearchParams } from "./utils";
import { ViewboardColumn } from "./components/ViewboardCloumn"
import styled from "@emotion/styled";export const ViewBoard = () => {useDocumentTitle('看板列表')const {data: currentProject} = useProjectInUrl()const {data: viewboards, } = useViewboards(useViewBoardSearchParams())return <div><h1>{currentProject?.name}看板</h1><ColumnsContainer>{viewboards?.map(vbd => <ViewboardColumn viewboard={vbd} key={vbd.id}/>)}</ColumnsContainer></div>;
};const ColumnsContainer = styled.div`display: flex;overflow: hidden;margin-right: 2rem;
`

通过代码可知：viewboards.map 后 ViewboardColumn 渲染多次，其中 useTasks 也同时执行多次，但是仔细看浏览器开发者工具可发现，相应请求并没有执行多次，而是只执行了一次，这是因为 react-query 的缓存机制（默认两秒内发送的多个key相同且的参数相同的请求只执行最后一次）

访问看板列表可看到如下内容且三种状态任务横向排列即为正常：

待完成
管理登录界面开发开发中
管理注册界面开发
权限管理界面开发
UI开发
自测已完成
单元测试
性能优化

3.添加task, bug 图标

任务的类型接口并不直接返回，而是只返回一个 typeId，并不能明确标识任务类型，需要单独访问接口来获取具体任务类型

新建 src\types\TaskType.ts：

export interface TaskType {id: number;name: string;
}

新建 src\utils\task-type.ts：

import { useHttp } from "./http";
import { useQuery } from "react-query";
import { TaskType } from "types/TaskType";export const useTaskTypes = () => {const client = useHttp();return useQuery<TaskType[]>(["taskTypes"], () =>client("tasks"));
};

将以下两个 svg 文件拷贝到 src\assets

bug.svg
在这里插入图片描述

<svg xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xlinkHref="http://www.w3.org/1999/xlink"><!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch --><title>bug</title><desc>Created with Sketch.</desc><defs/><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="bug" sketch:type="MSArtboardGroup"><g id="Bug" sketch:type="MSLayerGroup" transform="translate(1.000000, 1.000000)"><rect id="Rectangle-36" fill="#E5493A" sketch:type="MSShapeGroup" x="0" y="0" width="14" height="14" rx="2"/><path d="M10,7 C10,8.657 8.657,10 7,10 C5.343,10 4,8.657 4,7 C4,5.343 5.343,4 7,4 C8.657,4 10,5.343 10,7" id="Fill-2" fill="#FFFFFF" sketch:type="MSShapeGroup"/></g></g></g>
</svg>

task.svg
在这里插入图片描述

<svg xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="16px" height="16px" viewBox="0 0 16 16" version="1.1"><!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch --><title>task</title><desc>Created with Sketch.</desc><defs/><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="task" sketch:type="MSArtboardGroup"><g id="Task" sketch:type="MSLayerGroup" transform="translate(1.000000, 1.000000)"><rect id="Rectangle-36" fill="#4BADE8" sketch:type="MSShapeGroup" x="0" y="0" width="14" height="14" rx="2"/><g id="Page-1" transform="translate(4.000000, 4.500000)" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" sketch:type="MSShapeGroup"><path d="M2,5 L6,0" id="Stroke-1"/><path d="M2,5 L0,3" id="Stroke-3"/></g></g></g></g>
</svg>

直接使用可能会有如下报错：

Compiled with problems:XERROR in ./src/assets/task.svgModule build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

把 skety:type 这种类型的标签属性改成 sketchType 驼峰这样才能被 JSX 接受。

  • 编译有问题: ./src/assets/bug.svg 中的错误-慕课网
  • reactjs - SyntaxError: unknown: Namespace tags are not supported by default - Stack Overflow

源 svg 文件 修改后的源码如下：

  • bug.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlinkHref="http://www.w3.org/1999/xlink" xmlnsSketch="http://www.bohemiancoding.com/sketch/ns"><!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch --><title>bug</title><desc>Created with Sketch.</desc><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketchType="MSPage"><g id="bug" sketchType="MSArtboardGroup"><g id="Bug" sketchType="MSLayerGroup" transform="translate(1.000000, 1.000000)"><rect id="Rectangle-36" fill="#E5493A" sketchType="MSShapeGroup" x="0" y="0" width="14" height="14" rx="2"></rect><path d="M10,7 C10,8.657 8.657,10 7,10 C5.343,10 4,8.657 4,7 C4,5.343 5.343,4 7,4 C8.657,4 10,5.343 10,7" id="Fill-2" fill="#FFFFFF" sketchType="MSShapeGroup"></path></g></g></g>
</svg>
  • task.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"xmlnsSketch="http://www.bohemiancoding.com/sketch/ns"><!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch --><title>task</title><desc>Created with Sketch.</desc><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketchType="MSPage"><g id="task" sketchType="MSArtboardGroup"><g id="Task" sketchType="MSLayerGroup" transform="translate(1.000000, 1.000000)"><rect id="Rectangle-36" fill="#4BADE8" sketchType="MSShapeGroup" x="0" y="0" width="14" height="14" rx="2"></rect><g id="Page-1" transform="translate(4.000000, 4.500000)" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" sketchType="MSShapeGroup"><path d="M2,5 L6,0" id="Stroke-1"></path><path d="M2,5 L0,3" id="Stroke-3"></path></g></g></g></g>
</svg>

编辑 src\screens\ViewBoard\components\ViewboardCloumn.tsx（引入图标，并美化）：

import { Viewboard } from "types/Viewboard";
import { useTasks } from "utils/task";
import { useTasksSearchParams } from "../utils";
import { useTaskTypes } from "utils/task-type";
import taskIcon from "assets/task.svg";
import bugIcon from "assets/bug.svg";
import styled from "@emotion/styled";
import { Card } from "antd";const TaskTypeIcon = ({ id }: { id: number }) => {const { data: taskTypes } = useTaskTypes();const name = taskTypes?.find((taskType) => taskType.id === id)?.name;if (!name) {return null;}return <img alt='task-icon' src={name === "task" ? taskIcon : bugIcon} />;
};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) => (<Card style={{marginBottom: '0.5rem'}} key={task.id}><div>{task.name}</div><TaskTypeIcon id={task.id} /></Card>))}</TasksContainer></Container>);
};export const Container = styled.div`min-width: 27rem;border-radius: 6px;background-color: rgb(244, 245, 247);display: flex;flex-direction: column;padding: .7rem .7rem 1rem;margin-right: 1.5rem;
`const TasksContainer = styled.div`overflow: scroll;flex: 1;::-webkit-scrollbar {display: none;}
`

查看效果：
效果图

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

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

docker 安装elasticsearch、kibana

docker 安装elasticsearch、kibana

下载es镜像 docker pull elasticsearch 启动es容器 docker run --name elasticsearch -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" -e ES_JAVA_OPTS"-Xms512m -Xmx512m" -d elasticsearch 验证es界面访问 ​​​​​http://节点ip:9200/ ​…
阅读更多...
一、window配置微软商店中的Ubuntu，及错误解决方法

一、window配置微软商店中的Ubuntu，及错误解决方法

&#xff08;1&#xff09;首先&#xff0c;在微软商店中搜索“Ubuntu”&#xff0c;下载你喜欢的版本(此处) &#xff08;2&#xff09;设置适用于window的Linux子系统&#xff0c;跟着红色方框走 点击“确定”之后&#xff0c;会提示你重启电脑&#xff0c;按要求重启电脑即可…
阅读更多...
LabVIEW对并行机器人结构进行建模仿真

LabVIEW对并行机器人结构进行建模仿真

LabVIEW对并行机器人结构进行建模仿真 为了对复杂机器人结构的数学模型进行建模、搜索、动画和验证&#xff0c;在工业机器人动态行为实验室中&#xff0c;设计并实现了具有五个自由度的单臂型机器人。在研究台上可以区分以下元素&#xff1a;带有直流电机和编码器的机器人;稳…
阅读更多...
揭秘热门工作秘籍：ChatGPT大显身手！轻松提升工作效率的高效Prompt技巧曝光！

揭秘热门工作秘籍：ChatGPT大显身手！轻松提升工作效率的高效Prompt技巧曝光！

目录 01 背景 福利&#xff1a;文末有chat-gpt纯分享&#xff0c;无魔法&#xff0c;无限制 02 AI 可以帮助程序员做什么&#xff1f; 2.1 技术知识总结 2.2 拆解任务 2.3 阅读代码/优化代码 2.4 代码生成 2.5 生成单测 2.6 更多 AI 应用/插件 AIPRM Voice Control for Ch…
阅读更多...
存算分离实践：构建轻量、云中立的大数据平台

存算分离实践：构建轻量、云中立的大数据平台

今天我们将分享社区用户多点 DMALL 的案例。多点 DMALL 是亚洲领先的全渠道数字零售解决方案服务商&#xff0c;目前已与 380 家零售企业达成合作&#xff0c;覆盖 6 个国家和地区。 面对 B 端客户日益增长的企业数据&#xff0c;存算一体的架构显得力不从心。计算资源冗余浪费…
阅读更多...
小白到运维工程师自学之路 第七十三集 （kubernetes应用部署）

小白到运维工程师自学之路 第七十三集 （kubernetes应用部署）

一、安装部署 1、以Deployment YAML方式创建Nginx服务 这个yaml文件在网上可以下载 cat nginx-deployment.yaml apiVersion: apps/v1 #apiVersion是当前配置格式的版本 kind: Deployment #kind是要创建的资源类型&#xff0c;这里是Deploymnet metadata: #metadata是该资源…
阅读更多...
PyTorch翻译官网教程-LANGUAGE MODELING WITH NN.TRANSFORMER AND TORCHTEXT

PyTorch翻译官网教程-LANGUAGE MODELING WITH NN.TRANSFORMER AND TORCHTEXT

官网链接 Language Modeling with nn.Transformer and torchtext — PyTorch Tutorials 2.0.1cu117 documentation 使用 NN.TRANSFORMER 和 TORCHTEXT进行语言建模 这是一个关于训练模型使用nn.Transformer来预测序列中的下一个单词的教程。 PyTorch 1.2版本包含了一个基于论…
阅读更多...
【注解使用】使用@Autowired后提示：Field injection is not recommended（Spring团队不推荐使用Field注入）

【注解使用】使用@Autowired后提示：Field injection is not recommended（Spring团队不推荐使用Field注入）

问题发生场景&#xff1a; 在使用 IDEA 开发 SpringBoot 项目时&#xff0c;在 Controller 类中使用注解 Autowired 注入一个依赖出现了警告提示&#xff0c;查看其他使用该注解的地方同样出现了警告提示。这是怎么回事&#xff1f;由于先去使用了SpringBoot并没有对Spring进行…
阅读更多...
Linux基本知识及常用命令（超全面，超详细）

Linux基本知识及常用命令（超全面，超详细）

Linux系统是一种基于UNIX的开放源码的操作系统&#xff0c;本部分所叙述的Linux更多的是指Linux的内核&#xff0c;其主要职责是对底层硬件的管理控制&#xff0c;内核除对下层硬件进行管理还要对上层的应用提供接口。 接口既包括命令也包括相应的接口函数&#xff0c;命令可以…
阅读更多...
【tool】快捷操作

【tool】快捷操作

最近在弄材料然后文件太深了&#xff0c;交流起来很不方便&#xff0c;做了记录 复制文件路径 复制文件路径步骤&#xff1a; 1、首先按住Shift 鼠标右键单击&#xff0c;弹出&#xff1a;复制为路径 2、快捷键黏贴路径&#xff0c;即可
阅读更多...
Apache Maven：从构建到部署，一站式解决方案

Apache Maven：从构建到部署，一站式解决方案

目录 一、Maven介绍 1. Maven是什么&#xff1f; 2.Maven的作用&#xff1f; 二、Maven仓库介绍 2.1 库的分类 三、Maven安装与配置 3.1 Maven安装 3.2 Maven环境配置 3.3 仓库配置 四、Eclipse与Maven配置 五、Maven项目测试 5.1 新建Maven项目步骤及注意事项 5.…
阅读更多...
用AI攻克“智能文字识别创新赛题”，这场大学生竞赛掀起了什么风潮？

用AI攻克“智能文字识别创新赛题”，这场大学生竞赛掀起了什么风潮？

文章目录 一、前言1.1 大赛介绍1.2 项目背景 二、基于智能文字场景个人财务管理创新应用2.1 作品方向2.2 票据识别模型2.2.1 文本卷积神经网络TextCNN2.2.2 Bert 预训练微调2.2.3 模型对比2.2.4 效果展示 2.3 票据文字识别接口 三、未来展望 一、前言 1.1 大赛介绍 中国大学生…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023