背景介绍
我们存在着大量在PC页面通过表格看数据业务场景，表格又分为两种，一种是 antd / fusion 这种基于 dom 元素的表格，另一种是通过 canvas 绘制的类似 excel 的表格。
基于 dom 的表格功能丰富较为美观，能实现多表头、合并单元格和各种自定义渲染（如表格中渲染图形 / 按钮 / 进度条 / 单选框 / 输入框），以展示为主，不提供圈选、整列复制等功能。
canvas 绘制的类 excel 外表朴素更为实用，大量数据渲染不卡顿，操作类似 excel，能行/列选中，圈选、复制等功能。
两者使用场景有所差异，各有利弊，但业务方不希望一套系统中出现两种类型的交互，期望能将两种表格的优缺点进行融合，在美观的dom表格中增加圈选、复制的功能。
圈选效果
业务方所期望的圈选效果和excel类似，鼠标按下即选中元素，然后滑动鼠标，鼠标所经过形成的四边形就是选中区域，此时鼠标右键点击复制按钮，或者键盘按下 ctrl + c 复制文本。
而dom表格经过如上操作，会把一整行数据都选上，不符合业务同学的使用预期。
实现过程
去除默认样式
我们需要自行定义鼠标事件、元素样式，需要先将无用的默认样式清除，包括上图中的 hover 和选中元素的背景色。
禁用表格本身的鼠标点击选择功能，设置css，userSelect: none
< Tablestyle = { { userSelect: 'none' }} > Table >
去除 hover 样式（这里使用的是 fusion 组件）
.next-table-row:hover {
background-color : transparent !important ;
}
鼠标按下，记录选中元素
为表格绑定鼠标按键时触发事件 mousedown。
当鼠标按下时，这个元素就是中心元素，无论是向哪个方向旋转，所形成的区域一定会包含初始选中的元素。
getBoundingClientRect() 用于获得页面中某个元素的上下左右分别相对浏览器视窗的位置。
const onMouseDown = ( event ) => {
const rect = event. target. getBoundingClientRect ( ) ;
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) ;
} ;
< Table style= { { userSelect : 'none' } } onMouseDown= { onMouseDown} > < / Table>
鼠标滑过
为表格绑定鼠标滑过时触发事件 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) ;
} ;
< Table
style= { { userSelect : 'none' } }
onMouseDown= { onMouseDown}
onMouseMove= { onMouseMove}
> < / Table>
渲染/清除样式
遍历表格中 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 = { } ;
} ;
< Table
style= { { userSelect : 'none' } }
onMouseDown= { onMouseDown}
onMouseMove= { onMouseMove}
onMouseUp= { onMouseUp}
> < / Table>
到这一步，就已经实现了鼠标圈选功能。
复制功能
表格圈选的交互效果其实是为复制功能做准备。
鼠标右键复制
原表格在选中元素时鼠标右键会出现【复制】按钮，点击后复制的效果是图中圈选到的元素每一个都换行展示，圈选行为不能满足使用需求，复制的内容也无法按照页面中展示的行列格式。
而当我们实现圈选功能之后，因为使用 css 属性 “user-select: none” 禁止用户选择文本，此时鼠标右键已经不会出现复制按钮。
为了实现鼠标右键出现复制按钮，我们需要覆盖原鼠标右键事件，自定义复制功能。
1、为表格绑定鼠标右键事件 contextMenu
< Tablestyle = { { userSelect: 'none' }}
onMouseDown = { onMouseDown} onMouseMove = { onMouseMove} onMouseUp = { onMouseUp} onContextMenu = {onContextMenu}> Table > 2、创建一个包含复制按钮的自定义上下文菜单
< divid = " contextMenu" className = " context-menu" style = { { cursor: 'pointer' }} > < divonClick = { onClickCopy} > div > div > 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 ) => {
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 获取属性、元素。
你可能感兴趣的:(业务需求,前端,javascript,reactjs,react.js)
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版：整体布局、架构调整（二）
喜欢敲代码的程序员
前后端分离 SpringBoot Spring spring boot mybatis mysql vue.js elementui
目录一、前言二、后端调整1.实体类调整2.菜单相关接口3.用户相关接口4.新增工具类5.新增菜单树返回类6.配置类、拦截器三、前端调整1.请求调整2.页面布局、样式调整1.user.vue2.index.vue3.请求拦截四、开发过程中的问题五、附：源码1.源码下载地址六、结语一、前言此文章在上次的基础上进行了部分调整，并根据用户体验（我自己）确认了页面整体布局和数据呈现，暂定就先这样，后续有需要
Fiddler中文版如何提升API调试效率：本地化优势与开发者实战体验汇总
代码背锅人日志
ios 小程序 uni-app iphone android webview https
在现代软件开发中，调试网络请求是不可或缺的一环。无论是Web前端、移动App，还是后端微服务，只要涉及到API通信，就离不开高效的抓包工具。Fiddler作为全球使用最广泛的抓包调试工具之一，凭借功能强大、灵活扩展和跨平台支持，深受开发者喜爱。而对于中文用户而言，Fiddler中文版的出现，让这款专业工具变得更加亲民、高效和易于掌握。本文将结合开发者日常使用场景，解析Fiddler中文版如何通过本
#TypeScript高频面试题总结（2025版）
沈大大520
typescript 前端 面试
本文将分享TypeScript高频面试题的一些面试点以及相应的示列作者：沈大大更新时间：2025-03-11前言TypeScript作为JavaScript的超集，已经成为前端开发中不可或缺的技术。本文整理了最常见的TypeScript面试题，从基础到高级，帮助你全面准备技术面试。基础概念篇1.TypeScript与JavaScript的区别是什么？TypeScript是JavaScript的超集
前端开发实践：疑难问题与解决方案总结
沈大大520
实际开发所遇见的问题 vue.js 前端
本文将分享前端开发实践：疑难问题与解决方案总结，希望对大家在面试过程中有一定的帮助！作者：沈大大更新时间：2025-03-13前言在前端开发过程中，我们经常会遇到各种各样的技术难题。本文将分享在实际开发中遇到的一些典型问题及其解决方案，希望能给其他开发者一些参考和启发。性能优化类问题1.首屏加载过慢问题描述页面首次加载时间超过3秒用户等待时间过长白屏时间明显问题分析打包体积过大第三方库引入过多未进
js实现百度地图的自定义marker与css3动画的交互
沈大大520
css3动画 扩展自定义百度地图maker js css3 javascript 前端 html5
使用过百度地图，业务需求需要对某些特定标记物进行高亮和动画标记，因此采用css3对百度地图的marker组件进行动态效果的调试，一：调用百度地图的apiDocument.map{width:100%;height:100%;background:#d5e6f5;position:absolute;float:left;}二：初始化百度地图创建实例varmap=newBMapGL.Map("map"
springBoot服务之间的转发
场景：前端请求的服务里没有关于该业务相关的代码。另一台服务有，这时候转发过去再处理明显方便多了。设前端请求的服务为A，实际处理的服务为B在服务A，我们这样写@PostMapping("delHlpxglHlcfjl")publicObjectdelHlpxglHlcfjl(@RequestBodyMapparam){try{Stringurl=baseUrl+"服务B实际接口名称";log.inf
实现顶部固定与平滑滑动二级菜单的网页导航设计
本文还有配套的精品资源，点击获取简介：现代网页设计中，高效的导航菜单对用户体验至关重要。本设计涵盖固定在顶部的导航栏和二级菜单项的平滑滑动效果。通过CSS实现导航栏的固定定位，而JavaScript则负责二级菜单的平滑过渡动画。包含的文件如HTML结构、JavaScript交互逻辑、CSS样式和可能的图像资源，共同构建了这种流行的导航菜单布局。1.顶部固定、二级栏目之间相互滑动的导航菜单在现代网页
7.3 React+CLI双剑合璧：GitHub监控工具界面开发实战全攻略
少林码僧
github 前端 gpt 人工智能 语言模型
React+CLI双剑合璧：GitHub监控工具界面开发实战全攻略-GitHubSentinelAgent用户界面原型设计与实现关键词：前端框架选型、React原型设计、API集成策略、CLI开发、组件化测试1.1用户界面功能规划通过ChatGPT交互式规划核心功能模块：
vue-element-plus-admin：一套基于vue3、element-plus、ts、vite的后台集成方案
vue-element-plus-admin：一套基于vue3、element-plus、ts、vite的后台集成方案，中后台前端解决方案的探索与实践。框架示例图：在线预览：https://element-plus-admin.cn摘要：本文主要介绍了vue-element-plus-admin，一个基于element-plus的免费开源中后台前端模版。文章首先介绍了该模版的开发背景和技术栈，然后
Java通用实体验证框架：从业务需求到可复用代码的完整实现
Java通用实体验证框架：从业务需求到可复用代码的完整实现一、业务需求：为什么需要验证框架？场景：处理订单配送费数据时，需确保列表中所有记录的以下字段一致：付款公司ID（payId）币种ID（currencyId）银行账号（bankNum，需去空格后验证）银行名称（bankName）传统实现问题：//硬编码验证（重复且难以维护）Listlist=...;if(list.isEmpty())thro
Vue 2 和 Vue 3 区别
哈哈123453
vue.js 前端 javascript html
1.响应式系统原理Vue2：利用Object.defineProperty()实现属性拦截。存在局限性，无法自动监测对象属性增减，需用Vue.set/delete；数组变异方法要重写；深层对象递归转换性能差。Vue3：采用ES6Proxy代理对象，能直接拦截属性访问修改。无需特殊API就能监测属性变化；数组操作拦截更自然；深层响应式惰性处理，提升性能。javascript//Vue3响应式创建im
网络安全之如何设置云服务器禁止 ping？两种设置方法教你搞定 云服务器无法ping通、ping不通云主机、Linux禁止ping、ICMP屏蔽、网络安全最佳实践 sysctl.conf配置
代码简单说
运维宝典限时特惠 服务器 web安全 linux 服务器禁止ping 云服务器禁止ping 服务器禁止ping的方法
云主机如何设置云服务器禁止ping？两种设置方法教你搞定标签：云服务器无法ping通、ping不通云主机、Linux禁止ping、ICMP屏蔽、网络安全最佳实践、sysctl.conf配置前几天上线了一个测试服务，总有安全团队扫端口，还时不时用ping探测存活，我开始思考：云服务器到底要不要禁ping？一、禁ping的好处和坏处作为一名前端转全栈开发的程序员，我越来越觉得网络安全不能忽视。“pin
浏览器渲染引擎和JS引擎分类
渲染引擎：Firefox：Gecko引擎Safari：WebKit引擎Chrome：Blink引擎IE:Trident引擎Edge:EdgeHTML引擎JS引擎：SpiderMonkey(Firefox)，火狐Nitro/JavaScriptCore(Safari)，苹果IOS浏览器V8(Chrome,Chromium)，Node.js也是V8Chakra(MicrosoftInternetExp
Vue入门
LUO-CHEn
Java温馨Talk vue
vue1、vue概述（1）概念vue.js（读音/vjuː/,类似于view）是一套构建用户界面的渐进式框架。Vue只关注视图层，采用自底向上增量开发的设计。随着项目业务场景的复杂,传统模式(html+jquery)已无法满足需求,就出现了Angular/React/Vue等框架（2）特点1、Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。2、Vue.JS是优秀的前端Jav
AJAX和CORS通信
Sᴀғᴇᴛʏ.944
笔记 ajax javascript 服务器
AJAX浏览器与服务器之间，采用HTTP协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出HTTP请求。1999年，微软公司发布IE浏览器5.0版，第一次引入新功能：允许JavaScript脚本向服务器发起HTTP请求。这个功能当时并没有引起注意，直到2004年Gmail发布和2005年GoogleMap发布，才引起广泛重视。2005年2月，AJ
Vue + SpringBoot 实现文件的断点上传、秒传，存储到Minio
鱼虾一整碗•
vue.js 前端 javascript
一、前端1.计算文件的md5值前端页面使用的elment-plus的el-upload组件。当上传文件后，会调用handleChange方法，可以在这里进行文件相关的操作。//处理文件上传consthandleChange=async(uploadFile)=>{//文件名字letfileName=uploadFile.name//文件的大小constfileSize=uploadFile.siz
UmiJs+react-web3连接Metamask钱包
本人是步入Web3两个月的小菜鸟，经历了一个月react的后台项目开发，此文章适合刚进入区块链行业的前端同学使用(掌握html、js、css)，还请大佬们轻点！！需求：添加Metamask插件实现点击按钮->链接钱包，并在刷新时自动链接。实现点击按钮->添加Chain节点。实现点击按钮->切换Ethereum/Rinkeby节点，切换时页面将刷新。实现点击按钮->获取账户余额。实现点击按钮->获取
前端面试专栏-算法篇：20. 贪心算法与动态规划入门
欢迎来到前端面试通关指南专栏！从js精讲到框架到实战，渐进系统化学习，坚持解锁新技能，祝你轻松拿下心仪offer。前端面试通关指南专栏主页前端面试专栏规划详情贪心算法与动态规划入门在计算机科学领域，算法是解决问题的核心工具。而贪心算法与动态规划作为两种重要的算法设计策略，广泛应用于优化问题中。本文将深入浅出地介绍这两种算法的基本概念、适用场景、实现方法，并通过经典案例帮助读者理解和掌握它们的核心思
AI时代下如何学习前端之第2篇：前端开发者的“AI焦虑“：被替代还是被赋能？
指尖动听知识库
AI时代下如何学习前端 人工智能 前端
文/指尖动听知识库-胖胖文章为付费内容，商业行为，禁止私自转载及抄袭，违者必究！！！文章专栏：AI时代下如何学习前端“每当我看到AI生成完美代码时，都会想：我的工作还有价值吗？”——一位有5年经验的前端开发者如果你读了上一篇《ChatGPT问世后ÿ
H3初识——入门介绍之serveStatic、cookie
简介H3是一个轻量、快速、可组合的服务器框架，适用于现代JavaScript运行时。它基于网页标准原语，如Request、Response、URL和Headers。你可以将H3集成到任何兼容的运行时，或者将其他支持web的处理器挂载到H3，几乎不会带来额外延迟。主要特性极简、快速、无依赖支持中间件和自定义路由兼容Node.jsHTTP服务安装npmih3@beta快速开始下面是一个使用H3创建简单
踩坑：mysql 查询时间结果少了一天
1.场景：本人是在springboot项目中从数据库获取时间传到前端进行展示，所以在实体类上使用注解@JsonFormat进行格式转换。最后发现时间少了一天，最后锁定是时区的问题。@JsonFormat默认是标准时区的时间，会出现少8小时的情况。使用时，加上时区timezone="GMT+8"2.解决方案：在实体类需要时间转换的字段上加上下面其中任意一个就可以了@JsonFormat(patter
Html+Css+JavaScript+Vue+Axios入门
chen_ever
javascript 前端 html
一.HTMLHTML（HyperTextMarkupLanguage）是构建网页的基础语言，用于定义网页的结构和内容。以下介绍HTML的基本概念和用法。页面标题这是一级标题这是一个段落。声明文档类型为HTML5。标签是文档的根元素。包含元信息，如标题和CSS链接。包含可见的页面内容。常用HTML标签到：标题标签，数字越小级别越高。：段落标签。链接文本：超链接标签。：图像标签。和：无序列表。和：有序
JavaScript Symbol 属性详解
超烦淇淇
javascript 前端 开发语言 笔记
一、Symbol的本质与基础1.Symbol是什么JavaScript的第七种原始数据类型（ES6引入）创建唯一的、不可变的标识符主要用途：作为对象的属性键（Symbol属性）//创建Symbolconstid=Symbol('id');//'id'是描述符（可选）console.log(typeofid);//"symbol"2.核心特性特性说明示例唯一性每个Symbol都是唯一的Symbol(
Docker安装部署MySQL+Canal+Kafka+Camus+HIVE数据实时同步
是小南啊_-
Java java centos docker kafka hadoop
因为公司业务需求要将mysql的数据实时同步到hive中，在网上找到一套可用的方案，即MySQL+Canal+Kafka+Camus+HIVE的数据流通方式，因为是首次搭建，所以暂时使用伪分布式的搭建方案。一、安装docker安装docker的教程网上一搜一大把,请参考：centos下docker安装教程二、docker安装MySQL安装教程网上也有很多，请参考:docker安装MySQL1.开启
从点子到原型只需10分钟：用 Copilot 快速验证产品功能
网罗开发
AI 大模型 Python 技术汇总 人工智能 copilot
网罗开发（小红书、快手、视频号同名） 大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者：《ESP32-C3物联网工程开发实战》图书作者：《SwiftUI入门，进阶与实战》超级个体：CO
thinkphp(thinkcmf)前端 “加载更多功能“ 知识点
$(function(){ //点击加载更多 varendNum=0; $("#getMore").click(function(){ varstartNum=endNum; vardisNum=2 endNum=startNum+disNum; $.ajax({ url:"__ROOT__/api/blog/life/do
点播直播弹幕实现1
Flyzz~
Java技术学习 spring boot java
点播弹幕实现简要说明之前突然觉得弹幕视频还挺有意思的，就想自己也实现点播弹幕和直播弹幕。由于是主学后端的，对于自己手动实现前端的弹幕功能感到困难，于是上网搜索有没有相关实现，首先找到了**CommentCoreLibrary**项目，不过貌似只能全局script导入，没有实现相应模块化，而我前端用的是vue3+ts,用起来感觉很难受，遂放弃。又经过一番搜寻，找到了**DPlayer**项目，看了它
《解码DOM交互：JavaScript与界面共生的隐秘逻辑》
前端
DOM从来不是被动等待指令的静态结构，而是与JavaScript形成共生关系的动态有机体。这种关系的精妙之处，在于两者既保持独立特性，又能通过无形的规则相互响应——就像舞者与音乐，节奏的共鸣才是呈现完美表演的核心。DOM的层级结构看似清晰，父与子、兄与弟的标签关系之下，藏着更复杂的动态联结。一个节点的“存在感”，不仅由自身属性决定，更由它在整个文档流中的“生态位”定义。比如一个普通的列表项，其显示
JSX编译革命：React 17+无需导入的Babel优化与AST深层解析
PineappleCode
react.js 前端 前端框架
二、ReactJSX1.什么是JSXJSX是React中的一项核心技术，本质上是JavaScript的语法扩展(JavaScriptXML)。根据最新的React文档，JSX被定义为"在JavaScript中嵌入类似HTML的标签语法"，它允许我们直观地描述UI应该呈现的样子。从本质上看，JSX是React.createElement()函数的语法糖，它使UI结构的描述更加直观和可读。React团
MySQL如何设计库表结构
detayun
mysql mysql 数据库
一、引言在设计数据库时，表结构的设计是至关重要的。合理的表结构设计不仅可以提高数据库的性能，还可以使数据更加清晰、易于维护。MySQL作为一种流行的关系型数据库管理系统，其表结构设计也遵循一定的原则和最佳实践。本文将介绍MySQL表结构设计的一些基本步骤和注意事项。二、需求分析在设计表结构之前，首先要进行需求分析。了解系统的业务需求、数据需求和性能需求，是设计合理表结构的前提。需求分析的主要内容包
ztree异步加载
3213213333332132
JavaScript Ajax json Web ztree
相信新手用ztree的时候,对异步加载会有些困惑，我开始的时候也是看了API花了些时间才搞定了异步加载，在这里分享给大家。
我后台代码生成的是json格式的数据，数据大家按各自的需求生成，这里只给出前端的代码。
设置setting，这里只关注async属性的配置
var setting = {
//异步加载配置
thirft rpc 具体调用流程
BlueSkator
中间件 rpc thrift
Thrift调用过程中，Thrift客户端和服务器之间主要用到传输层类、协议层类和处理类三个主要的核心类，这三个类的相互协作共同完成rpc的整个调用过程。在调用过程中将按照以下顺序进行协同工作：
（1） 将客户端程序调用的函数名和参数传递给协议层（TProtocol），协议
异或运算推导, 交换数据
dcj3sjt126com
PHP 异或 ^
/*
* 5 0101
* 9 1010
*
* 5 ^ 5
* 0101
* 0101
* -----
* 0000
* 得出第一个规律: 相同的数进行异或, 结果是0
*
* 9 ^ 5 ^ 6
* 1010
* 0101
* ----
* 1111
*
* 1111
* 0110
* ----
* 1001
事件源对象
周华华
JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml&q
MySql配置及相关命令
g21121
mysql
MySQL安装完毕后我们需要对它进行一些设置及性能优化，主要包括字符集设置，启动设置，连接优化，表优化，分区优化等等。
一 修改MySQL密码及用户
[简单]poi删除excel 2007超链接
53873039oycg
Excel
采用解析sheet.xml方式删除超链接，缺点是要打开文件2次,代码如下:
public void removeExcel2007AllHyperLink(String filePath) throws Exception {
OPCPackage ocPkg = OPCPac
Struts2添加 open flash chart
云端月影
准备以下开源项目：
1. Struts 2.1.6
2. Open Flash Chart 2 Version 2 Lug Wyrm Charmer (28th, July 2009)
3. jofc2，这东西不知道是没做好还是什么意思，好像和ofc2不怎么匹配，最好下源码，有什么问题直接改。
4. log4j
用eclipse新建动态网站，取名OFC2Demo，将Struts2 l
spring包详解
aijuans
spring
下载的spring包中文件及各种包众多，在项目中往往只有部分是我们必须的，如果不清楚什么时候需要什么包的话，看看下面就知道了。 aspectj目录下是在Spring框架下使用aspectj的源代码和测试程序文件。Aspectj是java最早的提供AOP的应用框架。 dist 目录下是Spring 的发布包，关于发布包下面会详细进行说明。 docs&nb
网站推广之seo概念
antonyup_2006
算法 Web 应用服务器 搜索引擎 Google
持续开发一年多的b2c网站终于在08年10月23日上线了。作为开发人员的我在修改bug的同时，准备了解下网站的推广分析策略。
所谓网站推广，目的在于让尽可能多的潜在用户了解并访问网站，通过网站获得有关产品和服务等信息，为最终形成购买决策提供支持。
网站推广策略有很多，seo，email，adv
单例模式,sql注入,序列
百合不是茶
单例模式 序列 sql注入 预编译
序列在前面写过有关的博客,也有过总结,但是今天在做一个JDBC操作数据库的相关内容时 需要使用序列创建一个自增长的字段 居然不会了,所以将序列写在本篇的前面
1,序列是一个保存数据连续的增长的一种方式;
序列的创建;
CREATE SEQUENCE seq_pro
2 INCREMENT BY 1 -- 每次加几个
3
Mockito单元测试实例
bijian1013
单元测试 mockito
Mockito单元测试实例：
public class SettingServiceTest {
private List<PersonDTO> personList = new ArrayList<PersonDTO>();
@InjectMocks
private SettingPojoService settin
精通Oracle10编程SQL(9)使用游标
bijian1013
oracle 数据库 plsql
/*
*使用游标
*/
--显示游标
--在显式游标中使用FETCH...INTO语句
DECLARE
CURSOR emp_cursor is
select ename,sal from emp where deptno=1;
v_ename emp.ename%TYPE;
v_sal emp.sal%TYPE;
begin
ope
【Java语言】动态代理
bit1129
java语言
JDK接口动态代理
JDK自带的动态代理通过动态的根据接口生成字节码(实现接口的一个具体类)的方式，为接口的实现类提供代理。被代理的对象和代理对象通过InvocationHandler建立关联
package com.tom;
import com.tom.model.User;
import com.tom.service.IUserService;
Java通信之URL通信基础
白糖_
java jdk webservice 网络协议 ITeye
java对网络通信以及提供了比较全面的jdk支持，java.net包能让程序员直接在程序中实现网络通信。
在技术日新月异的现在，我们能通过很多方式实现数据通信，比如webservice、url通信、socket通信等等，今天简单介绍下URL通信。
学习准备：建议首先学习java的IO基础知识
URL是统一资源定位器的简写，URL可以访问Internet和www，可以通过url
博弈Java讲义 - Java线程同步 (1)
boyitech
java 多线程 同步 锁
在并发编程中经常会碰到多个执行线程共享资源的问题。例如多个线程同时读写文件，共用数据库连接，全局的计数器等。如果不处理好多线程之间的同步问题很容易引起状态不一致或者其他的错误。
同步不仅可以阻止一个线程看到对象处于不一致的状态，它还可以保证进入同步方法或者块的每个线程，都看到由同一锁保护的之前所有的修改结果。处理同步的关键就是要正确的识别临界条件（cri
java-给定字符串，删除开始和结尾处的空格，并将中间的多个连续的空格合并成一个。
bylijinnan
java
public class DeleteExtraSpace {
/**
* 题目：给定字符串，删除开始和结尾处的空格，并将中间的多个连续的空格合并成一个。
* 方法1.用已有的String类的trim和replaceAll方法
* 方法2.全部用正则表达式，这个我不熟
* 方法3.“重新发明轮子”，从头遍历一次
*/
public static v
An error has occurred.See the log file错误解决！
Kai_Ge
MyEclipse
今天早上打开MyEclipse时，自动关闭！弹出An error has occurred.See the log file错误提示！
很郁闷昨天启动和关闭还好着！！！打开几次依然报此错误，确定不是眼花了！
打开日志文件！找到当日错误文件内容：
--------------------------------------------------------------------------
[矿业与工业]修建一个空间矿床开采站要多少钱?
comsci
地球上的钛金属矿藏已经接近枯竭...........
我们在冥王星的一颗卫星上面发现一些具有开采价值的矿床.....
那么,现在要编制一个预算,提交给财政部门..
解析Google Map Routes
dai_lm
google api
为了获得从A点到B点的路劲，经常会使用Google提供的API，例如
[url]
http://maps.googleapis.com/maps/api/directions/json?origin=40.7144,-74.0060&destination=47.6063,-122.3204&sensor=false
[/url]
从返回的结果上，大致可以了解应该怎么走，但
SQL还有多少“理所应当”？
datamachine
sql
转贴存档，原帖地址：http://blog.chinaunix.net/uid-29242841-id-3968998.html、http://blog.chinaunix.net/uid-29242841-id-3971046.html！
------------------------------------华丽的分割线--------------------------------
Yii使用Ajax验证时，如何设置某些字段不需要验证
dcj3sjt126com
Ajax yii
经常像你注册页面,你可能非常希望只需要Ajax去验证用户名和Email,而不需要使用Ajax再去验证密码,默认如果你使用Yii 内置的ajax验证Form,例如:
$form=$this->beginWidget('CActiveForm', array( 'id'=>'usuario-form',&
使用git同步网站代码
dcj3sjt126com
crontab git
转自:http://ued.ctrip.com/blog/?p=3646?tn=gongxinjun.com
管理一网站，最开始使用的虚拟空间，采用提供商支持的ftp上传网站文件，后换用vps，vps可以自己搭建ftp的，但是懒得搞，直接使用scp传输文件到服务器，现在需要更新文件到服务器，使用scp真的很烦。发现本人就职的公司，采用的git+rsync的方式来管理、同步代码，遂
sql基本操作
蕃薯耀
sql sql基本操作 sql常用操作
sql基本操作
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2015年6月1日 17:30:33 星期一
&
Spring4+Hibernate4+Atomikos3.3多数据源事务管理
hanqunfeng
Hibernate4
Spring3+后不再对JTOM提供支持，所以可以改用Atomikos管理多数据源事务。Spring2.5+Hibernate3+JTOM参考：http://hanqunfeng.iteye.com/blog/1554251Atomikos官网网站：http://www.atomikos.com/ 一.pom.xml
<dependency>
<
jquery中两个值得注意的方法one()和trigger()方法
jackyrong
trigger
在jquery中，有两个值得注意但容易忽视的方法，分别是one()方法和trigger()方法,这是从国内作者<<jquery权威指南》一书中看到不错的介绍
1） one方法
one方法的功能是让所选定的元素绑定一个仅触发一次的处理函数，格式为
one(type,${data},fn)
&nb
拿工资不仅仅是让你写代码的
lampcy
工作 面试 咨询
这是我对团队每个新进员工说的第一件事情。这句话的意思是，我并不关心你是如何快速完成任务的，哪怕代码很差，只要它像救生艇通气门一样管用就行。这句话也是我最喜欢的座右铭之一。
这个说法其实很合理：我们的工作是思考客户提出的问题，然后制定解决方案。思考第一，代码第二，公司请我们的最终目的不是写代码，而是想出解决方案。
话粗理不粗。
付你薪水不是让你来思考的，也不是让你来写代码的，你的目的是交付产品
架构师之对象操作----------对象的效率复制和判断是否全为空
nannan408
架构师
1.前言。
如题。
2.代码。
(1)对象的复制，比spring的beanCopier在大并发下效率要高，利用net.sf.cglib.beans.BeanCopier
Src src=new Src();
BeanCopier beanCopier = BeanCopier.create(Src.class, Des.class, false);
ajax 被缓存的解决方案
Rainbow702
JavaScript jquery Ajax cache 缓存
使用jquery的ajax来发送请求进行局部刷新画面，各位可能都做过。
今天碰到一个奇怪的现象，就是，同一个ajax请求，在chrome中，不论发送多少次，都可以发送至服务器端，而不会被缓存。但是，换成在IE下的时候，发现，同一个ajax请求，会发生被缓存的情况，只有第一次才会被发送至服务器端，之后的不会再被发送。郁闷。
解决方法如下：
① 直接使用 JQuery提供的 “cache”参数，
修改date.toLocaleString()的警告
tntxia
String
我们在写程序的时候，经常要查看时间，所以我们经常会用到date.toLocaleString()，但是date.toLocaleString()是一个过时 的API，代替的方法如下：
package com.tntxia.htmlmaker.util;
import java.text.SimpleDateFormat;
import java.util.
项目完成后的小总结
xiaomiya
js 总结 项目
项目完成了，突然想做个总结但是有点无从下手了。
做之前对于客户端给的接口很模式。然而定义好了格式要求就如此的愉快了。
先说说项目主要实现的功能吧
1，按键精灵
2，获取行情数据
3，各种input输入条件判断
4，发送数据（有json格式和string格式）
5，获取预警条件列表和预警结果列表，
6，排序，
7，预警结果分页获取
8，导出文件（excel，text等）
9，修
