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

news2025/11/1 5:09:39

文章目录

    • 一、项目起航：项目初始化与配置
    • 二、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 task
  note: 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:X

ERROR in ./src/assets/task.svg

Module 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.coloradmin.cn/o/885632.html

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

相关文章

docker安装redis7-主从模式

docker安装redis7-主从模式

说明 系统版本&#xff1a;CentOS7.9 redis版本&#xff1a;7.0.5镜像 此模式为1主2从,主节点端口为6379&#xff0c;从节点端口为6380、6381以下所有的示例以redis7.0.5为例 下载镜像 docker pull redis:7.0.5 创建挂载路径 所有节点的数据、配置文件以及日志都挂载到宿…
阅读更多...
隧道人员定位方案

隧道人员定位方案

针对隧道环境的人员定位方案&#xff0c;UWB定位技术同样可以提供高精度和可靠的定位服务。以下是一个可行的方案&#xff1a; 部署基站网络&#xff1a;在隧道内建立一个基站网络&#xff0c;基站需要均匀分布在各个关键位置&#xff0c;以确保全方位的覆盖。由于隧道的特殊环…
阅读更多...
CMake:检测外部库---使用pkg-config

CMake:检测外部库---使用pkg-config

CMake:检测外部库---使用pkg-config 导言ZMQ安装项目结构CMakeLists.txt相关源码 导言 前面几篇内容的学习&#xff0c;我们基本上了解了如何链接一个三方库的方法。本篇以及下一篇将补充两个检测外部库的方法。 目前为止&#xff0c;我们已经学习了两种检测外部依赖关系的方…
阅读更多...
文件的导入与导出

文件的导入与导出

文章目录 一、需求二、分析1. Excel 表格数据导出2. Excel 表格数据导入一、需求 在我们日常开发中，会有文件的导入导出的需求，如何在 vue 项目中写导入导出功能呢 二、分析 以 Excel 表格数据导出为例 1. Excel 表格数据导出 调用接口将返回的数据进行 Blob 转换，附： 接…
阅读更多...
iPhone删除的照片能恢复吗？不小心误删了照片怎么找回？

iPhone删除的照片能恢复吗？不小心误删了照片怎么找回？

iPhone最近删除清空了照片还能恢复吗&#xff1f;大家都知道&#xff0c;照片对于我们来说是承载着美好回忆的一种形式。它记录着我们的平淡生活&#xff0c;也留住了我们的美好瞬间&#xff0c;具有极其重要的纪念价值。 照片不小心误删是一件非常难受的事&#xff0c;那么iP…
阅读更多...
【智慧工地源码】：人工智能、BIM技术、机器学习在智慧工地的应用

【智慧工地源码】：人工智能、BIM技术、机器学习在智慧工地的应用

智慧工地云平台是专为建筑施工领域所打造的一体化信息管理平台。通过大数据、云计算、人工智能、BIM、物联网和移动互联网等高科技技术手段&#xff0c;将施工区域各系统数据汇总&#xff0c;建立可视化数字工地。同时&#xff0c;围绕人、机、料、法、环等各方面关键因素&…
阅读更多...
Unity用NPOI创建Exect表，保存数据，和修改删除数据。以及打包后的坑——无法打开新创建的Exect表

Unity用NPOI创建Exect表，保存数据，和修改删除数据。以及打包后的坑——无法打开新创建的Exect表

先说坑花了一下午才找到解决方法解决&#xff0c; 在Unity编辑模式下点击物体创建对应的表&#xff0c;获取物体名字与在InputText填写的注释数据。然后保存。创建Exect表可以打开&#xff0c;打包PC后&#xff0c;点击物体创建的表&#xff0c;打不开文件破损 解决方法&#…
阅读更多...
AIGC绘画：kaggle部署stable diffusion项目绘画

AIGC绘画：kaggle部署stable diffusion项目绘画

文章目录 kaggle介绍项目部署edit my copy链接显示 结果展示 kaggle介绍 Kaggle成立于2010年&#xff0c;是一个进行数据发掘和预测竞赛的在线平台。从公司的角度来讲&#xff0c;可以提供一些数据&#xff0c;进而提出一个实际需要解决的问题&#xff1b;从参赛者的角度来讲&…
阅读更多...
【Docker】Docker network之bridge、host、none、container以及自定义网络的详细讲解

【Docker】Docker network之bridge、host、none、container以及自定义网络的详细讲解

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前学习C/C、算法、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL&…
阅读更多...
建筑工地的水泥分配和料场选址问题（Cplex求解线性规划模型+粒子群搜索算法）【Java实现】

建筑工地的水泥分配和料场选址问题（Cplex求解线性规划模型+粒子群搜索算法）【Java实现】

问题 问题一求解 求解思路 该问题可以直接建立一个线性规划模型&#xff0c;然后使用cplex求解器来求解 模型 决策变量 x i j &#xff1a;第 i 个料场向第 j 个工地运送的水泥吨数&#xff0c;其中 1 ≪ i ≪ m &#xff1b; 1 ≪ j ≪ n 其中 x i j 的取值范围是 [ 0 , d…
阅读更多...
prisma的增删改查

