外管局网站先支后收怎么做报告,asp.net做网站源代码,怎么删除建站网站程序,北京最大做网站的公司有哪些文章目录 一、项目起航#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.看板列表开发准备工作2.看板列表初步开发3.添加task, bug 图标 学习内容来源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.看板列表开发准备工作
之前的项目详情进入看板页的路由有个小问题点击浏览器返回按钮回不去原因如下
路由列表是栈结构每访问一个路由都会 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 toviewboard 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.tssrc\screens\ProjectList\components\SearchPanel.tsxsrc\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.tsxsrc\screens\ProjectList\components\List.tsxsrc\auth-provider.tssrc\context\auth-context.tsxsrc\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?: PartialViewboard) {const client useHttp();return useQueryViewboard[]([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?: PartialTask) {const client useHttp();return useQueryTask[]([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/projectexport 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 divh3{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 divh1{currentProject?.name}看板/h1ColumnsContainer{viewboards?.map(vbd ViewboardColumn viewboard{vbd} key{vbd.id}/)}/ColumnsContainer/div;
};const ColumnsContainer styled.divdisplay: 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 useQueryTaskType[]([taskTypes], () client(tasks));
};将以下两个 svg 文件拷贝到 src\assets
bug.svg
svg xmlnshttp://www.w3.org/2000/svg xmlns:sketchhttp://www.bohemiancoding.com/sketch/ns width16px height16px viewBox0 0 16 16 version1.1 xlinkHrefhttp://www.w3.org/1999/xlink!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch --titlebug/titledescCreated with Sketch./descdefs/g idPage-1 strokenone stroke-width1 fillnone fill-ruleevenodd sketch:typeMSPageg idbug sketch:typeMSArtboardGroupg idBug sketch:typeMSLayerGroup transformtranslate(1.000000, 1.000000)rect idRectangle-36 fill#E5493A sketch:typeMSShapeGroup x0 y0 width14 height14 rx2/path dM10,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 idFill-2 fill#FFFFFF sketch:typeMSShapeGroup//g/g/g
/svgtask.svg
svg xmlnshttp://www.w3.org/2000/svg xmlns:sketchhttp://www.bohemiancoding.com/sketch/ns width16px height16px viewBox0 0 16 16 version1.1!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch --titletask/titledescCreated with Sketch./descdefs/g idPage-1 strokenone stroke-width1 fillnone fill-ruleevenodd sketch:typeMSPageg idtask sketch:typeMSArtboardGroupg idTask sketch:typeMSLayerGroup transformtranslate(1.000000, 1.000000)rect idRectangle-36 fill#4BADE8 sketch:typeMSShapeGroup x0 y0 width14 height14 rx2/g idPage-1 transformtranslate(4.000000, 4.500000) stroke#FFFFFF stroke-width2 stroke-linecapround sketch:typeMSShapeGrouppath dM2,5 L6,0 idStroke-1/path dM2,5 L0,3 idStroke-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. Reacts JSX doesnt 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 version1.0 encodingUTF-8 standaloneno?
svg width16px height16px viewBox0 0 16 16 version1.1 xmlnshttp://www.w3.org/2000/svg xlinkHrefhttp://www.w3.org/1999/xlink xmlnsSketchhttp://www.bohemiancoding.com/sketch/ns!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch --titlebug/titledescCreated with Sketch./descdefs/defsg idPage-1 strokenone stroke-width1 fillnone fill-ruleevenodd sketchTypeMSPageg idbug sketchTypeMSArtboardGroupg idBug sketchTypeMSLayerGroup transformtranslate(1.000000, 1.000000)rect idRectangle-36 fill#E5493A sketchTypeMSShapeGroup x0 y0 width14 height14 rx2/rectpath dM10,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 idFill-2 fill#FFFFFF sketchTypeMSShapeGroup/path/g/g/g
/svgtask.svg
?xml version1.0 encodingUTF-8 standaloneno?
svg width16px height16px viewBox0 0 16 16 version1.1 xmlnshttp://www.w3.org/2000/svgxmlnsSketchhttp://www.bohemiancoding.com/sketch/ns!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch --titletask/titledescCreated with Sketch./descdefs/defsg idPage-1 strokenone stroke-width1 fillnone fill-ruleevenodd sketchTypeMSPageg idtask sketchTypeMSArtboardGroupg idTask sketchTypeMSLayerGroup transformtranslate(1.000000, 1.000000)rect idRectangle-36 fill#4BADE8 sketchTypeMSShapeGroup x0 y0 width14 height14 rx2/rectg idPage-1 transformtranslate(4.000000, 4.500000) stroke#FFFFFF stroke-width2 stroke-linecapround sketchTypeMSShapeGrouppath dM2,5 L6,0 idStroke-1/pathpath dM2,5 L0,3 idStroke-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 alttask-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 (Containerh3{viewboard.name}/h3TasksContainer{tasks?.map((task) (Card style{{marginBottom: 0.5rem}} key{task.id}div{task.name}/divTaskTypeIcon id{task.id} //Card))}/TasksContainer/Container);
};export const Container styled.divmin-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.divoverflow: scroll;flex: 1;::-webkit-scrollbar {display: none;}查看效果 部分引用笔记还在草稿阶段敬请期待。。。
