前端技术
HTML
CSS
Javascript
前端框架和UI库
VUE
ReactJS
AngularJS
JQuery
NodeJS
JSON
Element-UI
Bootstrap
Material UI
服务端和客户端
Java
Python
PHP
Golang
Scala
Kotlin
Groovy
Ruby
Lua
.net
c#
c++
后端WEB和工程框架
SpringBoot
SpringCloud
Struts2
MyBatis
Hibernate
Tornado
Beego
Go-Spring
Go Gin
Go Iris
Dubbo
HessianRPC
Maven
Gradle
数据库
MySQL
Oracle
Mongo
中间件与web容器
Redis
MemCache
Etcd
Cassandra
Kafka
RabbitMQ
RocketMQ
ActiveMQ
Nacos
Consul
Tomcat
Nginx
Netty
大数据技术
Hive
Impala
ClickHouse
DorisDB
Greenplum
PostgreSQL
HBase
Kylin
Hadoop
Apache Pig
ZooKeeper
SeaTunnel
Sqoop
Datax
Flink
Spark
Mahout
数据搜索与日志
ElasticSearch
Apache Lucene
Apache Solr
Kibana
Logstash
数据可视化与OLAP
Apache Atlas
Superset
Saiku
Tesseract
系统与容器
Linux
Shell
Docker
Kubernetes
[table类型]的搜索结果
这里是文章列表。热门标签的颜色随机变换,标签颜色没有特殊含义。
点击某个标签可搜索标签相关的文章。
点击某个标签可搜索标签相关的文章。
Apache Atlas
...指定列族的所有行 HTable table = new HTable(conf, tableName); Delete delete = new Delete(rowKey); for (byte[] family : columnFamilies) { delete.addFamily(family); } table.delete(delete); 2) 数据分片:将元数据数据库分成多个部分,然后分别在不同的服务器上存储。这样一来,每台服务器只需要分担一小部分数据的处理工作,就完全能够巧妙地避开那种因为数据量太大,内存承受不住,像杯子装满水会溢出来一样的尴尬情况啦。 java // 示例代码,使用HBase API创建新的表,并设置表的分片策略 TableName tableName = TableName.valueOf("my_table"); HColumnDescriptor columnDesc = new HColumnDescriptor("info"); HRegionInfo regionInfo = new HRegionInfo(tableName, null, null, false); table = TEST_UTIL.createLocalHTable(regionInfo, columnDesc); table.setSplitPolicy(new MySplitPolicy()); 3) 使用外部缓存:对于那些频繁访问但不经常更新的元数据项,可以将其存储在一个独立的缓存中。这样,即使缓存中的数据量很大,也不会对主服务器的内存产生太大的压力。 java // 示例代码,使用Memcached作为外部缓存 MemcachedClient client = new MemcachedClient( new TCPNonblockingServerSocketFactory(), new InetSocketAddress[] {new InetSocketAddress(host, port)}); client.set(key, expirationTimeInMilliseconds, value); 这些只是一些基本的解决方案,具体的实施方式还需要根据你的实际情况进行调整。总的来说,想要搞定Apache Atlas服务器启动时那个烦人的内存溢出问题,咱们得在设计和运维这两块儿阶段都得提前做好周全的打算和精心的布局。 4. 结语 在使用Apache Atlas进行元数据管理时,我们可能会遇到各种各样的问题。但是,只要我们有足够的知识和经验,总能找到解决问题的方法。希望这篇文章能对你有所帮助。
2023-02-23 21:56:44
521
素颜如水-t
HBase
... 授予用户一些权限 Table table = admin.createTable(...); table.grant("myuser", Permission.Action.READ); 3. 日志审计 为了了解谁在什么时候做了什么操作,我们需要对系统的日志进行审计。HBase提供了一种名为“log4j”日志框架,可以帮助我们记录日志。 java // 配置日志级别 Logger.getLogger(Table.class.getName()).setLevel(Level.INFO); 四、总结 总的来说,HBase的安全性设置是一项非常复杂的工作。但是,只要我们灵活应对实际情况,像拼装乐高那样合理配置资源,就完全能够给咱们的数据安全筑起一道坚实的防护墙。希望这篇简短的文章能帮助你更好地理解和处理这个问题。 五、结语 最后,我想说,无论你的技术水平如何,都不能忽视安全性这个重要的问题。因为,只有保证了安全,才能真正地享受技术带来的便利。真心希望每一位正在使用HBase的大侠,都能把这个问题重视起来,就像保护自家珍宝一样,想出并采取一些实实在在的措施,确保你们的数据安全无虞。
2023-11-16 22:13:40
483
林中小径-t
Sqoop
...sword \ --table mytable \ --target-dir /user/hadoop/mytable_imported 这个命令展示了如何从MySQL数据库导入mytable表到HDFS的/user/hadoop/mytable_imported目录下。 2. Sqoop工作原理及功能特性 (此处详细描述Sqoop的工作原理,如并行导入导出、自动生成Java类、分区导入等特性) 2.1 并行导入示例 Sqoop利用MapReduce模型实现并行数据导入,大幅提高数据迁移效率。 shell sqoop import --num-mappers 4 ... 此命令设置4个map任务并行执行数据导入操作。 3. Sqoop的基本使用 (这里详细说明Sqoop的各种命令,包括import、export、create-hive-table等,并给出实例) 3.1 Sqoop Import 实例详解 shell 示例:将Oracle表同步至Hive表 sqoop import \ --connect jdbc:oracle:thin:@//hostname:port/service_name \ --username username \ --password password \ --table source_table \ --hive-import \ --hive-table target_table 这段代码演示了如何将Oracle数据库中的source_table直接导入到Hive的target_table。 4. Sqoop高级应用与实践问题探讨 (这部分深入探讨Sqoop的一些高级用法,如增量导入、容错机制、自定义连接器等,并通过具体案例阐述) 4.1 增量导入策略 shell 使用lastmodified或incremental方式实现增量导入 sqoop import \ --connect ... \ --table source_table \ --check-column id \ --incremental lastmodified \ --last-value 这段代码展示了如何根据最后一次导入的id值进行增量导入。 5. Sqoop在实际业务场景中的应用与挑战 (在这部分,我们可以探讨Sqoop在真实业务环境下的应用场景,以及可能遇到的问题及其解决方案) 以上仅为大纲及部分内容展示,实际上每部分都需要进一步拓展、深化和情感化的表述,使读者能更好地理解Sqoop的工作机制,掌握其使用方法,并能在实际工作中灵活运用。为了达到1000字以上的要求,每个章节都需要充实详尽的解释、具体的思考过程、理解难点解析以及更多的代码实例和应用场景介绍。
2023-02-17 18:50:30
130
雪域高原
HBase
...Google Bigtable的开源版本,它能够处理海量数据,并且具有高可用性和高性能。 但是,就像任何其他系统一样,HBase在实际应用中也存在一些性能问题。本篇文章将主要讨论如何通过优化读写操作来提高HBase的性能。 二、读取性能优化 1. 使用合适的扫描方式 HBase提供了两种扫描方式:全表扫描和范围扫描。全表扫描会返回表中的所有行,范围扫描则只返回某个范围内的行。全表扫描的效率较低,因为它需要扫描整个表。因此,在进行查询时,应尽可能地使用范围扫描。 例如,如果我们想要查询用户ID大于500的所有用户,我们可以使用以下的HQL语句: java Get get = new Get(Bytes.toBytes("user:500")); Result result = table.get(get); 2. 适当调整缓存大小 HBase有一个内置的内存缓存机制,用于存储最近访问的数据。默认情况下,这个缓存的大小为0.4倍的总内存。要是这个数值设定得过大,很可能就会把大量数据一股脑儿塞进内存里,这样一来,整套系统的运行速度可就要大打折扣了。换个说法,要是这个数值调得忒小了,那可就麻烦啦。它可能会让硬盘像忙得团团转的小蜜蜂一样,频繁进行I/O操作,这样一来,系统的读取速度自然就嗖嗖地往下掉,跟坐滑梯似的。 可以通过以下的HBase配置文件来调整缓存的大小: xml hbase.regionserver.global.memstore.size 0.4 3. 使用 Bloom 过滤器 Bloom 过滤器是一种空间换时间的数据结构,可以用来快速检查一个元素是否在一个集合中。HBase使用了Bloom过滤器来判断一个行键是否存在。如果一个行键不存在,那么直接返回,不需要进行进一步的查找。这样可以大大提高查询的速度。 三、写入性能优化 1. 尽可能使用批量写入 HBase支持批量写入,可以一次性写入多个行。这比一次写入一行要快得多。不过你得留心了,批量写入的数据量可不能超过64KB这个门槛儿,不然的话,会引来一大波RPC请求,这样一来,写入速度和效率就可能大打折扣啦。 例如,我们可以使用以下的HBase API来进行批量写入: java Put put = new Put(Bytes.toBytes("rowkey1")); put.addColumn(columnFamily, columnQualifier, value1); Put put2 = new Put(Bytes.toBytes("rowkey2")); put2.addColumn(columnFamily, columnQualifier, value2); Table table = ... table.put(ImmutableList.of(put, put2)); 2. 使用异步写入 HBase支持异步写入,可以在不等待写入完成的情况下继续执行后续的操作。这对于实时应用程序来说非常有用。但是需要注意的是,异步写入可能会增加写入的延迟。 例如,我们可以使用以下的HBase API来进行异步写入: java MutationProto m = MutationProto.newBuilder().setRow(rowkey).setFamily(family) .setQualifierqualifier(cq).setType(COLUMN_WRITE_TYPE.PUT).setValue(value).build(); PutRequest.Builder p = PutRequest.newBuilder() .addMutation(m); table.put(p.build()); 四、总结 总的来说,HBase的读写性能优化主要涉及到扫描方式的选择、缓存大小的调整、Bloom过滤器的使用以及批量写入和异步写入的使用等。这些优化技巧,每一种都得看实际情况和具体需求来挑,没有万能钥匙能打开所有场景的门。所以,在我们用HBase的时候,得真正把这些优化技巧学深吃透,才能把HBase的威力完全发挥出来,让它物尽其用,展现出真正的实力!
2023-09-21 20:41:30
435
翡翠梦境-t
Bootstrap
...的类来创建,如 .table 用于提供基础样式,.table-responsive 则用于包裹在需要滚动的表格内,以适应小屏幕设备。 移动设备优先原则Bootstrap 的核心理念之一是“移动设备优先”,这意味着首先考虑在小屏幕上展示内容,并确保其可用性。对于表格而言,这意味着我们需要特别注意其在手机和平板等小屏幕设备上的表现。以下是几个关键步骤来优化 Bootstrap 表格在移动设备上的显示: html 姓名 职位 部门 张三 工程师 研发部 2. 使用折叠显示 当表格内容过多时,可以采用折叠显示机制,仅显示部分数据,用户点击后显示完整列表。这可以通过 JavaScript 或 Bootstrap 的插件实现,如 bootstrap-table 提供的滚动功能。 html 3. 优化视觉体验 使用 Bootstrap 的颜色、字体和间距类来增强表格的视觉吸引力。例如,可以为表格添加阴影效果,使其在小屏幕设备上更加突出。 html 4. 自定义分页和排序 对于大型数据集,提供分页和排序选项是必要的。Bootstrap 和其他前端库提供了丰富的插件来实现这一功能,使得用户能够方便地浏览大量数据。 html Total: { { total } } 刷新 排序 结论 优化 Bootstrap 表格在移动设备上的显示是一个综合性的任务,涉及到响应式设计、交互元素的加入以及用户体验的提升。嘿,朋友们!想要让你的网站在手机和平板上也超棒吗?那就得看看我这招啦!通过采用一些聪明的策略和实际的代码实例,你可以让网页在大屏幕和小屏幕上都玩得转!不管是在手机上滑来滑去,还是在平板上轻轻触碰,都能给你带来顺畅、清晰又易用的体验。这样一来,无论用户是用手机还是平板,都能享受到你的网站带来的乐趣!所以,别再犹豫了,快去试试吧!记住,设计的目标始终是让信息清晰、易于访问,无论用户是在哪里查看。随着技术的不断进步,这些优化方法也将不断发展和完善,因此持续学习和实践是保持网站适应性的重要途径。
2024-08-06 15:52:25
39
烟雨江南
SeaTunnel
...= "SELECT table_schema, table_name, data_length + index_length AS total_size FROM information_schema.tables WHERE table_schema = 'mydb' AND table_name = 'my_table'" } } sinks { mail_sink { type = "mail" host = "smtp.example.com" port = 587 username = "alert@example.com" password = "alert_password" from = "alert@example.com" to = "admin@example.com" subject = "Database Capacity Alert" content = """ The database capacity is approaching the threshold. Please take necessary actions. """ } } } 4. 3. 运行任务 配置完成后,就可以启动SeaTunnel任务了。你可以通过以下命令运行: bash bin/start-seatunnel.sh --config conf/capacity_alert.conf 4. 4. 监控与调整 运行后,你可以通过日志查看任务的状态和输出。如果一切正常,你应该会看到类似如下的输出: [INFO] DatabaseCapacityAlert - Running task with parallelism 1... [INFO] MailSink - Sending email alert to admin@example.com... [INFO] MailSink - Email sent successfully. 如果发现任何问题,比如邮件发送失败,可以检查配置文件中的SMTP设置是否正确,或者尝试重新运行任务。 5. 总结与展望 通过这次实践,我发现SeaTunnel真的非常强大,能够帮助我们构建复杂的ETL流程,包括数据库容量预警这样的高级功能。当然了,这个过程也不是一路畅通的,中间遇到了不少坑,但好在最后都解决了。将来,我打算继续研究怎么把SeaTunnel和其他监控工具连起来,打造出一个更全面、更聪明的预警系统。这样就能更快地发现问题,省去很多麻烦。 希望这篇文章对你有所帮助,如果你有任何疑问或建议,欢迎在评论区留言交流!
2025-01-29 16:02:06
72
月下独酌
转载文章
.../} js var table; //游戏桌面var squareWidth = 50; //方块宽高var boardWidth = 10; //行列数var squareSet = []; //方块信息集合(二维数组)每个元素保存该方块的全部信息function createSquare(value,row,col){ //创建小方块,传入参数为颜色、行、列,初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象}function refresh(){ //重绘画板,每次鼠标点击后刷新for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.backgroundImage = "url(./pic/" + squareSet[i][j].num + ".png)"squareSet[i][j].style.left = squareSet[i][j].col squareWidth + "px"; // 别忘了加"px"squareSet[i][j].style.bottom = squareSet[i][j].row squareWidth + "px";} }}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面for(var i = 0 ; i < boardWidth; i ++){squareSet[i] = new Array(); //二维数组的创建,对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() 5) , i , j);squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上} }refresh(); //每次页面内容发生变化需要重绘页面}window.onload = function(){init();} // window.onload 保证了在页面全部加载完毕后再执行JS代码 效果 第二阶段:鼠标选中后,闪烁 只有JavaScript需要修改 var table; //游戏桌面var squareWidth = 50; //方块宽高var boardWidth = 10; //行列数var squareSet = []; //方块信息集合(二维数组)每个元素保存该方块的全部信息var baseScore = 5; //第一块的分数var stepScore = 10; //每多一块的累加分数var totalScore = 0; //当前总分var targetScore = 1500; //目标分var choose = []; //选中的连通小方块var timer = null; //闪烁定时器var flag = true; //锁,防止点击事件中响应其他点击或移入时间var tempSquare = null; //临时方块function refresh(){for (var i = 0; i < squareSet.length; i++) {for (var j = 0; j < squareSet[i].length; j++) {squareSet[i][j].style.background="url(pic/"+squareSet[i][j].num+".png)"squareSet[i][j].style.left=squareSet[i][j].colsquareWidth+"px";squareSet[i][j].style.bottom=squareSet[i][j].rowsquareWidth+"px";} }}function createSquare(value,row,col){ //创建小方块,传入参数为颜色、行、列,初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";} }}function checkLinked(square , arr){ // 递归连通图算法arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 0 && //未到边界squareSet[square.row][square.col - 1].num == square.num && //颜色相同arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中,避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 1 &&squareSet[square.row][square.col + 1].num == square.num &&arr.indexOf(squareSet[square.row][square.col + 1]) == -1) {checkLinked(squareSet[square.row][square.col + 1] , arr);}// check upif( square.row < boardWidth - 1 &&squareSet[square.row + 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row + 1][square.col]) == -1) {checkLinked(squareSet[square.row + 1][square.col] , arr);}// check downif( square.row > 0 &&squareSet[square.row - 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row - 1][square.col]) == -1) {checkLinked(squareSet[square.row - 1][square.col] , arr);} }function flicker(arr){ // 选中连通的小方块可以闪烁var num = 0;timer = setInterval(function(){for(var i = 0 ; i < arr.length ; i ++){arr[i].style.border = "3px solid BFEFFF";//有个框arr[i].style.transform = "scale(" + (0.9 + (0.05 Math.pow(-1 , num))) + ")";//一闪一闪}num ++; // 注意这里所采用的数学技巧,仍然使用transform:scale(val)来进行缩放。},300);//闪烁的时间}function mouseOver(obj){ //鼠标移入区域响应// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);// 闪烁flicker(choose);// 显示分数selectScore();}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建,对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上} }refresh(); //每次页面内容发生变化需要重绘页面}window.onload = function(){init();} // window.onload 保证了在页面全部加载完毕后再执行JS代码 效果2.1 加入这段代码,便会计算闪烁方块得分 function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);} 完整代码为: var table; //游戏桌面var squareWidth = 50; //方块宽高var boardWidth = 10; //行列数var squareSet = []; //方块信息集合(二维数组)每个元素保存该方块的全部信息var baseScore = 5; //第一块的分数var stepScore = 10; //每多一块的累加分数var totalScore = 0; //当前总分var targetScore = 1500; //目标分var choose = []; //选中的连通小方块var timer = null; //闪烁定时器var flag = true; //锁,防止点击事件中响应其他点击或移入时间var tempSquare = null; //临时方块function refresh(){for (var i = 0; i < squareSet.length; i++) {for (var j = 0; j < squareSet[i].length; j++) {squareSet[i][j].style.background="url(pic/"+squareSet[i][j].num+".png)"squareSet[i][j].style.left=squareSet[i][j].colsquareWidth+"px";squareSet[i][j].style.bottom=squareSet[i][j].rowsquareWidth+"px";} }}function createSquare(value,row,col){ //创建小方块,传入参数为颜色、行、列,初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";} }}function checkLinked(square , arr){ // 递归连通图算法arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 0 && //未到边界squareSet[square.row][square.col - 1].num == square.num && //颜色相同arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中,避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 1 &&squareSet[square.row][square.col + 1].num == square.num &&arr.indexOf(squareSet[square.row][square.col + 1]) == -1) {checkLinked(squareSet[square.row][square.col + 1] , arr);}// check upif( square.row < boardWidth - 1 &&squareSet[square.row + 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row + 1][square.col]) == -1) {checkLinked(squareSet[square.row + 1][square.col] , arr);}// check downif( square.row > 0 &&squareSet[square.row - 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row - 1][square.col]) == -1) {checkLinked(squareSet[square.row - 1][square.col] , arr);} }function flicker(arr){ // 选中连通的小方块可以闪烁var num = 0;timer = setInterval(function(){for(var i = 0 ; i < arr.length ; i ++){arr[i].style.border = "3px solid BFEFFF";//有个框arr[i].style.transform = "scale(" + (0.9 + (0.05 Math.pow(-1 , num))) + ")";//一闪一闪}num ++; // 注意这里所采用的数学技巧,仍然使用transform:scale(val)来进行缩放。},300);//闪烁的时间}function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);}function mouseOver(obj){ //鼠标移入区域响应// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);// 闪烁flicker(choose);// 显示分数selectScore();}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建,对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上} }refresh(); //每次页面内容发生变化需要重绘页面}window.onload = function(){init();} // window.onload 保证了在页面全部加载完毕后再执行JS代码 效果2.2 第三阶段:消灭星星(只消灭一次) 只消除选中的星星,但是不会掉下来。 在function init(){}里面添加以下代码: // 鼠标点击事件square.onclick = function(){//为移除增加一个延迟动画,为了防止闭包,这里采用立即执行函数for(var i = 0 ; i < choose.length ; i ++){(function(i){setTimeout(function(){squareSet[choose[i].row][choose[i].col] = null; //为状态数组置空table.removeChild(choose[i]); //将其从桌面上移除} , i 100);})(i);} } 效果 使得星星移动(原作者这里出现错误) function move(){//纵向下落,采用快慢指针算法for(var i = 0 ; i < boardWidth ; i ++){var pointer = 0; //慢指针for(var j = 0 ; j < boardWidth ; j ++){if(squareSet[j][i] != null){ //按行遍历if(pointer != j){ //快慢指针不同步说明中间有空元素squareSet[pointer][i] = squareSet[j][i]; //慢指针设成快指针元素squareSet[j][i].row = pointer;squareSet[j][i] = null; //快指针处置空}pointer ++; //该行非空时慢指针增加} }} 完整代码如下: var table; //游戏桌面var squareWidth = 50; //方块宽高var boardWidth = 10; //行列数var squareSet = []; //方块信息集合(二维数组)每个元素保存该方块的全部信息var baseScore = 5; //第一块的分数var stepScore = 10; //每多一块的累加分数var totalScore = 0; //当前总分var targetScore = 1500; //目标分var choose = []; //选中的连通小方块var timer = null; //闪烁定时器var flag = true; //锁,防止点击事件中响应其他点击或移入时间var tempSquare = null; //临时方块function refresh(){for (var i = 0; i < squareSet.length; i++) {for (var j = 0; j < squareSet[i].length; j++) {squareSet[i][j].style.background="url(pic/"+squareSet[i][j].num+".png)"squareSet[i][j].style.left=squareSet[i][j].colsquareWidth+"px";squareSet[i][j].style.bottom=squareSet[i][j].rowsquareWidth+"px";} }}function createSquare(value,row,col){ //创建小方块,传入参数为颜色、行、列,初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";} }}function checkLinked(square , arr){ // 递归连通图算法arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 0 && //未到边界squareSet[square.row][square.col - 1].num == square.num && //颜色相同arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中,避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 1 &&squareSet[square.row][square.col + 1].num == square.num &&arr.indexOf(squareSet[square.row][square.col + 1]) == -1) {checkLinked(squareSet[square.row][square.col + 1] , arr);}// check upif( square.row < boardWidth - 1 &&squareSet[square.row + 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row + 1][square.col]) == -1) {checkLinked(squareSet[square.row + 1][square.col] , arr);}// check downif( square.row > 0 &&squareSet[square.row - 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row - 1][square.col]) == -1) {checkLinked(squareSet[square.row - 1][square.col] , arr);} }function flicker(arr){ // 选中连通的小方块可以闪烁var num = 0;timer = setInterval(function(){for(var i = 0 ; i < arr.length ; i ++){arr[i].style.border = "3px solid BFEFFF";//有个框arr[i].style.transform = "scale(" + (0.9 + (0.05 Math.pow(-1 , num))) + ")";//一闪一闪}num ++; // 注意这里所采用的数学技巧,仍然使用transform:scale(val)来进行缩放。},300);//闪烁的时间}function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);}function mouseOver(obj){ //鼠标移入区域响应// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);// 闪烁flicker(choose);// 显示分数selectScore();}function move(){//纵向下落,采用快慢指针算法for(var i = 0 ; i < boardWidth ; i ++){var pointer = 0; //慢指针for(var j = 0 ; j < boardWidth ; j ++){if(squareSet[j][i] != null){ //按行遍历if(pointer != j){ //快慢指针不同步说明中间有空元素squareSet[pointer][i] = squareSet[j][i]; //慢指针设成快指针元素squareSet[j][i].row = pointer;squareSet[j][i] = null; //快指针处置空}pointer ++; //该行非空时慢指针增加} }}// 横向移动(当出现一列为空时)for(var i = 0 ; i < squareSet[0].length ;){ //必须注意循环结束条件的判断if(squareSet[0][i] == null){ //逻辑:只需判断最低层为空,该行则全为空for(var j = 0 ; j < boardWidth ; j ++){squareSet[j].splice(i , 1); //splice删除数组squareSet[j]中从i开始的1个元素}continue;//注意移动后i不应改变了}i ++;}refresh();}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建,对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}// 鼠标点击事件square.onclick = function(){//对锁进行控制if(!flag || choose.length == null){return;}flag = false;tempSquare = null;//更新分数var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}totalScore += score;document.getElementById('nowScore').innerHTML = "Current Score : " + totalScore;//为移除增加一个延迟动画,为了防止闭包,这里采用立即执行函数for(var i = 0 ; i < choose.length ; i ++){(function(i){setTimeout(function(){squareSet[choose[i].row][choose[i].col] = null; //为状态数组置空table.removeChild(choose[i]); //将其从桌面上移除} , i 100);})(i);}//需要等星星消除完毕后再移动,故需增加一个延迟setTimeout(function(){move(); //调用移动函数},choose.length 100);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上} }refresh(); //每次页面内容发生变化需要重绘页面}window.onload = function(){init();} // window.onload 保证了在页面全部加载完毕后再执行JS代码 效果(下降成功,但是有点小bug只有部分下降了) 解决方案:只需要在function refresh(){}的双循环里面增加以下代码: if(squareSet[i][j] == null) continue; 完整代码如下: var table; //游戏桌面var squareWidth = 50; //方块宽高var boardWidth = 10; //行列数var squareSet = []; //方块信息集合(二维数组)每个元素保存该方块的全部信息var baseScore = 5; //第一块的分数var stepScore = 10; //每多一块的累加分数var totalScore = 0; //当前总分var targetScore = 1500; //目标分var choose = []; //选中的连通小方块var timer = null; //闪烁定时器var flag = true; //锁,防止点击事件中响应其他点击或移入时间var tempSquare = null; //临时方块function refresh(){for (var i = 0; i < squareSet.length; i++) {for (var j = 0; j < squareSet[i].length; j++) {if(squareSet[i][j] == null) continue; // 点击后数组中可能有空值需要跳过squareSet[i][j].style.background="url(pic/"+squareSet[i][j].num+".png)"squareSet[i][j].style.left=squareSet[i][j].colsquareWidth+"px";squareSet[i][j].style.bottom=squareSet[i][j].rowsquareWidth+"px";} }}function createSquare(value,row,col){ //创建小方块,传入参数为颜色、行、列,初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";} }}function checkLinked(square , arr){ // 递归连通图算法arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 0 && //未到边界squareSet[square.row][square.col - 1].num == square.num && //颜色相同arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中,避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 1 &&squareSet[square.row][square.col + 1].num == square.num &&arr.indexOf(squareSet[square.row][square.col + 1]) == -1) {checkLinked(squareSet[square.row][square.col + 1] , arr);}// check upif( square.row < boardWidth - 1 &&squareSet[square.row + 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row + 1][square.col]) == -1) {checkLinked(squareSet[square.row + 1][square.col] , arr);}// check downif( square.row > 0 &&squareSet[square.row - 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row - 1][square.col]) == -1) {checkLinked(squareSet[square.row - 1][square.col] , arr);} }function flicker(arr){ // 选中连通的小方块可以闪烁var num = 0;timer = setInterval(function(){for(var i = 0 ; i < arr.length ; i ++){arr[i].style.border = "3px solid BFEFFF";//有个框arr[i].style.transform = "scale(" + (0.9 + (0.05 Math.pow(-1 , num))) + ")";//一闪一闪}num ++; // 注意这里所采用的数学技巧,仍然使用transform:scale(val)来进行缩放。},300);//闪烁的时间}function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);}function mouseOver(obj){ //鼠标移入区域响应// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);// 闪烁flicker(choose);// 显示分数selectScore();}function move(){//纵向下落,采用快慢指针算法for(var i = 0 ; i < boardWidth ; i ++){var pointer = 0; //慢指针for(var j = 0 ; j < boardWidth ; j ++){if(squareSet[j][i] != null){ //按行遍历if(pointer != j){ //快慢指针不同步说明中间有空元素squareSet[pointer][i] = squareSet[j][i]; //慢指针设成快指针元素squareSet[j][i].row = pointer;squareSet[j][i] = null; //快指针处置空}pointer ++; //该行非空时慢指针增加} }}// 横向移动(当出现一列为空时)for(var i = 0 ; i < squareSet[0].length ;){ //必须注意循环结束条件的判断if(squareSet[0][i] == null){ //逻辑:只需判断最低层为空,该行则全为空for(var j = 0 ; j < boardWidth ; j ++){squareSet[j].splice(i , 1); //splice删除数组squareSet[j]中从i开始的1个元素}continue;//注意移动后i不应改变了}i ++;}refresh();}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建,对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}// 鼠标点击事件square.onclick = function(){//对锁进行控制if(!flag || choose.length == null){return;}flag = false;tempSquare = null;//更新分数var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}totalScore += score;document.getElementById('nowScore').innerHTML = "Current Score : " + totalScore;//为移除增加一个延迟动画,为了防止闭包,这里采用立即执行函数for(var i = 0 ; i < choose.length ; i ++){(function(i){setTimeout(function(){squareSet[choose[i].row][choose[i].col] = null; //为状态数组置空table.removeChild(choose[i]); //将其从桌面上移除} , i 100);})(i);}//需要等星星消除完毕后再移动,故需增加一个延迟setTimeout(function(){move(); //调用移动函数},choose.length 100);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上} }refresh(); //每次页面内容发生变化需要重绘页面}window.onload = function(){init();} // window.onload 保证了在页面全部加载完毕后再执行JS代码 第四阶段:消灭全部星星,返回结果 最终完整版代码如下: var table; //游戏桌面var squareWidth = 50; //方块宽高var boardWidth = 10; //行列数var squareSet = []; //方块信息集合(二维数组)每个元素保存该方块的全部信息var baseScore = 5; //第一块的分数var stepScore = 10; //每多一块的累加分数var totalScore = 0; //当前总分var targetScore = 1500; //目标分var choose = []; //选中的连通小方块var timer = null; //闪烁定时器var flag = true; //锁,防止点击事件中响应其他点击或移入时间var tempSquare = null; //临时方块function refresh(){ //重绘画板,每次鼠标点击后刷新for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){if(squareSet[i][j] == null) continue; // 点击后数组中可能有空值需要跳过squareSet[i][j].row = i; //更新当前的行列数squareSet[i][j].col = j;squareSet[i][j].style.backgroundImage = "url(./pic/" + squareSet[i][j].num + ".png)"squareSet[i][j].style.backgroundSize = "cover"; //占满范围squareSet[i][j].style.transform = "scale(0.95)"; //美观效果让不同星星之间留出空隙(缩小至0.95倍大小)squareSet[i][j].style.left = squareSet[i][j].col squareWidth + "px"; // 别忘了加"px"squareSet[i][j].style.bottom = squareSet[i][j].row squareWidth + "px";squareSet[i][j].style.transition = "left 0.3s, bottom 0.3s";} }}function createSquare(value,row,col){ //创建小方块,传入参数为颜色、行、列,初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.display = "inline-block"; //需要让对象元素能排列一排temp.style.position = "absolute"; //相对于背景绝对定位temp.style.boxSizing = "border-box"; //重要:不会使增加的边框溢出覆盖到旁边的元素temp.style.borderRadius = "12px";temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){if(squareSet[i][j] == null) continue;squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";} }}function checkLinked(square , arr){ // 递归连通图算法if(square == null) return; // 递归边界arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 0 && //未到边界squareSet[square.row][square.col - 1] && //左侧有块squareSet[square.row][square.col - 1].num == square.num && //颜色相同arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中,避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 1 &&squareSet[square.row][square.col + 1] &&squareSet[square.row][square.col + 1].num == square.num &&arr.indexOf(squareSet[square.row][square.col + 1]) == -1) {checkLinked(squareSet[square.row][square.col + 1] , arr);}// check upif( square.row < boardWidth - 1 &&squareSet[square.row + 1][square.col] &&squareSet[square.row + 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row + 1][square.col]) == -1) {checkLinked(squareSet[square.row + 1][square.col] , arr);}// check downif( square.row > 0 &&squareSet[square.row - 1][square.col] &&squareSet[square.row - 1][square.col].num == square.num &&arr.indexOf(squareSet[square.row - 1][square.col]) == -1) {checkLinked(squareSet[square.row - 1][square.col] , arr);} }function flicker(arr){ // 选中连通的小方块可以闪烁var num = 0;timer = setInterval(function(){for(var i = 0 ; i < arr.length ; i ++){arr[i].style.border = "3px solid BFEFFF";arr[i].style.transform = "scale(" + (0.9 + (0.05 Math.pow(-1 , num))) + ")";}num ++; // 注意这里所采用的数学技巧,仍然使用transform:scale(val)来进行缩放。},300);}function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}if(score == 0) return;document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;document.getElementById('selectScore').style.transition = null;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);}function mouseOver(obj){ //鼠标移入区域响应// 加锁,点击事件过程中不允许其他点击事件与移入事件if(!flag){tempSquare = obj;return;}// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);if(choose.length <= 1){choose = [];return;}// 闪烁flicker(choose);// 显示分数selectScore();}function move(){ //下落移动控制//纵向下落,采用快慢指针算法for(var i = 0 ; i < boardWidth ; i ++){var pointer = 0; //慢指针for(var j = 0 ; j < boardWidth ; j ++){if(squareSet[j][i] != null){ //按行遍历if(pointer != j){ //快慢指针不同步说明中间有空元素squareSet[pointer][i] = squareSet[j][i]; //慢指针设成快指针元素squareSet[j][i].row = pointer;squareSet[j][i] = null; //快指针处置空}pointer ++; //该行非空时慢指针增加} }}// 横向移动(当出现一列为空时)for(var i = 0 ; i < squareSet[0].length ;){ // 注意循环终止条件的判断!!!因为数组长度会更新if(squareSet[0][i] == null){ //逻辑:只需判断最低层为空,该行则全为空for(var j = 0 ; j < boardWidth ; j ++){squareSet[j].splice(i , 1); //splice删除数组squareSet[j]中从i开始的1个元素}continue;//注意移动后i不应改变了}i ++;}refresh();}function isFinish(){ //判断游戏结束flag = true; //重要:需要先解锁,保证后续鼠标事件可以被响应for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){if(squareSet[i][j] == null) continue; //遍历每一元素判断连通var temp = [];checkLinked(squareSet[i][j] , temp);if(temp.length > 1) return false; //若有某一元素仍有多块连通,则游戏未结束} }return flag;}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建,对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}// 鼠标点击事件square.onclick = function(){//对锁进行控制if(!flag || choose.length == null){return;}flag = false;tempSquare = null;//更新分数var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i stepScore);}totalScore += score;document.getElementById('nowScore').innerHTML = "Current Score : " + totalScore;//为移除增加一个延迟动画,为了防止闭包,这里采用立即执行函数for(var i = 0 ; i < choose.length ; i ++){(function(i){setTimeout(function(){squareSet[choose[i].row][choose[i].col] = null; //为状态数组置空table.removeChild(choose[i]); //将其从桌面上移除} , i 50);})(i);}//需要等星星消除完毕后再移动,故需增加一个延迟setTimeout(function(){move(); //调用移动函数setTimeout(function(){var judge = isFinish();if(judge){ //游戏达到结束条件if(totalScore > targetScore){alert('Congratulations! You win!');}else{alert('Mission Failed!');} }else{flag = true;choose = [];mouseOver(tempSquare); //处理可能存在的冲突} },300 + choose.length 75); //需要一个判断延迟},choose.length 50);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上} }refresh(); //每次页面内容发生变化需要重绘页面}window.onload = function(){init();} // window.onload 保证了在页面全部加载完毕后再执行JS代码 效果 本篇文章为转载内容。原文链接:https://blog.csdn.net/weixin_56471396/article/details/128681321。 该文由互联网用户投稿提供,文中观点代表作者本人意见,并不代表本站的立场。 作为信息平台,本站仅提供文章转载服务,并不拥有其所有权,也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况,请及时联系我们,我们将第一时间进行核实并删除相应内容。
2023-06-08 15:26:34
516
转载
JQuery插件下载
...介绍 jquery-table-fixed-head是一款专为需要高效展示大量数据的网站设计的jQuery插件。这款插件巧妙地结合了Bootstrap框架的强大功能与jQuery的灵活性,使得网页开发者能够轻松实现Bootstrap表格中头部的固定效果。这意味着当用户向下滚动浏览表格内容时,表格的顶部标题栏将始终保持可见状态,极大地提升了用户体验。使用这款插件,开发者无需编写复杂的CSS或JavaScript代码,只需简单地引入插件文件并在相应的表格元素上添加特定的类或属性即可。这不仅简化了开发流程,还确保了页面加载速度和性能不受影响。此外,由于其基于Bootstrap的设计,它能够无缝集成到任何已经采用Bootstrap进行布局和样式的项目中,提供一致且专业的视觉效果。无论你是正在构建一个产品详情页、数据分析报告还是任何需要展示复杂数据集的网站,jquery-table-fixed-head都能为你提供强大而便捷的支持。通过提升信息可读性和易用性,它帮助用户更快速、准确地获取所需信息,从而提高整体的用户满意度和参与度。总之,对于追求高质量用户体验的前端开发者而言,这是一款不可多得的工具。 点我下载 文件大小:89.90 KB 您将下载一个JQuery插件资源包,该资源包内部文件的目录结构如下: 本网站提供JQuery插件下载功能,旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容,请立即告知我们,我们将迅速响应并删除相关内容。 免责声明:站内所有资源仅供个人学习研究及参考之用,严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果,由使用者承担责任。
2024-10-29 21:27:18
118
本站
JQuery插件下载
...Query插件介绍 Table-Scroll插件是一款专为解决大数据表格展示问题而设计的jQuery工具。其核心功能在于将普通的HTML表格转换为具备固定头部与行的滚动表格,通过引入水平和垂直滚动条,使得用户能够在不翻页的情况下浏览整个表格内容。这一特性对于需要在单个页面上展示大量数据的场景尤为适用,有效提高了信息展示的效率和用户体验。Table-Scroll插件支持IE8及以上版本的浏览器,确保了广泛的兼容性。这意味着即使在较旧的浏览器环境下,用户也能享受到流畅的滚动体验,无需担心因浏览器版本差异导致的功能缺失或性能下降。该插件的设计理念着重于简洁性和易用性,使得开发者能够轻松地将其集成到现有的项目中,无需复杂的配置步骤。通过简单的调用和参数设置,即可实现表格的滚动效果,并根据具体需求调整滚动条的位置和样式,以满足不同的视觉和交互需求。Table-Scroll插件的出现,不仅解决了大数据表格展示的视觉难题,还大大提升了信息的可读性和访问性。对于网站开发者、数据分析师、报告制作人员等专业人士而言,它成为了一种高效管理与展示大量数据的强大工具,极大地丰富了Web应用的数据展示能力,促进了信息的有效传播与理解。 点我下载 文件大小:53.65 KB 您将下载一个JQuery插件资源包,该资源包内部文件的目录结构如下: 本网站提供JQuery插件下载功能,旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容,请立即告知我们,我们将迅速响应并删除相关内容。 免责声明:站内所有资源仅供个人学习研究及参考之用,严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果,由使用者承担责任。
2024-09-01 11:07:55
25
本站
CSS
...种方法是使用CSS的table属性。我们可以将一个组件的显示属性赋值为table,并将其子组件的显示属性赋值为table-cell。然后,使用text-align和vertical-align属性来控制子组件的横向和竖向对齐。下面是一个示例: .container { display: table; } .container p { display: table-cell; text-align: center; vertical-align: middle; } 以上是三种常见的方法来达成一个组件横向且竖向中央对齐。根据不同的情况选择合适的方法是非常重要的。希望本文能够对读者有所帮助。
2023-11-16 08:03:48
439
电脑达人
Element-UI
...中,当我们使用el-table切换编辑模式后,部分单元格中出现了el-select组件,此时页面渲染卡顿的时间很长,这是怎么回事呢?我们又该如何解决呢? 首先,我们要明白el-select组件的特点。el-select是个挺厉害的选择器,它能让你既可以单选又可以多选,不过这家伙有点儿特别,需要加载大量的数据才能把所有的选项都摆出来。所以,你要是频繁地在el-table里用到el-select,那可能会让页面上要渲染的DOM元素数量蹭蹭上涨,这样一来,就可能拖慢整体的性能表现。 那么,面对这个问题,我们应该如何去解决呢?下面我就为大家提供几个可行的解决方案。 一、优化el-select组件 1. 减少el-select中的数据量 我们可以将所有选项分页加载,并且只加载当前页面可见的部分。这样可以大大减少DOM的数量,提高页面渲染的速度。 css 2. 使用懒加载的方式 对于需要从服务器获取的选项,我们可以使用懒加载的方式,即在用户滚动到某个位置时才请求数据,这样也可以减少DOM的数量。 js data() { return { options: [], lazyLoadMore: false, }; }, watch: { lazyLoadMore(newValue) { if (newValue) { this.$http.get('/api/loadmore').then((res) => { this.options.push(...res.data); this.lazyLoadMore = false; }); } }, }, mounted() { this.loadPage(1); }, methods: { loadPage(index) { this.lazyLoadMore = true; this.$http.get(/api/page/${index}).then((res) => { this.options = [...this.options, ...res.data]; if (res.total < res.page res.size) { this.lazyLoadMore = false; } }); }, }, 二、优化el-table组件 1. 设置el-table的高度 设置el-table的高度可以限制渲染的DOM数量,避免页面渲染过慢。 html 2. 使用虚拟滚动 虚拟滚动是一种通过显示用户当前正在查看的内容,而不是所有的内容,来提高页面性能的方法。在Vue2.x中,我们可以使用vue-virtual-scroll-list库来实现虚拟滚动。 html 以上就是我给大家提供的几种解决方案,希望能帮到大家。 如果你还有其他的问题或者建议,欢迎在评论区留言,我们一起讨论,共同进步! 祝各位读者朋友们,编程愉快!
2023-05-13 13:31:23
491
风轻云淡_t
MySQL
...kip-grant-tables --skip-networking &4.使用以下命令重新启动MySQL服务器。sudo /etc/init.d/mysql restart5.使用以下命令停止MySQL服务器。sudo /etc/init.d/mysql stop 在查阅MySQL数据库启动的过程时,需要密切关注终端显示的信息。如果MySQL启动遇到错误或问题,你能够使用这些信息来解决它们。保持经常使用上面的命令能够协助你及时了解数据库服务器的启动情况。
2023-06-06 17:14:58
79
逻辑鬼才
Datax
...stination table, you can reduce batch size or increase the max insert row count of your destination table. 二、错误的原因分析 这个错误的主要原因是你的批量插入数据量过大,超出了Datax对单次操作的最大行数限制。具体来说,这可能是由于以下原因造成的: 1. 数据量过大 如果你一次性想要插入的数据过多,那么这个错误就很容易出现。 2. Datax配置不当 如果你没有正确配置Datax,让它适应你的大数据量需求,也会导致这个错误。 3. 目标表设置不当 如果你的目标表的max insert row count设置得过低,也可能引发这个错误。 三、解决方案 针对上述错误的原因,我们可以从以下几个方面来解决问题: 1. 分批插入数据 如果是因为数据量过大导致的错误,你可以考虑分批次插入数据,每次只插入一部分数据,直到所有数据都被插入为止。这样既可以避免超过最大行数限制,也可以提高插入效率。 2. 调整Datax配置 如果你发现是Datax配置不当导致的错误,你需要检查并调整Datax的配置。例如,你可以增加Datax的并发度,或者调整Datax的内存大小等。 3. 调整目标表设置 如果你发现是目标表的max insert row count设置过低导致的错误,你需要去数据库管理后台,把目标表的max insert row count调高。 四、预防措施 为了避免这种错误的发生,我们还可以采取以下预防措施: 1. 在开始工作前,先进行一次数据分析,估算需要插入的数据量,以此作为基础来设定Datax的工作参数。 2. 对于大项目,可以采用分阶段的方式,先完成一部分,再进行下一部分。 3. 及时监控Datax的工作状态,一旦发现问题,及时进行调整。 总结 当你的Datax批量插入操作遇到最大行数限制时,不要惊慌,要冷静应对。经过以上这些分析和解决步骤,我真心相信你绝对能够挖掘出最适合你的那个解决方案,没跑儿!记住,数据分析师的使命就是让数据说话,让数据为你服务,而不是被数据所困扰。加油!
2023-08-21 19:59:32
525
青春印记-t
MySQL
...e; CREATE TABLE users ( id INT NOT NULL AUTO_INCREMENT, name VARCHAR(255), email VARCHAR(255), PRIMARY KEY (id) ); 这段命令将会在example数据库中创建一个名为users的新表,包含id、name和email三个字段。 步骤6:查询数据库 在MySQL服务器上,你可以通过以下命令来查询新创建的数据库和表: sql SHOW DATABASES; SHOW TABLES FROM example; SELECT FROM example.users; 以上就是测试MySQL是否安装完整的几个基本步骤。经过这些步骤,你就能确保MySQL的服务器软件、客户端小工具、命令行神器还有数据文件都妥妥地安装好了,并且随时可以正常启动,愉快地使用起来啦!同时呢,你还可以亲自去瞅瞅MySQL的运行状况啊,还有它的性能表现啥的,这样一来,就能更棒地打理和调优你的MySQL数据库了,让它的表现更上一层楼! 总结起来,要想保证MySQL能够正常运行,就需要对其进行全面的测试。这包括瞅瞅MySQL服务的小火车跑得顺不顺畅,确保它能稳妥连接。咱们还要亲自上手,捣鼓捣鼓创建数据库和表的操作,再溜达一圈,试试查询功能灵不灵光,这些可都是必不可少的环节~只要按照上述步骤进行操作,就能够确保MySQL安装的完整性。
2023-06-26 18:05:53
32
风轻云淡_t
ClickHouse
...ql CREATE TABLE replicated_table ( ... ) ENGINE = ReplicatedMergeTree('/clickhouse/tables/{database}/{table}', 'replica1') PARTITION BY ... ORDER BY ... 这里,/clickhouse/tables/{database}/{table}是一个 ZooKeeper 路径,用于协调多个副本之间的数据同步;'replica1'则是当前副本标识符。 2.2 数据自动同步与容灾 一旦某台服务器上的数据出现异常,其他拥有相同Replicated表的服务器仍保留完整的数据。当有新的服务器小弟加入集群大家庭,或者主节点大哥不幸挂掉的时候,Replication机制这个超级替补队员就会立马出动,自动把数据同步得妥妥的,确保所有数据都能保持一致性、完整性,一个字都不会少。 3. 数据一致性检查与修复 3.1 使用checksum函数 ClickHouse提供checksum函数来计算表数据的校验和,可用于验证数据是否完整: sql SELECT checksum() FROM table_name; 定期执行此操作并记录结果,以便在后续时间点对比校验和的变化,从而发现可能的数据丢失问题。 3.2 表维护及修复 若发现数据不一致,可以尝试使用OPTIMIZE TABLE命令进行表维护和修复: sql OPTIMIZE TABLE table_name FINAL; 该命令会重新整理表数据,并尝试修复任何可能存在的数据损坏问题。 4. 实践思考与探讨 尽管我们可以通过上述方法来减少和应对ClickHouse中的数据丢失风险,但防患于未然总是最优策略。在搭建和运用ClickHouse系统的时候,千万记得要考虑让它“坚如磐石”,也就是要设计出高可用性方案。比如说,我们可以采用多副本这种方式,就像备份多个小帮手一样,让数据安全无忧;再者,跨地域冗余存储也是一招妙计,想象一下,即使地球另一边的机房挂了,这边的数据也能照常运作,这样就大大提升了系统的稳健性和可靠性啦!同时,建立一个完善、接地气的数据监控系统,能够灵敏捕捉并及时解决那些可能冒头的小问题,这绝对是一个无比关键的步骤。 总结起来,面对ClickHouse数据丢失问题,我们需采取主动防御和被动恢复相结合的方式,既要做好日常的数据备份和Replication配置,也要学会在问题发生后如何快速有效地恢复数据,同时结合数据一致性检查以及表维护等手段,全面提升数据的安全性和稳定性。在实践中不断优化和完善,才能真正发挥出ClickHouse在海量数据分析领域的强大威力。
2023-01-20 13:30:03
445
月影清风
Flink
...m pyflink.table import DataTypes, TableConfig, StreamTableEnvironment, Schema, \ BatchTableEnvironment, TableSchema, Field, StreamTableApi env = StreamExecutionEnvironment.get_execution_environment() t_config = TableConfig() t_env = StreamTableEnvironment.create(env, t_config) source = ... t_env.connect JDBC("url", "username", "password") \ .with_schema(Schema.new_builder() \ .field("user_id", DataTypes.STRING()) \ .field("product_id", DataTypes.STRING()) \ .field("timestamp", DataTypes.TIMESTAMP(3)) \ .build()) \ .with_name("stream_table") \ .create_temporary_view() pattern = Pattern( from_elements("order", DataTypes.STRING()), OneOrMore( PatternUnion( Pattern.of_type(DataTypes.STRING()).equalTo("purchase"), Pattern.of_type(DataTypes.STRING()).equalTo("click"))), to_elements("session")) result = pattern.apply(t_env.scan("stream_table")) result.select("order_user_id").print_to_file("/tmp/output") env.execute("CEP example") 在这段代码中,我们首先创建了一个表环境,并从JDBC连接读取了一张表。然后,我们定义了一个事件模式,该模式包含了两个事件:“order”和“session”。最后,我们使用这个模式来筛选表中的数据,并将结果保存到文件中。这个例子呢,我们把“order”想象成一次买买买的行动,而“session”呢,就相当于一个会话的开启或者结束,就像你走进商店开始挑选商品到结账离开的整个过程。当用户连续两次剁手买东西,或者接连点啊点的,我们就会觉得这位朋友可真是活跃得不得了,然后我们就把他的用户ID美滋滋地记到文件里去。 3. 实时告警系统 在实时告警系统中,我们需要在接收到实时数据后立即发送告警。Flink CEP可以帮助我们实现实时的告
2023-06-17 10:48:34
452
凌波微步-t
ClickHouse
...e:深入理解与应对“TableAlreadyLockedException:表已锁定异常” 1. 引言 ClickHouse,作为一款高性能的列式数据库管理系统,在大数据分析领域因其卓越的查询性能和灵活的数据处理能力而备受青睐。不过在实际操作的时候,咱们可能会时不时撞上一个挺常见的问题——"表已锁定异常"(这货叫"TableAlreadyLockedException"),意思就是这张表格已经被别人锁住啦,暂时动不了。这篇文章,咱会用大白话和满满的干货,实实在在的代码实例,带你一步步深挖这个问题是怎么冒出来的,一起琢磨出解决它的办法,并且还会手把手教你如何巧妙避开这类异常情况的发生。 2. “TableAlreadyLockedException”:现象与原因 2.1 现象描述 在执行对ClickHouse表进行写入、删除或修改等操作时,如果你收到如下的错误提示: sql Code: 395, e.displayText() = DB::Exception: Table is locked (version X has a lock), Stack trace: ... 这就是所谓的“TableAlreadyLockedException”,意味着你尝试访问的表正处于被锁定的状态,无法进行并发写入或结构修改。 2.2 原因剖析 ClickHouse为了保证数据一致性,在对表进行DDL(Data Definition Language)操作,如ALTER TABLE、DROP TABLE等,以及在MergeTree系列引擎进行数据合并时,会对表进行加锁。当多个请求同时抢着对同一张表格做这些操作时,那些不是最先来的家伙就会被“请稍等”并抛出一个叫做“表已锁定异常”的小脾气。 例如,当你在一个会话中执行了如下ALTER TABLE命令: sql ALTER TABLE your_table ADD COLUMN new_column Int32; 同时另一个会话试图对该表进行写入: sql INSERT INTO your_table (existing_column) VALUES (1); 此时,第二个会话就会触发“TableAlreadyLockedException”。 3. 解决方案及实践建议 3.1 避免并发DDL操作 尽量确保在生产环境中,不会出现并发的DDL操作。可以通过任务调度系统(如Airflow、Kubernetes Jobs等)串行化这类任务。 3.2 使用ON CLUSTER语法 对于分布式集群环境,使用ON CLUSTER语法可以确保在所有节点上顺序执行DDL操作: sql ALTER TABLE ON CLUSTER 'your_cluster' your_table ADD COLUMN new_column Int32; 3.3 耐心等待或强制解锁 如果确实遇到了表被意外锁定的情况,可以等待当前正在进行的操作完成,或者在确认无误的情况下,通过SYSTEM UNLOCK TABLES命令强制解锁: sql SYSTEM UNLOCK TABLES your_table; 但请注意,这应作为最后的手段,因为它可能破坏正在执行的重要操作。 4. 预防措施与最佳实践 - 优化业务逻辑:在设计业务流程时,充分考虑并发控制,避免在同一时间窗口内对同一张表进行多次DDL操作。 - 监控与报警:建立完善的监控体系,实时关注ClickHouse集群中的表锁定情况,一旦发现长时间锁定,及时通知相关人员排查解决。 - 版本管理与发布策略:在进行大规模架构变更或表结构调整时,采用灰度发布、分批次更新等策略,降低对线上服务的影响。 总结来说,“TableAlreadyLockedException”是ClickHouse保障数据一致性和完整性的一个重要机制体现。搞明白它产生的来龙去脉以及应对策略,不仅能让我们在平时运维时迅速找到问题的症结所在,还能手把手教我们打造出更为结实耐用、性能强大的大数据分析系统。所以,让我们在实践中不断探索和学习,让ClickHouse更好地服务于我们的业务需求吧!
2024-02-21 10:37:14
350
秋水共长天一色
HBase
...:2181"); HTable table = new HTable(config, "test_table"); Put put = new Put(Bytes.toBytes("row_key")); put.add(Bytes.toBytes("cf"), Bytes.toBytes("cq"), Bytes.toBytes("value")); table.put(put); 3. HBase性能测试方法 (1)基准测试 使用Apache BenchMark工具(如YCSB,Yahoo! Cloud Serving Benchmark),可以模拟不同场景下的读写压力,以此评估HBase的基础性能。比如说,我们可以尝试调整各种不同的参数来考验HBase,就好比设置不同数量的同时在线用户,改变他们的操作行为(比如读取或者写入数据),甚至调整数据量的大小。然后,咱们就可以通过观察HBase在这些极限条件下的表现,看看它是否能够坚挺如初,表现出色。 (2)监控分析 利用HBase自带的监控接口或第三方工具(如Grafana+Prometheus)实时收集并分析集群的各项指标,如RegionServer负载均衡状况、内存使用率、磁盘I/O、RPC延迟等,以发现可能存在的性能瓶颈。 4. HBase性能调优策略 (1)配置优化 - 网络参数:调整hbase.client.write.buffer大小以适应网络带宽和延迟。 - 内存分配:合理分配BlockCache和MemStore的空间,以平衡读写性能。 - Region大小:根据数据访问模式动态调整Region大小,防止热点问题。 (2)架构优化 - 增加RegionServer节点,提高并发处理能力。 - 采用预分裂策略避免Region快速膨胀导致的性能下降。 (3)数据模型优化 - 合理设计RowKey,实现热点分散,提升查询效率。 - 根据查询需求选择合适的列族压缩算法,降低存储空间占用。 5. 实践案例与思考过程 在一次实践中,我们发现某业务场景下HBase读取速度明显下滑。经过YCSB压测后,定位到RegionServer的BlockCache已满,导致频繁的磁盘IO。于是我们决定给BlockCache扩容,让它变得更大些,同时呢,为了让热点现象不再那么频繁出现,我们对RowKey的结构进行了大刀阔斧的改造。这一系列操作下来,最终咱们成功让系统的性能蹭蹭地往上提升啦!在这个过程中,我们可是实实在在地感受到了,摸清业务特性、一针见血找准问题所在,还有灵活运用各种调优手段的重要性,这简直就像是打游戏升级一样,缺一不可啊! 6. 结语 性能测试与调优是HBase运维中的必修课,它需要我们既具备扎实的技术理论知识,又要有敏锐的洞察力和丰富的实践经验。经过对HBase从头到脚、一丝不苟的性能大考验,再瞅瞅咱的真实业务场景,咱们能针对性地使出一些绝招进行调优。这样一来,HBase就能更溜地服务于我们的业务需求,在大数据的世界里火力全开,展现它那无比强大的能量。
2023-03-14 18:33:25
580
半夏微凉
Hadoop
...Google的Bigtable的思路,就是为了打造一个既能跑得快,又稳当,还能无限长大的数据仓库。简单来说,就是想给咱的数据找个既好用又耐用的家,让数据处理起来更顺畅,不卡壳,还能随着业务增长不断扩容,就跟咱们搬新房子一样,越住越大,越住越舒服!其数据模型支持多维查询,适合处理大量数据并提供快速访问。 与NoSQL数据库的集成 HBase的出现,让开发者能够利用Hadoop的强大计算能力同时享受NoSQL数据库的灵活性。哎呀,你知道的啦,在咱们的实际操作里,HBase这玩意儿可是个好帮手,能和各种各样的NoSQL数据库玩得转,不管是数据共享、搬家还是联合作战查情报,它都能搞定!就像是咱们团队里的多面手,哪里需要就往哪一站,灵活得很呢!以下是几种常见的集成方式: 1. 外部数据源集成 通过简单的API调用,HBase可以读取或写入其他NoSQL数据库的数据,如MongoDB、Cassandra等。这通常涉及数据复制或同步流程,确保数据的一致性和完整性。 2. 数据融合 在大数据分析项目中,HBase可以与其他Hadoop生态系统内的组件(如MapReduce、Spark)结合,处理从各种来源收集的数据,包括但不限于NoSQL数据库。通过这种方式,可以构建更复杂的数据模型和分析流程。 3. 实时数据处理 借助HBase的实时查询能力,可以集成到流处理系统中,如Apache Kafka和Apache Flink,实现数据的实时分析和决策支持。 示例代码实现 下面我们将通过一个简单的示例,展示如何使用HBase与MongoDB进行数据交互。这里假设我们已经安装了HBase和MongoDB,并且它们在本地运行。 步骤一:连接HBase java import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.TableName; import org.apache.hadoop.hbase.client.Connection; import org.apache.hadoop.hbase.client.ConnectionFactory; public class HBaseConnection { public static void main(String[] args) { String hbaseUrl = "localhost:9090"; try { Connection connection = ConnectionFactory.createConnection(HBaseConfiguration.create(), hbaseUrl); System.out.println("Connected to HBase"); } catch (Exception e) { System.err.println("Error connecting to HBase: " + e.getMessage()); } } } 步骤二:连接MongoDB java import com.mongodb.MongoClient; import com.mongodb.client.MongoDatabase; public class MongoDBConnection { public static void main(String[] args) { String mongoDbUrl = "mongodb://localhost:27017"; try { MongoClient client = new MongoClient(mongoDbUrl); MongoDatabase database = client.getDatabase("myDatabase"); System.out.println("Connected to MongoDB"); } catch (Exception e) { System.err.println("Error connecting to MongoDB: " + e.getMessage()); } } } 步骤三:数据交换 为了简单起见,我们假设我们有一个简单的HBase表和一个MongoDB集合,我们将从HBase读取数据并将其写入MongoDB。 java import org.apache.hadoop.hbase.TableName; import org.apache.hadoop.hbase.client.Connection; import org.apache.hadoop.hbase.client.Put; import org.apache.hadoop.hbase.client.Table; import org.apache.hadoop.hbase.util.Bytes; import com.mongodb.client.MongoCollection; import com.mongodb.client.model.Filters; import com.mongodb.client.model.UpdateOptions; import com.mongodb.client.model.UpdateOneModel; public class DataExchange { public static void main(String[] args) { // 连接HBase String hbaseUrl = "localhost:9090"; try { Connection hbaseConnection = ConnectionFactory.createConnection(HBaseConfiguration.create(), hbaseUrl); Table hbaseTable = hbaseConnection.getTable(TableName.valueOf("users")); // 连接MongoDB String mongoDbUrl = "mongodb://localhost:27017"; MongoClient mongoClient = new MongoClient(mongoDbUrl); MongoDatabase db = mongoClient.getDatabase("myDatabase"); MongoCollection collection = db.getCollection("users"); // 从HBase读取数据 Put put = new Put(Bytes.toBytes("123")); hbaseTable.put(put); // 将HBase数据写入MongoDB Document doc = new Document("_id", "123").append("name", "John Doe"); UpdateOneModel updateModel = new UpdateOneModel<>(Filters.eq("_id", "123"), new Document("$set", doc), new UpdateOptions().upsert(true)); collection.updateOne(updateModel); System.out.println("Data exchange completed."); } catch (Exception e) { System.err.println("Error during data exchange: " + e.getMessage()); } } } 请注意,上述代码仅为示例,实际应用中可能需要根据具体环境和需求进行调整。 结论 Hadoop的HBase与NoSQL数据库的集成不仅拓展了数据处理的边界,还极大地提升了数据分析的效率和灵活性。通过灵活的数据交换策略,企业能够充分利用现有数据资源,构建更加智能和响应式的业务系统。无论是数据融合、实时分析还是复杂查询,HBase的集成能力都为企业提供了强大的数据处理工具包。嘿,你知道吗?科技这玩意儿真是越来越神奇了!随着每一步发展,咱们就像在探险一样,发现越来越多的新玩法,新点子。就像是在拼图游戏里,一块块新的碎片让我们能更好地理解这个大数据时代,让它变得更加丰富多彩。我们不仅能看到过去,还能预测未来,这感觉简直酷毙了!所以,别忘了,每一次技术的进步,都是我们在向前跑,探索未知世界的一个大步。
2024-08-10 15:45:14
35
柳暗花明又一村
转载文章
...据库名create table 表名查看如何创建db的show create database 库名 查看如何创建table结构的show create table 表名; 修改mysql的密码set password = PASSWORD('redhat'); 创建mysql的普通用户,默认权限非常低create user zhang@'%' identified by '123456'; 查询mysql数据库中的用户信息use mysql;select host,user,password from user; 7. 给用户添加权限命令 对所有库和所有表授权所有权限grant all privileges on . to 账户@主机名 给zhang用户授予所有权限grant all privileges on . to zhang@'%'; 刷新授权表flush privileges; 8. 给用户添加权限命令 给zhangsan用户授予所有权限grant all privileges on . to zhangsan@'%'; 给与root权限授予远程登录的命令 'centos这是密码随意设置grant all privileges on . to root@'%' identified by '123456'; 此时可以在windows登录linux的数据库 连接服务器的mysqlmysql -uyining -p -h 服务器的地址 9. 数据备份与恢复 导出当前数据库的所有db,到一个文件中1.mysqldump -u root -p --all-databases > /data/AllMysql.dump2.登录mysql 导入数据mysql -u root -p> source /data/AllMysql.dump3.通过命令导入数据 在登录时候,导入数据文件,一样可以写入数据mysql -uroot -p < /data/AllMysql.dump 10. 修改Mariadb存储路径 10.1 首先确定MariaDB数据库能正常运行,确定正常后关闭服务 systemctl stop mariadb 10.2 建立要更改数据存放的目录,如:我这单独分了一个区/data存放MariaDB的数据 mkdir /data/mysql_data chown -R mysql:mysql /data/mysql_data 10.3 复制默认数据存放文件夹到/data/mysql_data cp -a /var/lib/mysql /data/mysql_data 10.4 修改/etc/my.cnf.d/server.cnf vim /etc/my.cnf.d/server.cnf 在[mysqld]标签下添加如下内容 datadir=/data/mysql_data/mysqlsocket=/var/lib/mysql/mysql.sockdefault-character-set=utf8character_set_server=utf8slow_query_log=onslow_query_log_file=/data/mysql_data/slow_query_log.loglong_query_time=2 10.5 配置MariaDB慢查询 touch /data/mysql_data/slow_query_log.logchown mysql:mysql /data/mysql_data/slow_query_log.log 10.6 重启数据库 systemctl start mariadb 10.7 注意: 1、配置文件my.cnf存在,但是修改的并不是my.cnf,而是/etc/my.cnf.d/server.cnf; 2、并没有更改mysql.sock的路径配置; 3、没有修改/etc/init.d/mysql中的内容; 4、没有修改mysql_safe中的内容; 5、增加了数据库的慢查询配置。 11. Mariadb主从复制 11.1 主从库初始化 这条命令可以初始化mysql,删除匿名用户,设置root密码等等....mysql_secure_installation1.输入当前密码,初次安装后是没有密码的,直接回车2.询问是否使用 'unix_socket' 进行身份验证: n3.为 root 设置密码:y4.输入 root 的新密码: root5.确认输入 root 的新密码: root6.是否移除匿名用户,这个随意,建议删除: y7.拒绝用户远程登录,这个建议开启:n8.删除 test 库,可以保留:n9.重新加载权限表:y 11.2 修改主库配置 [root@mster mysql] grep -Ev "^$|^" /etc/my.cnf.d/server.cnf[server][mysqld]character-set-server=utf8collation-server=utf8_general_ciserver_id = 13 一组主从组里的每个id必须是唯一值。推荐用ip位数log-bin= mysql-bin 二进制日志,后面指定存放位置。如果只是指定名字,默认存放在/var/lib/mysql下lower_case_table_names=1 不区分大小写binlog-format=ROW 二进制日志文件格式log-slave-updates=True slave更新是否记入日志sync-master-info=1 值为1确保信息不会丢失slave-parallel-threads=3 同时启动多少个复制线程,最多与要复制的数据库数量相等即可binlog-checksum=CRC32 效验码master-verify-checksum=1 启动主服务器效验slave-sql-verify-checksum=1 启动从服务器效验[galera][embedded][mariadb][mariadb-10.6][root@mster-k8s mysql] 11.2 修改从库配置 [mysqld]character-set-server=utf8collation-server=utf8_general_ciserver_id=14log-bin= mysql-bin log-bin是二进制文件relay_log = relay-bin 中继日志, 后面指定存放位置。如果只是指定名字,默认存放在/var/lib/mysql下lower_case_table_names=1 11.3 重启主库和从库服务 systemctl restart mariad 11.4 master节点配置 MariaDB [huawei]> grant replication slave, replication client on . to 'liu'@'%' identified by '123456';Query OK, 0 rows affected (0.001 sec)MariaDB [huawei]> show master status;+------------------+----------+--------------+------------------+| File | Position | Binlog_Do_DB | Binlog_Ignore_DB |+------------------+----------+--------------+------------------+| mysql-bin.000001 | 4990 | | |+------------------+----------+--------------+------------------+1 row in set (0.000 sec)MariaDB [huawei]> select binlog_gtid_pos('mysql-bin.000001', 4990 );+-------------------------------------------+| binlog_gtid_pos('mysql-bin.000001', 4990) |+-------------------------------------------+| 0-13-80 |+-------------------------------------------+1 row in set (0.000 sec)MariaDB [huawei]> flush privileges; 11.5 slave节点配置 MariaDB [(none)]> set global gtid_slave_pos='0-13-80';Query OK, 0 rows affected (0.004 sec)MariaDB [(none)]> change master to master_host='101.34.141.216',master_user='liu',master_password='123456',master_use_gtid=slave_pos;Query OK, 0 rows affected (0.008 sec)MariaDB [(none)]> start slave;Query OK, 0 rows affected (0.005 sec)MariaDB [(none)]> 11.6 验证salve状态 MariaDB [(none)]> show slave status\G 1. row Slave_IO_State: Waiting for master to send eventMaster_Host: 101.34.141.216Master_User: liuMaster_Port: 3306Connect_Retry: 60Master_Log_File: mysql-bin.000001Read_Master_Log_Pos: 13260Relay_Log_File: relay-bin.000002Relay_Log_Pos: 10246Relay_Master_Log_File: mysql-bin.000001Slave_IO_Running: YesSlave_SQL_Running: YesReplicate_Do_DB: Replicate_Ignore_DB: Replicate_Do_Table: Replicate_Ignore_Table: Replicate_Wild_Do_Table: Replicate_Wild_Ignore_Table: Last_Errno: 0Last_Error: Skip_Counter: 0Exec_Master_Log_Pos: 13260Relay_Log_Space: 10549Until_Condition: NoneUntil_Log_File: Until_Log_Pos: 0Master_SSL_Allowed: NoMaster_SSL_CA_File: 本篇文章为转载内容。原文链接:https://blog.csdn.net/l363130002/article/details/126121255。 该文由互联网用户投稿提供,文中观点代表作者本人意见,并不代表本站的立场。 作为信息平台,本站仅提供文章转载服务,并不拥有其所有权,也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况,请及时联系我们,我们将第一时间进行核实并删除相应内容。
2023-07-12 10:11:01
310
转载
转载文章
...us-unwind-tables -s -c -o crack.o crack.c 然后我们在本地目录下,把api_call.asm拷贝一份,并命名为crack_call.asm,后者内容与前者完全相同,只不过稍微有那么一点点改变,例如: BITS 32mov AX, 30 8mov DS, axcall mainmov edx, 4 ;返回内核int 02Dh.... 这里需要注意,语句: mov AX, 30 8mov DS, ax 其中30对应的就是前面显示的0x1E,这两句汇编的作用是,把程序crack的数据段设置成下标为30的全局描述符所指向的内存段一致。这就意味着crack进程所使用的数据段就跟hlt启动的进程所使用的数据段一致了!于是在crack.c中,它对内存地址为0x123的地方写入字符串”crack”,那就意味着对hlt加载用户进程的内存空间写入对应字符串! 完成上面代码后,我们在java项目中,增加代码,一是用来编译crack进程,而是把crack代码写入虚拟磁盘。在OperatingSystem.java中,将代码做如下添加: public void makeFllopy() {writeFileToFloppy("kernel.bat", false, 1, 1);....header = new FileHeader();header.setFileName("crack");header.setFileExt("exe");file = new File("crack.bat");in = null;try {in = new FileInputStream(file);long len = file.length();int count = 0;while (count < file.length()) {bbuf[count] = (byte) in.read();count++;}in.close();}catch(IOException e) {e.printStackTrace();return;}header.setFileContent(bbuf);fileSys.addHeader(header);....}public static void main(String[] args) {CKernelAsmPrecessor kernelPrecessor = new CKernelAsmPrecessor();kernelPrecessor.process();kernelPrecessor.createKernelBinary();CKernelAsmPrecessor appPrecessor = new CKernelAsmPrecessor("hlt.bat", "app_u.asm", "app.asm", "api_call.asm");appPrecessor.process();appPrecessor.createKernelBinary();CKernelAsmPrecessor crackPrecessor = new CKernelAsmPrecessor("crack.bat", "crack_u.asm", "crack.asm", "crack_call.asm");crackPrecessor.process();crackPrecessor.createKernelBinary();OperatingSystem op = new OperatingSystem("boot.bat");op.makeFllopy();} 在main函数中,我们把crack.c及其附属汇编文件结合在一起,编译成二进制文件crack.bat,在makeFllopy中,我们把编译后的crack.bat二进制数据读入,并把它写入到虚拟磁盘中,当系统运行起来后,可以把crack.bat二进制内容作为进程加载执行。 完成上面代码后,回到内核的C语言部分,也就是write_vga_desktop.c做一些修改,在kernel_api函数中,修改如下: int kernel_api(int edi, int esi, int ebp, int esp,int ebx, int edx, int ecx, int eax) {....else if (edx == 14) {sheet_free(shtctl, (struct SHEET)ebx);//change herecons_putstr((char)(task->pTaskBuffer->pDataSeg + 0x123));}....}void console_task(struct SHEET sheet, int memtotal) {....for(;;) {....else if (i == KEY_RETURN) {....else if (strcmp(cmdline, "crack") == 1) {cmd_execute_program("crack.exe");}....}....} 在kernel_api中,if(edx == 14)对应的api调用是api_closewin,也就是当用户进程关闭窗口时,我们把进程数据偏移0x123处的数据当做字符串打印到控制台窗口上,在console_task控制台进程主函数中,我们增加了对命令crack的响应,当用户在控制台上输入命令”crack”时,将crack代码加载到内核中运行。上面代码完成后,编译内核,然后用虚拟机将内核加载,系统启动后,我们现在一个控制台中输入hlt,先启动用户进程。然后点击”shift + w”,启动另一个控制台窗口,在其中输入crack,运行crack程序: 接着把点击tab键,把焦点恢复到窗口task_a,然后用鼠标点击运行hlt命令的窗口,把输入焦点切换到该控制台,然后再次点击tab键,把执行权限提交给运行hlt命令的控制台,此时点击回车,介绍用户进程启动的窗口,结果情况如下: 此时我们可以看到,运行hlt命令,执行用户进程的控制台窗口居然输出了字符串”crack”,而这个字符串正是crack.c在执行时,写入地址0x123的字符串。这就意味着一个恶意进程成功修改了另一个进程的内存数据,也相当于一个流氓程序把一只咸猪手伸到其他用户进程的裙底,蹂躏一番后留下了猥琐的证据。 那么如何防范恶意进程对其他程序的非法入侵呢,这就得使用CPU提供的LDT机制,也就是局部描述符表,该机制的使用,我们将在下一节详细讲解。更详细的讲解和代码演示调试,请参看视频: 更详细的讲解和代码调试演示过程,请参看视频 Linux kernel Hacker, 从零构建自己的内核 更多技术信息,包括操作系统,编译器,面试算法,机器学习,人工智能,请关照我的公众号: 本篇文章为转载内容。原文链接:https://blog.csdn.net/tyler_download/article/details/78731905。 该文由互联网用户投稿提供,文中观点代表作者本人意见,并不代表本站的立场。 作为信息平台,本站仅提供文章转载服务,并不拥有其所有权,也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况,请及时联系我们,我们将第一时间进行核实并删除相应内容。
2023-03-14 19:08:07
254
转载
转载文章
...s)console.table(this.results)})},//停止下载stop(){//改变递归标签为falsethis.stopRecursiveTags=false;},//开始下载start(){//重置递归标签为true 最后进行合并this.stopRecursiveTags=true;//重置断点续传标签this.breakpointResumeTags=true;//重新调用下载方法this.download();},// 分段下载需要后端配合download() {// 下载地址const url = "/down?fileName="+this.keyword.trim()+"&drive=E";console.log(url)const chunkSize = 1024 1024 50; // 单个分段大小,这里测试用100Mlet filesTotalSize = chunkSize; // 安装包总大小,默认100Mlet filesPages = 1; // 总共分几段下载//计算百分比之前先清空上次的if(this.percentage==100){this.percentage=0;}let sentAxios = (num) => {let rande = chunkSize;//判断是否开启了断点续传(断点续传没法并行-需要上次请求的结果作为参数)if (this.breakpointResumeTags){rande = ${Number(this.fileFinalOffset)+1}-${num chunkSize + 1};}else {if (num) {rande = ${(num - 1) chunkSize + 2}-${num chunkSize + 1};} else {// 第一次0-1方便获取总数,计算下载进度,每段下载字节范围区间rande = "0-1";} }let headers = {range: rande,};axios({method: "get",url: url.trim(),async: true,data: {},headers: headers,responseType: "blob"}).then((response) => {if (response.status == 200 || response.status == 206) {//检查了下才发现,后端对文件流做了一层封装,所以将content指向response.data即可const content = response.data;//截取文件总长度和最后偏移量let result= response.headers["content-range"].split("/");// 获取文件总大小,方便计算下载百分比filesTotalSize =result[1];//获取最后一片文件位置,用于断点续传this.fileFinalOffset=result[0].split("-")[1]// 计算总共页数,向上取整filesPages = Math.ceil(filesTotalSize / chunkSize);// 文件流数组this.contentList.push(content);// 递归获取文件数据(判断是否要继续递归)if (this.filesCurrentPage < filesPages&&this.stopRecursiveTags==true) {this.filesCurrentPage++;//计算下载百分比 当前下载的片数/总片数this.percentage=Number((this.contentList.length/filesPages)100).toFixed(2);sentAxios(this.filesCurrentPage);//结束递归return;}//递归标签为true 才进行下载if (this.stopRecursiveTags){// 文件名称const fileName =decodeURIComponent(response.headers["fname"]);//构造一个blob对象来处理数据const blob = new Blob(this.contentList);//对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性//IE10以上支持blob但是依然不支持downloadif ("download" in document.createElement("a")) {//支持a标签download的浏览器const link = document.createElement("a"); //创建a标签link.download = fileName; //a标签添加属性link.style.display = "none";link.href = URL.createObjectURL(blob);document.body.appendChild(link);link.click(); //执行下载URL.revokeObjectURL(link.href); //释放urldocument.body.removeChild(link); //释放标签} else {//其他浏览器navigator.msSaveBlob(blob, fileName);} }} else {//调用暂停方法,记录当前下载位置console.log("下载失败")} }).catch(function (error) {console.log(error);});};// 第一次获取数据方便获取总数sentAxios(this.filesCurrentPage);this.$message({message: '文件开始下载!',type: 'success'});} }})</script></body></html> 本篇文章为转载内容。原文链接:https://blog.csdn.net/kangshihang1998/article/details/129407214。 该文由互联网用户投稿提供,文中观点代表作者本人意见,并不代表本站的立场。 作为信息平台,本站仅提供文章转载服务,并不拥有其所有权,也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况,请及时联系我们,我们将第一时间进行核实并删除相应内容。
2023-01-19 08:12:45
546
转载
站内搜索
用于搜索本网站内部文章,支持栏目切换。
知识学习
实践的时候请根据实际情况谨慎操作。
随机学习一条linux命令:
xz -z -k file.txt
- 使用xz工具压缩文件。
推荐内容
推荐本栏目内的其它文章,看看还有哪些文章让你感兴趣。
2023-04-28
2023-08-09
2023-06-18
2023-04-14
2023-02-18
2023-04-17
2024-01-11
2023-10-03
2023-09-09
2023-06-13
2023-08-07
2023-03-11
历史内容
快速导航到对应月份的历史文章列表。
随便看看
拉到页底了吧,随便看看还有哪些文章你可能感兴趣。
时光飞逝
"流光容易把人抛,红了樱桃,绿了芭蕉。"