背景介绍
我们存在着大量在PC页面通过表格看数据业务场景,表格又分为两种,一种是 antd / fusion 这种基于 dom 元素的表格,另一种是通过 canvas 绘制的类似 excel 的表格。
基于 dom 的表格功能丰富较为美观,能实现多表头、合并单元格和各种自定义渲染(如表格中渲染图形 / 按钮 / 进度条 / 单选框 / 输入框),以展示为主,不提供圈选、整列复制等功能。
canvas 绘制的类 excel 外表朴素更为实用,大量数据渲染不卡顿,操作类似 excel,能行/列选中,圈选、复制等功能。
两者使用场景有所差异,各有利弊,但业务方不希望一套系统中出现两种类型的交互,期望能将两种表格的优缺点进行融合,在美观的dom表格中增加圈选、复制的功能。
圈选效果
业务方所期望的圈选效果和excel类似,鼠标按下即选中元素,然后滑动鼠标,鼠标所经过形成的四边形就是选中区域,此时鼠标右键点击复制按钮,或者键盘按下 ctrl + c 复制文本。
而dom表格经过如上操作,会把一整行数据都选上,不符合业务同学的使用预期。
实现过程
去除默认样式
我们需要自行定义鼠标事件、元素样式,需要先将无用的默认样式清除,包括上图中的 hover 和选中元素的背景色。
禁用表格本身的鼠标点击选择功能,设置css,userSelect: none
去除 hover 样式(这里使用的是 fusion 组件)
.next-table-row:hover {
background-color: transparent !important;
}
鼠标按下,记录选中元素
为表格绑定鼠标按键时触发事件 mousedown
。
当鼠标按下时,这个元素就是中心元素,无论是向哪个方向旋转,所形成的区域一定会包含初始选中的元素。
getBoundingClientRect()
用于获得页面中某个元素的上下左右分别相对浏览器视窗的位置。
const onMouseDown = (event) => {
const rect = event.target.getBoundingClientRect();
// funsion 判断点击是否为表头元素,为否时才继续后面的逻辑。antd 不需要判断,因为点击表头不会触发该事件
const isHeaderNode = event.target?.parentNode?.getAttribute('class')?.indexOf('next-table-header-node') > -1;
if (isHeaderNode) return;
originDir = {
top: rect.top,
left: rect.left,
right: rect.right,
bottom: rect.bottom,
};
// 渲染
renderNodes(originDir);
};
鼠标滑过
为表格绑定鼠标滑过时触发事件 mousemove
。
根据滑动元素的上下左右距离与鼠标按下时的位置进行判断,圈选元素存在四个方向,以第一次选中的元素为中心位置。滑动时元素位于鼠标按下的右下、左下、右上、左上方,根据不同的情况来设置四个角的方位。
const onMouseMove = (event) => {
if (!originDir.top) return;
const rect = event.target.getBoundingClientRect();
let coordinates = {};
// 鼠标按下后往右下方拖动
if (
rect.top <= originDir.top &&
rect.left <= originDir.left &&
rect.right <= originDir.left &&
rect.bottom <= originDir.top
) {
coordinates = {
top: rect.top,
left: rect.left,
right: originDir.right,
bottom: originDir.bottom,
};
}
// 鼠标按下后往左下方拖动
if (
rect.top >= originDir.top &&
rect.left <= originDir.left &&
rect.right <= originDir.right &&
rect.bottom >= originDir.bottom
) {
coordinates = {
top: originDir.top,
left: rect.left,
right: originDir.right,
bottom: rect.bottom,
};
}
// 鼠标按下后往右上方拖动
if (
rect.top <= originDir.top &&
rect.left >= originDir.left &&
rect.right >= originDir.right &&
rect.bottom <= originDir.bottom
) {
coordinates = {
top: rect.top,
left: originDir.left,
right: rect.right,
bottom: originDir.bottom,
};
}
// 鼠标按下后往左上方拖动
if (
rect.top >= originDir.top &&
rect.left >= originDir.left &&
rect.right >= originDir.right &&
rect.bottom >= originDir.bottom
) {
coordinates = {
top: originDir.top,
left: originDir.left,
right: rect.right,
bottom: rect.bottom,
};
}
renderNodes(coordinates);
};
渲染/清除样式
遍历表格中 dom 元素,如果该元素在圈选的区域内,为其添加选中的背景色,再为四边形区域增加边框。
这里无论是直接设置 style 还是添加 classname 都不是很好。直接添加 classname 时,antd 会在 hover 操作时重置 classname,原来设置的 classname 会被覆盖。直接设置 style 可能存在和其他设置冲突的情况,并且最后获取所有圈选元素时比较麻烦。
以上两种方法都尝试过,最后选择了直接往 dom 元素上面添加属性,分别用5个属性保存是否圈选,上下左右边框,这里没有进行合并是因为一个dom元素可能同时存在这五个属性。
const renderNodes = (coordinates) => {
const nodes = document.querySelectorAll('.next-table-cell-wrapper');
nodes.forEach((item) => {
const target = item?.getBoundingClientRect();
clearStyle(item);
if (
target?.top >= coordinates.top &&
target?.right <= coordinates.right &&
target?.left >= coordinates.left &&
target?.bottom <= coordinates.bottom
) {
item.setAttribute('data-brush', 'true');
if (target.top === coordinates.top) {
item.setAttribute('brush-border-top', 'true');
}
if (target.right === coordinates.right) {
item.setAttribute('brush-border-right', 'true');
}
if (target.left === coordinates.left) {
item.setAttribute('brush-border-left', 'true');
}
if (target.bottom === coordinates.bottom) {
item.setAttribute('brush-border-bottom', 'true');
}
}
});
};
const clearStyle = (item) => {
item.hasAttribute('data-brush') && item.removeAttribute('data-brush');
item.hasAttribute('brush-border-top') && item.removeAttribute('brush-border-top');
item.hasAttribute('brush-border-right') && item.removeAttribute('brush-border-right');
item.hasAttribute('brush-border-left') && item.removeAttribute('brush-border-left');
item.hasAttribute('brush-border-bottom') && item.removeAttribute('brush-border-bottom');
};
使用 fusion 的 table 需要为每一个元素添加上透明的边框,不然会出现布局抖动的情况。(antd 不用)
/* 为解决设置样式抖动而设置 */
.next-table td .next-table-cell-wrapper {
border: 1px solid transparent;
}
[brush-border-top="true"] {
border-top: 1px solid #b93d06 !important;
}
[brush-border-right="true"] {
border-right: 1px solid #b93d06 !important;
}
[brush-border-left="true"] {
border-left: 1px solid #b93d06 !important;
}
[brush-border-bottom="true"] {
border-bottom: 1px solid #b93d06 !important;
}
[data-brush="true"] {
background-color: #f5f5f5 !important;
}
.next-table-row:hover {
background-color: transparent !important;
}
鼠标松开
为表格绑定鼠标松开时触发事件 mouseup
。
从鼠标按下,到滑动,最后松开,是一整个圈选流程,在鼠标按下时保存了初始的方位,滑动时判断是否存在方位再进行计算,松开时将初始方位置空。
const onMouseUp = () => {
originDir = {};
};
到这一步,就已经实现了鼠标圈选功能。
复制功能
表格圈选的交互效果其实是为复制功能做准备。
鼠标右键复制
原表格在选中元素时鼠标右键会出现【复制】按钮,点击后复制的效果是图中圈选到的元素每一个都换行展示,圈选行为不能满足使用需求,复制的内容也无法按照页面中展示的行列格式。
而当我们实现圈选功能之后,因为使用 css 属性 "user-select: none" 禁止用户选择文本,此时鼠标右键已经不会出现复制按钮。
为了实现鼠标右键出现复制按钮,我们需要覆盖原鼠标右键事件,自定义复制功能。
1、为表格绑定鼠标右键事件 contextMenu
2、创建一个包含复制按钮的自定义上下文菜单
3、阻止默认的右键菜单弹出,将自定义上下文菜单添加到页面中,并定位在鼠标右键点击的位置。
const onContextMenu = (event) => {
event.preventDefault(); // 阻止默认右键菜单弹出
const contextMenu = document.getElementById('contextMenu');
// 定位上下文菜单的位置
contextMenu.style.left = `${event.clientX}px`;
contextMenu.style.top = `${event.clientY}px`;
// 显示上下文菜单
contextMenu.style.display = 'block';
};
这里复制按钮没有调整样式,可根据自己项目情况进行一些美化。
4、点击复制按钮时,保存当前行列格式执行复制操作。
复制仍然保留表格的样式,这里想了很久,一直在想通过保存dom元素的样式来实现,这种方案存在两个问题,一是保存html样式的api,document.execCommand('copy') 不被浏览器支持,二是表格元素都是行内元素,即使复制了样式,也和页面上看到的布局不一样。
最后采取的方案还是自己对是否换行进行处理,遍历元素时判断当前元素的 top 属性和下一个点距离,如果相同则添加空字符串,不同则添加换行符 \n 。
const onClickCopy = () => {
const contextMenu = document.getElementById('contextMenu');
const copyableElements = document.querySelectorAll('[data-brush=true]');
// 遍历保存文本
let copiedContent = '';
copyableElements.forEach((element, index) => {
let separator = ' ';
if (index < copyableElements.length - 1) {
const next = copyableElements?.[index + 1];
if (next?.getBoundingClientRect().top !== element.getBoundingClientRect().top) {
separator = '\n';
}
}
copiedContent += `${element.innerHTML}${separator}`;
});
// 执行复制操作
navigator.clipboard.writeText(copiedContent).then(() => {
console.log('已复制内容:', copiedContent);
}) .catch((error) => {
console.error('复制失败:', error);
});
// 隐藏上下文菜单
contextMenu.style.display = 'none';
};
5、对鼠标按下事件 onMouseDown 的处理
鼠标点击右键也会触发 onMouseDown ,这时会造成选中区域错乱,需要通过 event.button 判断当前事件触发的鼠标位置。
鼠标右键后如果没有点击复制按钮而是滑走或者使用鼠标左键选中,这时候相当于执行取消复制操作,复制按钮的上下文需要清除。
const onMouseDown = (event) => {
// 0:表示鼠标左键。2:表示鼠标右键。1:表示鼠标中键或滚轮按钮
if (event.button !== 0) return;
// 隐藏复制按钮
const contextMenu = document.getElementById('contextMenu');
contextMenu.style.display = 'none';
};
到这里,就已经实现了圈选鼠标右键复制的功能。
ctrl+s / command+s 复制
使用 event.ctrlKey
来检查 Ctrl 键是否按下,使用 event.metaKey
来检查 Command 键是否按下,并使用 event.key
来检查按下的键是否是 c 键。
useEffect(() => {
const clickSave = (event) => {
if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
onClickCopy();
event.preventDefault(); // 阻止默认的保存操作
}
};
document.addEventListener('keydown', clickSave);
return () => {
document.removeEventListener('keydown', clickSave);
};
}, []);
antd 也可以使用
以上功能是在 fusion design 中实现的,在 antd 中也可以使用,语法稍有不同。
表格中鼠标事件需要绑定在 onRow 函数中
{
return {
onContextMenu,
onMouseDown,
onMouseMove,
onMouseUp,
};
}}
>
获取所有表格 dom 元素的类名替换一下
const nodes = document.querySelectorAll('.ant-table-cell');
覆盖表格 hover 时样式
.ant-table-cell-row-hover {
background: transparent;
}
.ant-table-wrapper .ant-table .ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-wrapper .ant-table .ant-table-tbody > tr > td.ant-table-cell-row-hover {
background: transparent;
}
实现效果是这样的
完整代码
完整代码在这里 table-brush-copy ,包括 fusion design 和 ant design 两个版本,欢迎大家来点个 star。
总结
表格圈选复制功能的实现主要是以下五步
mousedown 按下鼠标,记录初始坐标
mousemove 滑动鼠标,计算所形成的四边形区域
mouseup 松开鼠标,清空初始坐标
contextmenu 自定义鼠标右键事件,定位上下文事件
keydown 监听键盘按下位置,判断是否为复制操作
集合了较多的鼠标、键盘事件,以及 javascript 获取属性、元素。
你可能感兴趣的:(antd/fusion表格增加圈选复制功能)
极狐GitLab 论坛 2.0 全新上线,可以在论坛上查找与 GitLab 相关的问题了~
极小狐
gitlab 极狐GitLab devops GitLab ci/cd devsecops SCM
安装出现依赖错误?版本升级搞不定?遇到422、500就懵逼了?不知道某个功能是免费or付费?……使用GitLab这种全球顶级的DevOps平台进行软件研发时,总会遇到一些困惑,想跟专业的技术人员快速交流以便获得答案,同时又想把这些问题沉淀下来以帮助他人?有这种赠人玫瑰,手有余香的解决方案吗?答案肯定有:论坛!!!论坛——一个各路大神聚集的地方,一个可以解惑答疑问道的地方。解惑:搜索与自己问题相同或
android 自定义曲线图,Android自定义View——贝赛尔曲线
weixin_39767513
android 自定义曲线图
个人博客:haichenyi.com。感谢关注本文针对有一定自定义View的童鞋,最好对贝赛尔曲线有辣么一丢丢了解,不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图:最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹,很规则。其次,他这个正弦图左右在移动。然后,就是它这个自定义View,上下也在移动,是慢慢增加的最后,优化
通俗易懂:MySQL中如何设置只读实例并确保数据一致性?
大龄下岗程序员
mysql java mysql spring
在MySQL中设置只读实例主要应用于构建高可用性和扩展性的数据库环境,通常是为了分担读取负载或者用于备份和灾难恢复。以下是创建MySQL只读实例并确保数据一致性的基本步骤:1.创建并配置只读实例-主从复制设置-首先,你需要有一个主数据库实例(Master)负责接收所有的写操作。-创建一个或多个从数据库实例(Slave),并将它们配置为主数据库的复制品。这通常通过设置主从复制(Replication
天猫超市优惠获取渠道,天猫超市内部优惠劵领取方法使用教程
氧惠全网优惠
天猫超市是一个不错的购物平台,满足用户所需,基本次日达,很方便的购物平台,那么有人问我,天猫超市优惠获取渠道在哪?怎么能够优惠的购买,今天分享给大家;1、天猫超市优惠券抢好券:天猫超市首页每天可以领取满199减30、满235减35、满299减50、满399减60、满166减30等优惠券,领劵方法复制下条口令打开淘宝进入领劵会场;隐藏神券、实时爆款、天天更新!戳>(CZ9185ZatcdhNADlJ
手机上赚钱?学会这5种方法!高省app让你轻松赚钱!
高省浮沉000018
随着智能手机的普及,越来越多的人开始探索在手机上赚钱的方法。不仅可以利用碎片时间增加收入,还能减少对传统办公室工作的依赖。本文将向您介绍5种在手机上赚钱的方法,并推荐一款高省app,帮助您实现手机赚钱的目标。大家好!我是高省APP最大团队&联合创始人浮沉导师!【高省】APP网购优惠券免费领,分享还能赚钱。【高省】是一个自用省钱佣金高,分享推广赚钱多的平台。佣金更高,模式更好,终端用户不流失。0投资
matlab按行读取txt文件数据集
地上悬河
matlab 开发语言
功能:使用Matlab按行读取txt文件,按照特定符号进行分割后加入数组中fid=fopen('coordinate.txt');%首先打开文本文件coordinate.txttemp=[]while~feof(fid)%while循环表示文件指针没到达末尾,则继续%每次读取一行,str是字符串格式str=fgetl(fid);%以','作为分割数据的字符,结果为cell数组s=regexp(st
C#中的PLINQ和LINQ的效率对比
搬砖的诗人Z
C# c# linq 开发语言
PLINQ(ParallelLINQ)和LINQ(LanguageIntegratedQuery)都是.NET框架中的功能,用于对集合进行查询和操作。它们之间的主要区别在于并行处理能力。LINQ:LINQ是一种用于在.NET应用程序中进行数据查询和操作的语言集成功能。它提供了一种统一的方式来查询各种数据源,如集合、数组、XML、数据库等。LINQ是在单线程环境中执行查询操作的,因此对于大型数据集或
请简单介绍一下Shiro框架是什么?Shiro在Java安全领域的主要作用是什么?Shiro主要提供了哪些安全功能?
AaronWang94
shiro java java 安全 开发语言
请简单介绍一下Shiro框架是什么?Shiro框架是一个强大且灵活的开源安全框架,为Java应用程序提供了全面的安全解决方案。它主要用于身份验证、授权、加密和会话管理等功能,可以轻松地集成到任何JavaWeb应用程序中,并提供了易于理解和使用的API,使开发人员能够快速实现安全特性。Shiro的核心组件包括Subject、SecurityManager和Realms。Subject代表了当前与应用
【转载】SSD测试第一神器——FIO
running_sheep
转自:[http://www.ssdfans.com]对于SSD性能测试来说,最好的工具莫过于FIO了。FIO是Jens开发的一个开源测试工具,功能非常强大,本文就只介绍其中一些基本功能。线程,队列深度,Offset,同步异步,DirectIO,BIO使用FIO之前,首先要有一些SSD性能测试的基础知识。线程指的是同时有多少个读或写任务在并行执行,一般来说,CPU里面的一个核心同一时间只能运行一个
大前端-postcss安装使用指南
黑夜照亮前行的路
postcss
PostCSS是一款强大的CSS处理工具,可以用来自动添加浏览器前缀、代码合并、代码压缩等,提升代码的可读性,并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南:一、安装PostCSS在你的项目目录中,通过npm(NodePackageManager)来安装PostCSS。打开命令行窗口,输入以下命令:bash复制代码npminstallpostcss--save-dev这将把
ES-LTR粗排模块
poins
jenkins 运维
ES-LTR粗排模块官方资源:https://github.com/HeiBoWang/elasticsearch-learning-to-rankElasticsearch学习排名插件使用机器学习提高搜索相关性排名。它为维基媒体基金会和Snagajob等地方的搜索提供了动力!这个插件有什么功能此插件:允许您在Elasticsearch中存储特征(Elasticsearch查询模板)记录特征得分(
RabbitMQ 实验消费原始队列消息, 拒绝(reject)投递死信交换机过程
熊明才
rabbitmq 分布式
如果你想通过RabbitMQ的死信队列功能实现消费者拒绝消息投递到死信交换机的行为,你可以按照以下步骤操作:创建原始队列,并将其绑定到一个交换机上:exportRABBITMQ_SERVER=127.0.0.1exportRABBITMQ_PORT=5672exportRABBITMQ_USER=mingcaiexportRABBITMQ_PASSWORD=passwordrabbitmqadmi
掌握Flutter底部导航栏:畅游导航之旅
繁依Fanyi
xml json sql flutter 开发语言 前端 git
1.引言在移动应用开发中,底部导航栏是一种常见且非常实用的用户界面元素。它提供了快速导航至不同功能模块或页面的便捷方式,使用户可以轻松访问应用程序的各个部分。在Flutter中,底部导航栏也是一项强大的功能,开发者可以利用Flutter框架提供的丰富组件和灵活性,轻松实现各种样式和交互效果的底部导航栏。本文将深入探讨Flutter中底部导航栏的实现方法,从基础的结构搭建到高级功能的应用,带领读者逐
2.5 项目讲解流程
王守谦26
项目资料 数据库
一、项目讲解1、自我介绍2、项目流程-===============================二、自我介绍(一)、学员自我介绍,讲解存在的问题比如:讲解年份、卡顿、重点学历、忘记(二)自我规则内容1、开场白:礼貌用语2、时间:自我介绍1-2分钟以内3、内容:姓名、籍贯、毕业院校、(拉进面试官距离)4、技能:功能测试、接口测试、自动化测试、app测试、性能测试、安全测试黑盒测试、白盒测试、灰盒
SQLite版本3中的文件锁定和并发(七)
代码工匠云
数据库 SQLite C与c++ sqlite c++ 数据库
返回:SQLite—系列文章目录上一篇:自己编译SQLite或将SQLite移植到新的操作系统(六)下一篇:SQLite—系列文章目录正文:1.0SQLite版本3中的文件锁定和并发SQLite版本3.0.0引入了新的锁定和日志功能旨在提高SQLite版本2的并发性的机制并减少作家的饥饿问题。新机制还允许交易的原子提交涉及多个数据库文件。本文档介绍新的锁定机制。目标受众是想要理解和/或修改的程序员
Acrobat Pro DC ----专业PDF编辑与管理
*橙子
office pdf macos
AcrobatProDC2023是一款功能强大的PDF处理软件,它提供了丰富的编辑工具,支持创建、编辑、合并、分割PDF文件,以及高质量的PDF到其他格式的转换功能。同时,该软件集成了最新的OCR技术,可将扫描文档或图片转换成可编辑的PDF。AcrobatProDC2023还具备电子签名功能,支持多人协作和云端同步共享,大大提高了工作效率和团队协作效率。无论是设计、建筑、金融还是法律等行业,Acr
上班族适合兼职的副业有哪些?分享五个适合上班族做的副业
高省张导师
对于许多上班族来说,除了日常工作外,还有大量的空闲时间,因此兼职成为了一项非常普遍的选择。下面将向您介绍五个不错的兼职副业,每个兼职都可以很容易地从家中启动,同时也是一个短期见效的方式,可以让您很快增加收入。大家好,我是高省APP最大团队,【高省】是一个可省钱佣金高,能赚钱有收益的平台,百度有几百万篇报道,也期待你的加入。高省邀请码520888,注册送2皇冠会员,送万元推广大礼包。1、社交导购电商
多币种预算
朱先生_hfm
phpstorm
对于开启全球业务的公司来说,公司可能是全资子公司,控股公司,以及驻外办,预算涉及的数据,可以以本位币进行填报,也可以以中间币种,或者以报告币种进行,或者使用多种币种,例如,销售使用美元、日元、英镑,费用使用港币,这就要求预算系统需要提供一个外币折算,记录汇率的功能,使得用户可以在录入数据时候使用不同的币种,之后根据汇率,把不同币种折算成系统固定的币种
2020-04-09
柠_fc84
我和清新冥想的相伴之旅我是来自大二的学生,一名性格活泼的女学生。平时没事喜欢看看书,做做运动,同时也是一名英语爱好者。因一次机遇结识了潘多拉口语课,在此获益良多,但这单单是满足不了我的,也是因为随着现在课程的开展,生活烦心事的增加,情绪波动大,使我紧绷。于是我和清新冥想课程英文版相遇啦。它带给我不一样的体验,使我的心情越来越轻松,那些不好的情绪也愈见愈远,我刚开始接触的时候是好奇,本来加上我对英语
冷门知识 | 大雪冻skr个人,知道其中三条冷知识温暖整个冬天~
带你玩儿
今日大雪今日节气——大雪,可是并没有下雪。“嗷~~冻死了”“啊~好冷啊”办公室里的伙伴们一进门都是出奇的一致好吧,那今天的冷知识,就让小八给大家来送些温暖吧~温暖整个冬天的冷知识其实喝酒不能暖身子喝酒只会降低身体内部温度,增加患上低体温症的风险,喝酒也会阻断身体自然颤抖保暖的机制。之所以喝酒会感觉暖暖的,因为酒精让血管扩张,将温暖的血液带到体表。所以喝酒带来的暖是暂时的,最后反而会大大降低身体抵抗
项目管理工具最佳实践
水岩
各个公司的最佳实践去哪儿jira自定义使用1.jira编号对应git分支命名,后台增加监控程序,新增一个分支,自动解析分支中的jira编号,自动落地到数据库,完成映射2.各个发布系统间信息同步,消息中心(IC)+数据中心(DC),广播消息加一站式查询,持续集成,推进代码检查质量,分钟级反馈质量检查反思:1.项目管好:针对一线研发人员,简单易用,而不是满足管理层的“统计度量”(...)简化分类字段,
遗落的光阴
古诗风光
第七篇,小明的学生时代。小明和他的同桌的共听一首歌的行为已经实现了。所以每次没事就和他的同桌一起畅听音乐,这也导致了一些场面都发生,一就是她的隔壁同桌时不时的鄙夷的眼光,二是他进一步加聚了他同桌对他的态度,他的同桌除了平时的听音乐交流之外,还增加了与他的交流。其中最关键的就是,因为他的同桌没事就与他的进行生活的交流。其中最关键的就是在一个不上课的周末小明独自一人回到了宿舍进行学习。而这时他的同桌带
Linux学习系列之vim编辑器(一)
llibertyll
linux 学习
vi编辑器的操作模式输入模式—aio等—>命令模式<—:键—末行模式从输入/末行模式切换到命令模式都是需要按ESC键注:a光标后输入,i光标前输入,o直接向下加一行输入,O向上加一行输入在vi编辑器中光标的移动(命令行模式下)键组合(命令)光标的移动$光标移动到当前行的结尾0(零)光标移动到当前行的开始GG光标移动到最后一行gg光标移动到第一行在命令行模式下删除与复制的操作键组合(命令)含义dd删
Django forms组件
在飞行-米龙
Django django python 后端
【一】引入【1】实现登陆验证功能(1)需求分析登陆验证需要前后端交互,采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容(2)后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
C语言pthread互斥锁(mutex)和可重入锁(递归锁recursive)的演示
嫦娥妹妹等等我
开发语言 c语言
实验理论参考:1一旦共享资源被互斥锁锁定,则其余线程想访问共享资源必须等待,直到锁被释放2使用normal属性的互斥锁,一旦发生重入逻辑,则阻塞,成为死锁需要将属性改为recursive成为可重入的,递归的代码功能:1命令行传参1model=1演示异步未上锁之乱序演示count在数据竞态(RaceCondition)下的错误值2命令行传参2model=2演示使用互斥锁后线程的执行顺序演示count
上班族什么副业赚钱 上班族做什么兼职赚钱
指北针聊天项目
许多朋友都了解,目前仅靠工资收入很难储蓄,甚至难以维持生活开支,事实上,增加月收入可以通过发展副业来实现。有一些朋友可能会疑惑:如果我每天都要上班,哪里有时间来做副业呢?下面我分享10个可以在家赚钱的在线副业(建议收藏),无需投入太多时间,您可以在下班后的碎片时间进行,而且门槛很低,希望发展副业的朋友可以选择适合自己的方式来开始赚钱。有兴趣的朋友可以扫码了解我现在做的平台,没有任何费用的啦,是一个
java基础相关面试题详细总结
。。。。。96
java 开发语言
1.Java中的数据类型有哪些?答:Java中的数据类型包括基本数据类型(如整数、浮点数、字符等)和引用数据类型(如类、接口、数组等)。2.什么是面向对象编程(OOP)?答:面向对象编程是一种编程范式,它将数据和对数据的操作封装在一起,形成对象。通过对象之间的交互来实现程序的功能。3.解释类和对象的关系。答:类是对象的抽象描述,而对象是类的具体实例。一个类可以创建多个对象,每个对象都具有类中定义的
Thinkphp - 详细实现网站系统登录功能,附带 Mysql 数据库设置、Web 前端展示界面、信息校验等(详细代码,即设计过程)
王佳斌
+ Thinkphp mysql 前端 数据库
前言登录功能,是我们几乎开发每个系统都必须的模块。登录功能设计思路,主要包括几个方面。用户输入网址展示登录页面用户输入用户名,密码等点击登录进行信息校验校验通过之后,记录用户登录信息,跳转指定页面用户校验失败,提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面,我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
使用Python读取Excel文件并计算平均分
嘻嘻爱编码
Python从入门到放弃 python excel 开发语言
在这篇博客中,我们将探讨如何使用Python的pandas库来读取Excel文件,并计算其中数据的平均分。pandas是一个强大的数据分析工具,它允许我们以简单直观的方式处理表格数据。安装必要的库在开始之前,确保你的环境中安装了pandas和openpyxl库。可以使用以下命令进行安装:pipinstallpandasopenpyxl读取Excel文件首先,我们需要读取Excel文件。假设我们有一
Java面试题:解释JVM的内存结构,并描述堆、栈、方法区在内存结构中的角色和作用,Java中的多线程是如何实现的,Java垃圾回收机制的基本原理,并讨论常见的垃圾回收算法
杰哥在此
Java系列 java jvm 算法 面试
Java内存模型与多线程的深入探讨在Java的世界里,内存模型和多线程是开发者必须掌握的核心知识点。它们不仅关系到程序的性能和稳定性,还直接影响到系统的可扩展性和可靠性。下面,我将通过三个面试题,带领大家深入理解Java内存模型、多线程以及并发编程的相关原理和实践。面试题一:请解释JVM的内存结构,并描述堆、栈、方法区在内存结构中的角色和作用。关注点:JVM内存结构的基本组成堆、栈、方法区的功能和
PHP如何实现二维数组排序?
IT独行者
二维数组 PHP 排序
二维数组在PHP开发中经常遇到,但是他的排序就不如一维数组那样用内置函数来的方便了,(一维数组排序可以参考本站另一篇文章【PHP中数组排序函数详解汇总】)。二维数组的排序需要我们自己写函数处理了,这里UncleToo给大家分享一个PHP二维数组排序的函数:
代码:
functionarray_sort($arr,$keys,$type='asc'){
$keysvalue= $new_arr
【Hadoop十七】HDFS HA配置
bit1129
hadoop
基于Zookeeper的HDFS HA配置主要涉及两个文件,core-site和hdfs-site.xml。
测试环境有三台
hadoop.master
hadoop.slave1
hadoop.slave2
hadoop.master包含的组件NameNode, JournalNode, Zookeeper,DFSZKFailoverController
由wsdl生成的java vo类不适合做普通java vo
darrenzhu
VO wsdl webservice rpc
开发java webservice项目时,如果我们通过SOAP协议来输入输出,我们会利用工具从wsdl文件生成webservice的client端类,但是这里面生成的java data model类却不适合做为项目中的普通java vo类来使用,当然有一中情况例外,如果这个自动生成的类里面的properties都是基本数据类型,就没问题,但是如果有集合类,就不行。原因如下:
1)使用了集合如Li
JAVA海量数据处理之二(BitMap)
周凡杨
java 算法 bitmap bitset 数据
路漫漫其修远兮,吾将上下而求索。想要更快,就要深入挖掘 JAVA 基础的数据结构,从来分析出所编写的 JAVA 代码为什么把内存耗尽,思考有什么办法可以节省内存呢? 啊哈!算法。这里采用了 BitMap 思想。
首先来看一个实验:
指定 VM 参数大小: -Xms256m -Xmx540m
java类型与数据库类型
g21121
java
很多时候我们用hibernate的时候往往并不是十分关心数据库类型和java类型的对应关心,因为大多数hbm文件是自动生成的,但有些时候诸如:数据库设计、没有生成工具、使用原始JDBC、使用mybatis(ibatIS)等等情况,就会手动的去对应数据库与java的数据类型关心,当然比较简单的数据类型即使配置错了也会很快发现问题,但有些数据类型却并不是十分常见,这就给程序员带来了很多麻烦。
&nb
Linux命令
510888780
linux命令
系统信息
arch 显示机器的处理器架构(1)
uname -m 显示机器的处理器架构(2)
uname -r 显示正在使用的内核版本
dmidecode -q 显示硬件系统部件 - (SMBIOS / DMI)
hdparm -i /dev/hda 罗列一个磁盘的架构特性
hdparm -tT /dev/sda 在磁盘上执行测试性读取操作
cat /proc/cpuinfo 显示C
java常用JVM参数
墙头上一根草
java jvm参数
-Xms:初始堆大小,默认为物理内存的1/64(<1GB);默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40%时,JVM就会增大堆直到-Xmx的最大限制
-Xmx:最大堆大小,默认(MaxHeapFreeRatio参数可以调整)空余堆内存大于70%时,JVM会减少堆直到 -Xms的最小限制
-Xmn:新生代的内存空间大小,注意:此处的大小是(eden+ 2
我的spring学习笔记9-Spring使用工厂方法实例化Bean的注意点
aijuans
Spring 3
方法一:
<bean id="musicBox" class="onlyfun.caterpillar.factory.MusicBoxFactory"
factory-method="createMusicBoxStatic"></bean>
方法二:
mysql查询性能优化之二
annan211
UNION mysql 查询优化 索引优化
1 union的限制
有时mysql无法将限制条件从外层下推到内层,这使得原本能够限制部分返回结果的条件无法应用到内层
查询的优化上。
如果希望union的各个子句能够根据limit只取部分结果集,或者希望能够先排好序在
合并结果集的话,就需要在union的各个子句中分别使用这些子句。
例如 想将两个子查询结果联合起来,然后再取前20条记录,那么mys
数据的备份与恢复
百合不是茶
oracle sql 数据恢复 数据备份
数据的备份与恢复的方式有: 表,方案 ,数据库;
数据的备份:
导出到的常见命令;
参数 说明
USERID 确定执行导出实用程序的用户名和口令
BUFFER 确定导出数据时所使用的缓冲区大小,其大小用字节表示
FILE 指定导出的二进制文
线程组
bijian1013
java 多线程 thread java多线程 线程组
有些程序包含了相当数量的线程。这时,如果按照线程的功能将他们分成不同的类别将很有用。
线程组可以用来同时对一组线程进行操作。
创建线程组:ThreadGroup g = new ThreadGroup(groupName);
&nbs
top命令找到占用CPU最高的java线程
bijian1013
java linux top
上次分析系统中占用CPU高的问题,得到一些使用Java自身调试工具的经验,与大家分享。 (1)使用top命令找出占用cpu最高的JAVA进程PID:28174 (2)如下命令找出占用cpu最高的线程
top -Hp 28174 -d 1 -n 1
32694 root 20 0 3249m 2.0g 11m S 2 6.4 3:31.12 java
【持久化框架MyBatis3四】MyBatis3一对一关联查询
bit1129
Mybatis3
当两个实体具有1对1的对应关系时,可以使用One-To-One的进行映射关联查询
One-To-One示例数据
以学生表Student和地址信息表为例,每个学生都有都有1个唯一的地址(现实中,这种对应关系是不合适的,因为人和地址是多对一的关系),这里只是演示目的
学生表
CREATE TABLE STUDENTS
(
C/C++图片或文件的读写
bitcarter
写图片
先看代码:
/*strTmpResult是文件或图片字符串
* filePath文件需要写入的地址或路径
*/
int writeFile(std::string &strTmpResult,std::string &filePath)
{
int i,len = strTmpResult.length();
unsigned cha
nginx自定义指定加载配置
ronin47
进入 /usr/local/nginx/conf/include 目录,创建 nginx.node.conf 文件,在里面输入如下代码:
upstream nodejs {
server 127.0.0.1:3000;
#server 127.0.0.1:3001;
keepalive 64;
}
server {
liste
java-71-数值的整数次方.实现函数double Power(double base, int exponent),求base的exponent次方
bylijinnan
double
public class Power {
/**
*Q71-数值的整数次方
*实现函数double Power(double base, int exponent),求base的exponent次方。不需要考虑溢出。
*/
private static boolean InvalidInput=false;
public static void main(
Android四大组件的理解
Cb123456
android 四大组件的理解
分享一下,今天在Android开发文档-开发者指南中看到的:
App components are the essential building blocks of an Android
[宇宙与计算]涡旋场计算与拓扑分析
comsci
计算
怎么阐述我这个理论呢? 。。。。。。。。。
首先: 宇宙是一个非线性的拓扑结构与涡旋轨道时空的统一体。。。。
我们要在宇宙中寻找到一个适合人类居住的行星,时间非常重要,早一个刻度和晚一个刻度,这颗行星的
同一个Tomcat不同Web应用之间共享会话Session
cwqcwqmax9
session
实现两个WEB之间通过session 共享数据
查看tomcat 关于 HTTP Connector 中有个emptySessionPath 其解释如下:
If set to true, all paths for session cookies will be set to /. This can be useful for portlet specification impleme
springmvc Spring3 MVC,ajax,乱码
dashuaifu
spring jquery mvc Ajax
springmvc Spring3 MVC @ResponseBody返回,jquery ajax调用中文乱码问题解决
Spring3.0 MVC @ResponseBody 的作用是把返回值直接写到HTTP response body里。具体实现AnnotationMethodHandlerAdapter类handleResponseBody方法,具体实
搭建WAMP环境
dcj3sjt126com
wamp
这里先解释一下WAMP是什么意思。W:windows,A:Apache,M:MYSQL,P:PHP。也就是说本文说明的是在windows系统下搭建以apache做服务器、MYSQL为数据库的PHP开发环境。
工欲善其事,必须先利其器。因为笔者的系统是WinXP,所以下文指的系统均为此系统。笔者所使用的Apache版本为apache_2.2.11-
yii2 使用raw http request
dcj3sjt126com
http
Parses a raw HTTP request using yii\helpers\Json::decode()
To enable parsing for JSON requests you can configure yii\web\Request::$parsers using this class:
'request' =&g
Quartz-1.8.6 理论部分
eksliang
quartz
转载请出自出处:http://eksliang.iteye.com/blog/2207691 一.概述
基于Quartz-1.8.6进行学习,因为Quartz2.0以后的API发生的非常大的变化,统一采用了build模式进行构建;
什么是quartz?
答:简单的说他是一个开源的java作业调度框架,为在 Java 应用程序中进行作业调度提供了简单却强大的机制。并且还能和Sp
什么是POJO?
gupeng_ie
java POJO 框架 Hibernate
POJO--Plain Old Java Objects(简单的java对象)
POJO是一个简单的、正规Java对象,它不包含业务逻辑处理或持久化逻辑等,也不是JavaBean、EntityBean等,不具有任何特殊角色和不继承或不实现任何其它Java框架的类或接口。
POJO对象有时也被称为Data对象,大量应用于表现现实中的对象。如果项目中使用了Hiber
jQuery网站顶部定时折叠广告
ini
JavaScript html jquery Web css
效果体验:http://hovertree.com/texiao/jquery/4.htmHTML文件代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网页顶部定时收起广告jQuery特效 - HoverTree<
Spring boot内嵌的tomcat启动失败
kane_xie
spring boot
根据这篇guide创建了一个简单的spring boot应用,能运行且成功的访问。但移植到现有项目(基于hbase)中的时候,却报出以下错误:
SEVERE: A child container failed during start
java.util.concurrent.ExecutionException: org.apache.catalina.Lif
leetcode: sort list
michelle_0916
Algorithm linked list sort
Sort a linked list in O(n log n) time using constant space complexity.
====analysis=======
mergeSort for singly-linked list
====code======= /**
* Definition for sin
nginx的安装与配置,中途遇到问题的解决
qifeifei
nginx
我使用的是ubuntu13.04系统,在安装nginx的时候遇到如下几个问题,然后找思路解决的,nginx 的下载与安装
wget http://nginx.org/download/nginx-1.0.11.tar.gz
tar zxvf nginx-1.0.11.tar.gz
./configure
make
make install
安装的时候出现
用枚举来处理java自定义异常
tcrct
java enum exception
在系统开发过程中,总少不免要自己处理一些异常信息,然后将异常信息变成友好的提示返回到客户端的这样一个过程,之前都是new一个自定义的异常,当然这个所谓的自定义异常也是继承RuntimeException的,但这样往往会造成异常信息说明不一致的情况,所以就想到了用枚举来解决的办法。
1,先创建一个接口,里面有两个方法,一个是getCode, 一个是getMessage
public
erlang supervisor分析
wudixiaotie
erlang
当我们给supervisor指定需要创建的子进程的时候,会指定M,F,A,如果是simple_one_for_one的策略的话,启动子进程的方式是supervisor:start_child(SupName, OtherArgs),这种方式可以根据调用者的需求传不同的参数给需要启动的子进程的方法。和最初的参数合并成一个数组,A ++ OtherArgs。那么这个时候就有个问题了,既然参数不一致,那