项目实战--新闻分类
从antd中拿一个表格
表格 Table - Ant Design
https://ant-design.antgroup.com/components/table-cn#table-demo-edit-cell使用的是可编辑单元格
实现引入可编辑单元格：
import React, { useState, useEffect, useRef, useContext } from 'react'
import { Button, Table, Tag, Modal, Popover, Switch, Input, Form } from 'antd'
import {EditOutlined,DeleteOutlined,ExclamationCircleOutlined,
} from '@ant-design/icons'
import axios from 'axios'
import { data } from 'react-router-dom'
const { confirm } = Modalfunction NewsCategory() {const [dataSource, setdataSource] = useState([])useEffect(() => {axios.get('/categories').then((res) => {setdataSource(res.data)})}, [])var __awaiter =(this && this.__awaiter) ||function (thisArg, _arguments, P, generator) {function adopt(value) {return value instanceof P? value: new P(function (resolve) {resolve(value)})}return new (P || (P = Promise))(function (resolve, reject) {function fulfilled(value) {try {step(generator.next(value))} catch (e) {reject(e)}}function rejected(value) {try {step(generator['throw'](value))} catch (e) {reject(e)}}function step(result) {result.done? resolve(result.value): adopt(result.value).then(fulfilled, rejected)}step((generator = generator.apply(thisArg, _arguments || [])).next())})}var __rest =(this && this.__rest) ||function (s, e) {var t = {}for (var p in s)if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)t[p] = s[p]if (s != null && typeof Object.getOwnPropertySymbols === 'function')for (var i = 0, p = Object.getOwnPropertySymbols(s);i < p.length;i++) {if (e.indexOf(p[i]) < 0 &&Object.prototype.propertyIsEnumerable.call(s, p[i]))t[p[i]] = s[p[i]]}return t}const handleSave = (record) => {setdataSource(dataSource.map((item) => {if (item.id === record.id) {return {id: item.id,title: record.title,value: record.value,}}return item}))axios.patch(`/categories/${record.id}`, {title: record.title,value: record.title,})}const columns = [{title: 'ID',dataIndex: 'id',render: (id) => {return <b>{id}</b>},},{title: '栏目名称',dataIndex: 'title',onCell: (record) => ({record,editable: true,dataIndex: 'title',title: '栏目名称',handleSave: handleSave,}),},{title: '操作',render: (record) => {return (<div><Buttondangertype="primary"shape="circle"icon={<DeleteOutlined />}onClick={() => confirmMethod(record)}/></div>)},},]const confirmMethod = (record) => {confirm({title: 'Do you Want to delete these items?',icon: <ExclamationCircleOutlined />,onOk() {deleteMethod(record)},onCancel() {console.log('Cancel')},})console.log('确认删除')}const deleteMethod = (record) => {setdataSource(dataSource.filter((item) => item.id !== record.id))//同步状态 后端axios.delete(`/categories/${record.id}`)}const EditableContext = React.createContext(null)const EditableRow = (_a) => {var { index } = _a,props = __rest(_a, ['index'])const [form] = Form.useForm()return (<Form form={form} component={false}><EditableContext.Provider value={form}><tr {...props} /></EditableContext.Provider></Form>)}const EditableCell = (_a) => {var { title, editable, children, dataIndex, record, handleSave } = _a,restProps = __rest(_a, ['title','editable','children','dataIndex','record','handleSave',])const [editing, setEditing] = useState(false)const inputRef = useRef(null)const form = useContext(EditableContext)useEffect(() => {var _aif (editing) {;(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus()}}, [editing])const toggleEdit = () => {setEditing(!editing)form.setFieldsValue({ [dataIndex]: record[dataIndex] })}const save = () =>__awaiter(void 0, void 0, void 0, function* () {try {const values = yield form.validateFields()toggleEdit()handleSave(Object.assign(Object.assign({}, record), values))} catch (errInfo) {console.log('Save failed:', errInfo)}})let childNode = childrenif (editable) {childNode = editing ? (<Form.Itemstyle={{ margin: 0 }}name={dataIndex}rules={[{ required: true, message: `${title} is required.` }]}><Input ref={inputRef} onPressEnter={save} onBlur={save} /></Form.Item>) : (<divclassName="editable-cell-value-wrap"style={{ paddingInlineEnd: 24 }}onClick={toggleEdit}>{children}</div>)}return <td {...restProps}>{childNode}</td>}return (<div><TabledataSource={dataSource}columns={columns}pagination={{//一页显示几条数据pageSize: 5,}}rowKey={(item) => item.id}components={{body: {row: EditableRow,cell: EditableCell,},}}/></div>)
}export default NewsCategory
相关文章：
项目实战--新闻分类
从antd中拿一个表格 表格 Table - Ant Designhttps://ant-design.antgroup.com/components/table-cn#table-demo-edit-cell使用的是可编辑单元格 实现引入可编辑单元格： import React, { useState, useEffect, useRef, useContext } from react import { Button, …...
人像面部关键点检测
此工作为本人近期做人脸情绪识别，CBAM模块前是否能加人脸关键点检测而做的尝试。由于创新点不是在于检测点的标注，而是CBAM的改进，因此，只是借用了现成库Dilb与cv2进行。 首先，下载人脸关键点预测模型:Index of /file…...
OpenVINO怎么用
目录 OpenVINO 简介 主要组件 安装 OpenVINO 使用 OpenVINO 的基本步骤 OpenVINO 简介 OpenVINO（Open Visual Inference and Neural Network Optimization）是英特尔推出的一个开源工具包，旨在帮助开发者在英特尔硬件平台上高效部署深度学…...
写论文时降AIGC和降重的一些注意事项
‘ 写一些研究成果，英文不是很好，用有道翻译过来句子很简单，句型很单一。那么你会考虑用ai吗？ 如果语句太正式，高级，会被误判成aigc ，慎重选择ai润色。 有的话就算没有用ai生成，但…...
、yaml格式配置文件）(读取yml配置文件的3种方式)(详解))
SpringBoot学习（properties、yml(主流)、yaml格式配置文件）(读取yml配置文件的3种方式)(详解)
目录 一、SpringBoot配置文件详解。 1.1配置文件简介。 1.2配置文件分类。（3种配置文件格式） <1>application.properties（properties格式）。 <2>application.yml（yml格式）。 <3>applicat…...
STM32单片机C语言
1、stdint.h简介 stdint.h 是从 C99 中引进的一个标准 C 库的文件 路径：D:\MDK5.34\ARM\ARMCC\include 大家都统一使用一样的标准，这样方便移植 配置MDK支持C99 位操作 如何给寄存器某个值赋值 举个例子：uint32_t temp 0; 宏定义 带参…...
前端为什么需要单元测试？
一. 前言 对于现在的前端工程，一个标准完整的项目，通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够，因此我写了这篇文章，一方面期望通过这篇…...
QT 文件和文件夹操作
文件操作 1. 文件读写 QFile - 基本文件操作 // 只写模式创建文件（如果文件已存在会清空内容） file.open(QIODevice::WriteOnly);// 读写模式创建文件 file.open(QIODevice::ReadWrite);// 追加模式（如果文件不存在则创建） fil…...
AIP目录
专注于开发灵活API的设计文档。 AIP是总结了谷歌API设计决策的设计文档，它也为其他人提供了用文档记录API设计规则和实践的框架和系统。 基础1AIP目的和指南2AIP编号规则3AIP版本管理200先例8AIP风格与指导9术语表流程100API设计评审常见问题205Beta版本发布前置条…...
Function Calling的时序图（含示例）
🧍 用户： 发起请求，输入 prompt（比如：“请告诉我北京的天气”）。 🟪 应用： 将用户输入的 prompt 和函数定义（包括函数名、参数结构等）一起发给 OpenAI。 …...
基于尚硅谷FreeRTOS视频笔记——6—滴答时钟—上下文切换
FreeRTOS滴答 FreeRTOS需要有一个时钟参照，并且这个时钟不会被轻易打断，所以最好选择systick 为什么需要时间参照 就是在高优先级任务进入阻塞态后，也可以理解为进入delay（）函数后，需要有一个时间参照&…...
Playwright框架入门
Playwright爬虫框架入门 Playwright介绍 playwright官方文档 Playwright是一个用于自动化浏览器操作的开源工具，由Microsoft开发和维护，支持多种浏览器和多种编程语言，可以用于测试、爬虫、自动化任务等场景。 Playwright是基于WebSocket…...
针对渲染圆柱体出现“麻花“状问题解决
圆柱体渲染结果，在侧面有麻花状条纹，边缘不够硬朗，上下的圆看起来不够平，很明显，是法向量导致的。 原始模型 渲染结果 计算点的法向量采用简单的平均法…...
手撕数据结构算法OJ——栈和队列
文章目录 一、前言二、手撕OJ2.1有效的括号2.2用队列实现栈2.2.1初始化2.2.2入栈2.2.3出栈2.2.4取栈顶2.2.5判空2.2.6销毁2.2.7整体代码 2.3用栈实现队列2.3.1初始化2.3.2入队2.3.3出队2.3.4取队头2.3.5判空2.3.6销毁2.3.7整体代码 四、总结 一、前言 兄弟们，今天的…...
基础知识-指针
1、指针的基本概念 1.1 什么是指针 1.1.1 指针的定义 指针是一种特殊的变量，与普通变量存储具体数据不同，它存储的是内存地址。在计算机程序运行时，数据都被存放在内存中，而指针就像是指向这些数据存放位置的 “路标”。通过指针…...
Thymeleaf简介
在Java中，模板引擎可以帮助生成文本输出。常见的模板引擎包括FreeMarker、Velocity和Thymeleaf等 Thymeleaf是一个适用于Web和独立环境的现代服务器端Java模板引擎。 Thymeleaf 和 JSP比较： Thymeleaf目前所作的工作和JSP有相似之处，Thyme…...
ifconfig -bash: ifconfig: command not found
Ubuntu系统安装完成想查看其ip 报错ifconfig -bash: ifconfig: command not found 解决方法 sudo apt update sudo apt install net-tools ip查找成功...
MCP协议量子加密实践：基于QKD的下一代安全通信（2025深度解析版）
一、量子计算威胁的范式转移与MCP协议改造必要性 1.1 传统加密体系的崩塌时间表 根据IBM 2025年量子威胁评估报告，当量子计算机达到4000个逻辑量子比特时（预计2028年实现），现有非对称加密体系将在72小时内被完全破解。工业物联网…...
STM32 基本GPIO控制
目录 GPIO基础知识 编辑IO八种工作模式 固件库实现LED点灯 蜂鸣器 按键基础知识 编辑继电器 震动传感器 433M无线模块 GPIO基础知识 GPIO(General-Purpose input/output,通用输入/输出接口) 用于感知外部信号（输入模式）和控制外部设备&…...
【天外之物】叉乘（向量积）的行列式表示方法
叉乘（向量积）的行列式表示方法如下： 步骤说明： 构造33矩阵： 将三维向量叉乘转换为行列式的形式，需构造一个包含单位向量 i , j , k \mathbf{i}, \mathbf{j}, \mathbf{k} i,j,k 和原向量分量的矩阵&#x…...
北京SMT贴片厂精密制造关键工艺
内容概要 随着电子设备小型化与功能集成化需求日益提升，北京SMT贴片厂在精密制造领域持续突破工艺瓶颈。本文以高密度PCB板贴片全流程为核心，系统梳理从锡膏印刷、元件贴装到回流焊接的关键技术节点，并结合自动化检测与缺陷预防方案…...
服务器架构：SMP、NUMA、MPP及Docker优化指南
文章目录 引言 一、服务器架构基础1. SMP（对称多处理，Symmetric Multiprocessing）2. NUMA（非统一内存访问，Non-Uniform Memory Access）3. MPP（大规模并行处理，Massively Parallel Pr…...
Datawhale春训营赛题分析和总结
1.Datawhale春训营任务一 借助这个云平台，支持类似于这个anaconda相关的交互式的操作，第一个任务就是跑通这个baseline，然后注册账号之后送了对应的相关算力，跑通这个之后需要进行打卡，跑通其实是没问题不大的&#x…...
一键模仿图片风格，图生生APP，实现随时随地“生图自由“
一、什么是"图片模仿"功能？ "图片模仿"是图生生AI的功能之一，利用先进的AI技术，分析上传的图片风格、色调、构图等元素，快速生成具有相同风格的图片。无论是产品展示、广告海报还是社交媒体配图，…...
C++——C++11常用语法总结
C11标准由国际标准化组织（ISO）和国际电工委员会（IEC）旗下的C标准委员会（ISO/IEC JTC1/SC22/WG21）于2011年8月12日公布，并于2011年9月出版。2012年2月28日的国际标准草案(N3376)是最接近于C11标准…...
C++17 新特性简解
C17 新特性简解 一、核心语言特性 1. 结构化绑定（Structured Bindings） 用途：解构复合类型（如元组、结构体）为独立变量 示例： #include <iostream> #include <tuple>int main() {// 解构 st…...
【失败】Gnome将默认终端设置为 Kitty
起因 一会儿gnome-terminal一会儿kitty终端，实在是受不了，决定取缔默认的gnome-terminal。 过程 在 Ubuntu 或 Debian 系统上： 确保 Kitty 已经安装。如果未安装，可以在终端中运行命令sudo apt install kitty -y进行安装。 使用系…...
【Easylive】微服务架构在系统中的优缺点的具体体现
【Easylive】项目常见问题解答（自用&持续更新中…） 汇总版 在线视频分享系统项目简介 系统概述 该项目是一个基于SpringCloud微服务架构的在线视频分享系统，主要功能包括： • 用户自主发布视频 • 后台视频审核 • 用户互动…...
锁（Mutex）、信号量（Semaphore）与条件量（Condition Variable）
一、同步机制的核心意义 在多线程/多进程编程中，当多个执行流共享资源（如变量、内存、文件）时，可能因操作顺序不确定导致数据竞争（Data Race）。同步机制的作用是： 保证原子性：确保…...
使用pnpm第一次运行项目报错 ERR_PNPM_NO_PKG_MANIFEST No package.json found in E:\
开始用unibestpnpm写一个小程序 运行pnpm init报错 如标题所示没有package.json这个文件 博主犯了一个很愚蠢的错误。。 准备方案手动创建一个json文件 此时才发现没到根目录下，创建了一个项目之后就没有切入文件夹里。 切入根目录再下载就成功啦...
前沿篇｜CAN XL 与 TSN 深度解读
引言 1. CAN XL 标准演进与设计目标 2. CAN XL 物理层与帧格式详解 3. 时间敏感网络 (TSN) 关键技术解析 4. CAN XL + TSN 在自动驾驶领域的典型应用...
从零开始学A2A一：A2A 协议的高级应用与优化
A2A 协议的高级应用与优化 学习目标 掌握 A2A 高级功能 理解多用户支持机制掌握长期任务管理方法学习服务性能优化技巧 理解与 MCP 的差异 分析多智能体场景下的优势掌握不同场景的选择策略 第一部分：多用户支持机制 1. 用户隔离架构 #mermaid-svg-Awx5UVYtqOF…...
追赶地球变化的“快镜头“：遥感时间分辨率的奥秘
在地球表面，万物的生长、兴衰和变迁，如同一部永不停歇的电影。而科学家们想要看清每一帧画面，就必须依赖遥感卫星这个"超级摄影师"。今天，我们就来聊聊遥感领域里一个关键的维度——时间分辨率。 想象一下，如…...
轻量还是全量？Kubernetes ConfigMap 与专业配置中心的抉择
文章目录 简介什么是 ConfigMapConfigMap 的核心能力配置存储与注入动态更新与 Kubernetes 原生生态深度集成 ConfigMap 的固有局限专业配置中心对比选型建议结语 简介 在现代微服务架构中，集中式配置管理是保证应用可维护性、可扩展性和安全性的关键环节。Kuberne…...
mybatis plus打印sql日志到指定目录
1、mybatis plus打印sql日志 参考文档：mybatis plus打印sql日志_mybatisplus日志打印-CSDN博客 2、修改 修改InfoLevelLogger Override public void debug(String s) {// 修改这里logger.info(s);log.debug(s); } 增加：log.debug(s); 修改logback.x…...
CUDAfy的使用
此文章是对一篇使用文档的翻译总结 文档地址 https://www.doczj.com/doc/0f2570173.html CUDAfy使用步骤 1. 环境准备 硬件要求：支持CUDA的NVIDIA显卡（如GTX系列）。软件安装： 安装最新版NVIDIA驱动。下载并安…...
DeepSeek 部署中的常见问题及解决方案
DeepSeek（深度求索）大模型部署过程中常见问题的系统性解决方案，涵盖环境配置、模型加载、性能优化、安全防护及企业级部署等核心场景，结合官方文档与社区实践提供可落地的操作指南： 一、环境配置与依赖问题 1. 操作系统与硬件兼容性 问题表现：部署失败提示驱动不兼容或…...
【AI提示词】儿童看护员
提示说明 儿童看护员旨在帮助用户构建一个既专业又富有爱心的儿童看护员角色，以满足儿童在成长过程中的各种需求。 提示词 # 角色 儿童看护员## 注意 1. 儿童看护员应具备亲和力和耐心，以确保与儿童的良好互动。 2. 专家设计应关注儿童的安全、健康和…...
深入解析 Python 中的装饰器 —— 从基础到实战
1. 装饰器基础 1.1 什么是装饰器？ 装饰器本质上是一个 Python 函数，它可以让其他函数在不需要做任何代码变动的前提下增加额外功能。装饰器的返回值也是一个函数对象。 1.2 语法糖： 符号 Python 提供了 符号作为装饰器的语法糖，…...
学习海康VisionMaster之中线查找
一：进一步学习了 今天学习下VisionMaster中的中线查找，这个就是字面意思，输入两条直线，输出两条直线的中线 二：开始学习 1：什么是中线查找？今天这个比较简单，其实这个模块算是一个几…...
笔记整理五
STP生成树 stp生成树是用于解决二层环路问题的协议。 二层环路为有以下三种： 1.广播风暴 2.MAC地址的偏移（每一次循环，都会导致交换机来回刷新MAC地址表记录） 3.多帧复制 stp生成树：需要将原本的环型拓扑结构转换…...
js实现的前端水印
效果 var defaultConfig {content: [], // 水印内容数组fontSize: 14, // 字体大小(px)fontFamily: sans-serif, // 字体color: rgba(255, 255, 255,.3), // 字体颜色rotate: -20, // 旋转角度(度数)zIndex: 2147483647, // 层级globalAlpha: 0.5, // 透明度canvasWidth: 30…...
前端服务器部署报错记录
报错1：Refused to apply style from http://xxxxxxx.online/assets/index.DepkYCYv.css because its MIME type (text/plain) is not a supported stylesheet MIME type, and strict MIME checking is enabled. index-Dnq3oQAv.js:1 解释：浏览器期望加载…...
JAVA中多线程的经典案例
文章目录 一、线程安全的单例模式（一）饿汉模式（二）懒汉模式 二、阻塞队列（一）生产者消费者模型（二）阻塞队列（三）自定义阻塞队列 三、定时器（一&am…...
国产三维CAD皇冠CAD（CrownCAD）在「轨道交通行业」建模教程：轨道列车
在轨道交通行业，复杂系统集成、大规模装配验证与跨地域协同设计始终是核心痛点。传统设计工具难以应对动辄百万级零部件的装配挑战，且数据孤岛、版本混乱、硬件成本高昂等问题长期制约行业数字化转型。皇冠CAD（CrownCAD）作为国产云…...
Linux 日常运维命令大全
Linux 作为一种开源操作系统，在服务器运维中扮演着重要角色。掌握常用的 Linux 命令对于运维人员而言至关重要。本文将整理一份 Linux 服务器运维常用命令大全，帮助你在日常工作中提高效率和准确性。 1. 基础命令 基础命令是Linux操作的起点࿰…...
安全测试报告模板
安全测试报告 一、项目概况 项目名称XX智慧医疗平台被测系统版本V2.3.1测试类型渗透测试漏洞扫描测试时间2024年2月15-20日测试标准OWASP TOP 10 2021 二、测试环境 生产环境镜像： - 服务器：CentOS 7.9 Tomcat 9 - 数据库：MySQL 8.0集群…...
config.txt常用选项介绍)
树莓派超全系列教程文档--(31)config.txt常用选项介绍
config.txt常用选项介绍 常用选项常用显示选项hdmi_enable_4kp60 常用硬件配置选项camera_auto_detectdisplay_auto_detectdtoverlaydtparamarm_boostpower_force_3v3_pwm 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 常用选项 常用显示选项 …...
算法-堆+单调栈
堆 首先堆在我们的Java中我们的是一个优先队列类 PriorityQueue 然后我们要弄最大堆和最小堆 最大堆： PriorityQueue<Integer> pq new PriorityQueue<Integer>((a, b) -> b - a); 最小堆： PriorityQueue<Integer> pq new P…...
Charles破解 激活码 Java
第一步,下载charles Download a Free Trial of Charles • Charles Web Debugging Proxy 第二部,生成key,这里使用的是java代码 import java.nio.ByteBuffer; import java.nio.ByteOrder; import java.util.Random;public class test {private static final int ROUNDS 12;p…...