【实战】十一、看板页面及任务组页面开发（一） —— 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 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;
  }
`

查看效果：
效果图

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

shell编程

shell编程

1.特殊变量 $n &#xff1a;n为数字&#xff0c;$0代表该脚本名称&#xff0c;$1-$9代表第一到第九个参数&#xff0c;十以上的参数&#xff0c;十以上的参数需要用大括号包含&#xff0c;如${10} $# &#xff1a;获取所有输入参数个数 $#&#xff1a;命令行中所有的参数&…
阅读更多...
卡巴斯基为基于Linux的嵌入式设备推出专用解决方案

卡巴斯基为基于Linux的嵌入式设备推出专用解决方案

导读卡巴斯基在其卡巴斯基嵌入式系统安全产品中引入了对 Linux 的支持。这种适应性强的多层解决方案现在为基于Linux的嵌入式系统、设备和场景提供优化的安全&#xff0c;合通常适用于这些系统的严格监管标准。 卡巴斯基在其卡巴斯基嵌入式系统安全产品中引入了对 Linux 的支持…
阅读更多...
非谓语动词1（背）

非谓语动词1（背）

非谓语动词的概述 for:对某人来说做某事是怎么怎么样的 of&#xff1a;人的内在品质,你真的太怎么怎么样了 非谓语动词作主语 非谓语动词作宾语 非谓语动词作表语 现在分词作表语时时常时形容事物的 过去分词作表语一般是形容人的 非谓语动词作补语 注&#xff1a;无论是使役…
阅读更多...
星星之火：国产讯飞星火大模型的实际使用体验（与GPT对比）

星星之火：国产讯飞星火大模型的实际使用体验（与GPT对比）

#AIGC技术内容创作征文&#xff5c;全网寻找AI创作者&#xff0c;快来释放你的创作潜能吧&#xff01;# 文章目录 1 前言2 测试详情2.1 文案写作2.2 知识写作2.3 阅读理解2.4 语意测试&#xff08;重点关注&#xff09;2.5 常识性测试&#xff08;重点关注&#xff09;2.6 代码…
阅读更多...
使用wxPython和PyMuPDF在Python中显示PDF目录的实现

使用wxPython和PyMuPDF在Python中显示PDF目录的实现

展示如何使用wxPython和PyMuPDF库在Python中选择PDF文件并将目录显示在列表框中。 简介&#xff1a; 在本篇教程中&#xff0c;我们将学习如何使用wxPython和PyMuPDF库在Python中选择PDF文件&#xff0c;并将其目录显示在一个列表框中。这将使用户能够方便地浏览PDF文档的目录…
阅读更多...
Flask Web开发实战（狼书）| 笔记第1、2章

Flask Web开发实战（狼书）| 笔记第1、2章

前言 2023-8-11 以前对网站开发萌生了想法&#xff0c;又有些急于求成&#xff0c;在B站照着视频敲了一个基于flask的博客系统。但对于程序的代码难免有些囫囵吞枣&#xff0c;存在许多模糊或不太理解的地方&#xff0c;只会照葫芦画瓢。 而当自己想开发一个什么网站的时&…
阅读更多...
使用Java服务器实现UDP消息的发送和接收（多线程）

使用Java服务器实现UDP消息的发送和接收（多线程）

目录 简介&#xff1a;1. 导入必要的库2. 创建服务器端代码3. 创建客户端代码4. 实现多线程处理5. 测试运行示例代码&#xff1a;函数说明服务器端代码说明&#xff1a;客户端代码说明&#xff1a; 总结&#xff1a; 简介&#xff1a; 在本篇博客中&#xff0c;我们将介绍如何…
阅读更多...
C语言学习笔记---数据的存储详解

C语言学习笔记---数据的存储详解

C语言程序设计笔记---015 C语言数据的存储1、数据类型的意义1.1、unsigned与signed数据类型例程11.2、补码与原码相互转换例程2 2、大小端的介绍2.1、大小端的例程12.2、大小端的例程2 --- 判断当前编译器环境属于大端或小端 3、综合练习题探究数据的存储3.1、练习题13.2、练习…
阅读更多...
Martin_DHCP_V3.0 (DHCP自动化泛洪攻击GUI)

Martin_DHCP_V3.0 (DHCP自动化泛洪攻击GUI)

Github>https://github.com/MartinxMax/Martin_DHCP_V3.0 首页 Martin_DHCP_V3.0 自动化DHCP洪泛攻击 Martin_DHCP_V3.0 使用方法 安装三方库 #python3 1.RunMe_Install_Packet.py 攻击路由器 #python3 Martin_DHCP_Attack.py 填写网卡 填写攻击次数 开始运行
阅读更多...
Tomcat的动静分离以及多实例部署

Tomcat的动静分离以及多实例部署

一、动静分离 Nginx实现负载均衡的原理&#xff1a; Nginx实现负载均衡是通过反向代理实现Nginx服务器作为前端&#xff0c;Tomcat服务器作为后端&#xff0c;web页面请求由Nginx服务来进行转发。 但不是把所有的web请求转发&#xff0c;而是将静态页面请求Ncinx服务器自己来处…
阅读更多...
计算机视觉五大核心研究任务全解：分类识别、检测分割、人体分析、三维视觉、视频分析

计算机视觉五大核心研究任务全解：分类识别、检测分割、人体分析、三维视觉、视频分析

目录 一、引言1.1 计算机视觉的定义1.1.1 核心技术1.1.2 应用场景 1.2 历史背景及发展1.2.1 1960s-1980s: 初期阶段1.2.2 1990s-2000s: 机器学习时代1.2.3 2010s-现在: 深度学习的革命 1.3 应用领域概览1.3.1 工业自动化1.3.2 医疗图像分析1.3.3 自动驾驶1.3.4 虚拟现实与增强现…
阅读更多...
【智慧工地源码】：人工智能、BIM技术、机器学习在智慧工地的应用

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

智慧工地云平台是专为建筑施工领域所打造的一体化信息管理平台。通过大数据、云计算、人工智能、BIM、物联网和移动互联网等高科技技术手段&#xff0c;将施工区域各系统数据汇总&#xff0c;建立可视化数字工地。同时&#xff0c;围绕人、机、料、法、环等各方面关键因素&…
阅读更多...
Java基础篇--错误处理机制

Java基础篇--错误处理机制

尽管人人希望自己身体健康&#xff0c;处理的事情都能顺利进行&#xff0c;但在实际生活中总会遇到各种状况&#xff0c;比如感冒发烧&#xff0c;工作时电脑蓝屏、死机等。同样&#xff0c;在程序运行的过程中&#xff0c;也会发生各种非正常状况&#xff0c;例如&#xff0c;…
阅读更多...
Vue中拖动排序功能,引入SortableJs，前端拖动排序。

Vue中拖动排序功能,引入SortableJs，前端拖动排序。

背景&#xff1a; 作为一名前端开发人员&#xff0c;在工作中难免会遇到拖拽功能&#xff0c;分享一个github上一个不错的拖拽js库&#xff0c;能满足我们在项目开发中的需要&#xff0c;支持Vue和React&#xff0c;下面是我在vue后台项目中中使用SortableJS的使用详细流程&am…
阅读更多...
绿盾客户端文件加密不显示锁的图标，加密功能正常

绿盾客户端文件加密不显示锁的图标，加密功能正常

环境： 绿盾客户端7.0 Win10 专业版 问题描述： 绿盾客户端文件加密不显示锁的图标，加密功能正常 解决方案： 1.查看控制台是否设置隐藏图标 （未解决） 控制台-规则中心-安全选项-“加密文件显示加密图标”和“不显示Explorer 鼠标右键菜单”是否打钩 如果没打钩，则不…
阅读更多...
编程练习（1）

编程练习（1）

目录 一.选择题 第一题&#xff1a; 第二题&#xff1a; 第三题&#xff1a; 第四题&#xff1a; 第五题&#xff1a; ​编辑 二.编程题 第一题&#xff1a; 第二题&#xff1a; 1.暴力方法&#xff1a; 2.数组法&#xff1a; 一.选择题 第一题&#xff1a; 解析&…
阅读更多...
搭建Excel服务器

搭建Excel服务器

1、下载Excel服务器 下载地址 2、解压文件 3、打开服务器 4、服务器运行信息 5、连接测试 打开客户端 6、登录到服务器 默认账号 密码 admin 3 修改文件保存路径(服务器端点击配置) 7、客户端整体界面 8、配置权限 9、设计模板 10、其他用户登录就可以填写信息 11、用户&#…
阅读更多...
SpingBoot-Vue前后端——实现CRUD

SpingBoot-Vue前后端——实现CRUD

目录​​​​​​​ 一、实例需求 ⚽ 二、代码实现 &#x1f3cc; 数据库 &#x1f440; 后端实现 &#x1f4eb; 前端实现 &#x1f331; 三、源码下载 &#x1f44b; 一、实例需求 ⚽ 实现一个简单的CRUD&#xff0c;包含前后端交互。 二、代码实现 &#x1f3cc; 数…
阅读更多...
java：JDBC

java：JDBC

文章目录 什么是JDBCJDBC使用步骤详解各个对象DriverManagerConnectionStatementResultSetPreparedStatement JDBC控制事务操作步骤示例 什么是JDBC 我们知道&#xff0c;数据库有很多种&#xff0c;比如 mysql&#xff0c;Oracle&#xff0c;DB2等等&#xff0c;如果每一种数…
阅读更多...
SpringCloud初识

SpringCloud初识

微服务架构4个核心问题&#xff1a; 这四个问题围绕这我们去学的一些东西&#xff0c;是重点!!! 1.服务很多&#xff0c;客户端该如何访问&#xff1f; 2.这么多服务&#xff0c;服务之间该如何通信&#xff1f; 3.这么多服务&#xff0c;该如何治理&#xff1f; 4.服务挂了…
阅读更多...
最新文章

Copyright @ 2022~2023