prisma的增删改查

目录 一、单表1.增自增问题2.查询所有信息3.查询以l开头的数据4.查询限定数据5.查询唯一的数据6.分页查询7.改8.删 二、联表1.新增文章2.将文章和用户关联3.查询用户的同时查询用户的文章4.关联查询&#xff08;级联操作&#xff0c;链式调用&#xff09; 一、单表 模型 mode…
阅读更多...
腾讯云轻量服务器测评：2核 2G 4M

腾讯云轻量服务器测评：2核 2G 4M

腾讯云轻量2核2G4M服务器&#xff0c;4M带宽下载速度可达512KB/秒&#xff0c;系统盘为50GB SSD盘&#xff0c;300GB月流量&#xff0c;地域节点可选上海、广州和北京&#xff0c;腾讯云百科分享腾讯云2核2G4M轻量应用服务器配置性能表&#xff1a; 目录 腾讯云轻量2核2G4M服…
阅读更多...
Spring MVC 中的常见注解的用法

Spring MVC 中的常见注解的用法

目录 认识 Spring MVC什么是 Spring MVCMVC 的定义 Spring MVC 注解的运用1. Spring MVC 的连接RequestMapping 注解 2. 获取参数获取单个参数获取多个参数传递对象表单传参后端参数重命名RequestBody 接收 JSON 对象PathVariable 获取 URL 中的参数上传文件 RequestPart获取 C…
阅读更多...
最小生成树，Kruskal算法

最小生成树，Kruskal算法

最小生成树&#xff08;Minimum Spanning Tree&#xff0c;简称 MST&#xff09;是一个连通图的子图&#xff0c;它包含图中的所有节点&#xff0c;并且是一个树&#xff08;无环连通图&#xff09;&#xff0c;同时保证连接所有节点的边的权重之和最小。 在一个带权重的连通图…
阅读更多...
R语言实现非等比例风险生存资料分析（1）

R语言实现非等比例风险生存资料分析（1）

#非等比例风险的生存资料分析 ###1 生成模拟数据### library(flexsurv) set.seed(123) # 生成样本数量 n <- 100 # 生成时间数据 time <- sample(1:1000,n,replaceF) # 调整shape和scale参数以控制生存曲线形状 # 生成事件数据&#xff08;假设按比例风险模型&#xff0…
阅读更多...
【SpringBoot】中的ApplicationRunner接口 和 CommandLineRunner接口

【SpringBoot】中的ApplicationRunner接口 和 CommandLineRunner接口

1. ApplicationRunner接口 用法&#xff1a; 类型&#xff1a; 接口 方法&#xff1a; 只定义了一个run方法 使用场景&#xff1a; springBoot项目启动时&#xff0c;若想在启动之后直接执行某一段代码&#xff0c;就可以用 ApplicationRunner这个接口&#xff0c;并实现接口…
阅读更多...
YB2416是支持高电压输入的同步降压电源管理芯片

YB2416是支持高电压输入的同步降压电源管理芯片

简介&#xff1a; YB2416是支持高电压输入的同步降压电源管理芯片&#xff0c;在 4~30V 的宽输入电压范围内可实现3A的连续电流输出。通过调节 FB 端口的分压电阻&#xff0c;可以输出1.8V到28V的稳定电压。YB2416具有优秀的恒压/恒流(CC/C)特性。YB2416 采用电流模式的环路控制…
阅读更多...
UI自动化测试常见的Exception

UI自动化测试常见的Exception

一. StaleElementReferenceException&#xff1a; - 原因&#xff1a;引用的元素已过期。原因是页面刷新了&#xff0c;此时当然找不到之前页面的元素。- 解决方案&#xff1a;不确定什么时候元素就会被刷新。页面刷新后重新获取元素的思路不变&#xff0c;这时可以使用python的…
阅读更多...
【云原生】【k8s】从小白到大神之路之学习运维第82天-------基于Prometheus监控Kubernetes集群

【云原生】【k8s】从小白到大神之路之学习运维第82天-------基于Prometheus监控Kubernetes集群

第四阶段 时 间&#xff1a;2023年8月17日 参加人&#xff1a;全班人员 内 容&#xff1a; 基于Prometheus监控Kubernetes集群 目录 一、Prometheus简介 &#xff08;一&#xff09;Prometheus的基本原理 &#xff08;二&#xff09;Prometheus优势 &#xff08;三&a…
阅读更多...
java.security.InvalidKeyException: Illegal key size

java.security.InvalidKeyException: Illegal key size

JDK受版本安全限制&#xff0c;默认只允许128位长度以内的。秘钥长度&#xff0c;如果密钥大于128, 会抛出java.security.InvalidKeyException: Illegal key size 异常. java运行时环境默认读到的是受限的policy文件. 文件位于${java_home}/jre/lib/security, 这种限制是因为美…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023