zhangzhaoaaa
zhangzhaoaaa

html5 跨iframe的拖拽实现移动端页面设计器

     背景：前一阶段做了一个移动页面设计器，拖拽组件、设计器界面、组件属性都在同一个界面，导致设计器(手机壳)中的页眉和页脚位置，尤其是页脚在设计器中没办法像在真正手机中，固定在页面下方。这是由于jqm把整个页面当成了一个容器，如果页眉页脚fixed，那么页眉页脚就会跑到整个页面的最上方和最下方，而不是在设计器中，所以只能把设计器(手机壳)部分改成iframe，这样，把一个jqm完整的页面结构放入其中，页眉页脚就显示正确了。因为这个设计器是通过拖拽组件的方式生成页面，所以就出现了跨iframe的拖拽。

   功能：拖拽组件生成对应组件的代码，并且可以在iframe这个容器中拖动组件进行排序。

    技术：jquery 1.10,jquery-ui 1.11,html5

 

    抛砖引玉：因为这是公司的项目，我在此只抛砖引玉，做一个小例子，页面比较丑，但是功能是实现了。现公司项目，我就不放我们的设计器界面了，我找一个别人网站的设计器的图挂上来，能更明白移动端设计器。

    此设计器网站：猛戳

html5 跨iframe的拖拽实现移动端页面设计器_第1张图片

    废话少说，show me the code!

    主页面：

   

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页面</title>
<style>
.component {border:solid #000000;width:100px;height:30px;}
</style>
</head>

<body>
<ul class="cpList">
    <li id="input_type" title="文本输入框" class="component">
        <div class="cpIcon"></div>
        <p>文本输入框</p>
    </li>
    <li id="label_type" title="文本"  class="component">
        <div class="cpIcon"></div>
        <p>文本</p>
    </li>
</ul>   
<iframe id="frame" name="frame" src="frame.html" style="margin:10px auto;display:block;border:solid 1;"></iframe> 
</body>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(function(){
	//可拖拽组件初始化
	$('.cpList li').each(function(){
		$(this).attr("draggable","true");
	});
})

</script>
</html>

 

 

     iframe页面：

    

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="jquery-ui.css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script src="draggable.js" type="text/javascript"></script>
<style>
.liClass {border:solid #000000;width:180px;height:30px;}
.tab {min-height:100px;}
</style>
</head>

<body>
<ul class="tab">
<li class="liClass"><label>aaaaaaa</label></li>
</ul>
</body>
<script>
$(function(){
	$(".cpList", parent.document).find("li").each(function() {
		$(this).on("dragstart", function(ev) {//开始拖拽
			var dt = ev.originalEvent.dataTransfer;
			dt.setData('Text', ev.target.id);//将拖拽组件ID传入
		});
	});
	//拖拽组件
	Draggable({destId:".tab",dragTag:"li"});
})
</script>
</html>

 

    draggable.js代码：

   

function Draggable(options){
	var options = options||{};
	var tag = options.dragTag||"LI";//目前只支持li
	tag = tag.toUpperCase();
	var $dest = $(options.destId);//拖拽放入的容器对象
	$dest.on("dragover", function(ev) {
		ev.preventDefault();
	});
	$dest.on("drop", function(ev) {
		ev.preventDefault();
		var df = ev.originalEvent.dataTransfer;
		var data = df.getData("Text");
		var el = ev.target;//目标对象
		var ctx = $(this).get(0);//当前容器
		if (data==""){
			return false;
		}
		do {
			var litem = document.createElement('li');
			var item = $(litem);
			var html = "";
			if (data=='input_type'){
				html = "<input type='text' readonly value='test' />";
			}else if (data=='label_type'){
				html = "<label>测试文本</label>";
			}
			$(item).addClass("liClass");
			$(item).html(html);
			if ($(this).children().length>0){//当前容器下有li
				if(tag === '' || el.nodeName == tag){//当前目标对象的tagName是LI
					if (el.nextElementSibling){//如果当前对象的下一个兄弟节点存在，那么就将当前拖拽的对象插入到这个兄弟节点的前面
						el.parentNode.insertBefore($(item).get(0),el.nextElementSibling);
					}else{//兄弟节点不存，那么直接append到容器中
						ctx.appendChild($(item).get(0));
					}
				}
			}else{//当前容器下没有li，直接append进这个容器中
				ctx.appendChild($(item).get(0));
			}
		}
		while(el !== ctx && (el = el.parentNode));//当前目标对象不是容器，那么就将当前目标对象的父级节点赋值给当前目标对象
	});
	$dest.sortable();//JQUERY UI sortable组件
	return (function(){
		
	})(options);
}

 

 

 

你可能感兴趣的:(html5,页面设计器,跨iframe拖拽)

  • MateChat：前端智能化场景解决方案集，轻松构建你的AI应用 开源项目精选 人工智能
    MateChat致力于构建不同业务场景下高一致性的GenAI体验系统语言，同时匹配各种工具/平台的原生业务场景和界面特征，提供更适合研发工具领域的对话组件，打造流畅亲和、跨界一致、易学易用的用户体验，以及易接入、易维护、易扩展的开发体验。主要特点开箱即用的解决方案：一站式智能对话解决方案内置对话逻辑及常用模板，支持自由定制与二次开发组件丰富，功能全面：基于DevUI基础组件，提供了50+基础组件，
  • 22、web前端开发之html5（三） 跟着汪老师学编程 前端html5
    六.离线存储与缓存在网络环境不稳定或需要优化资源加载速度的场景下，离线存储与缓存技术显得尤为重要。HTML5引入了多种离线存储和缓存机制，帮助开发者提升用户体验。本节将详细介绍ApplicationCache、localStorage、sessionStorage以及IndexedDB等技术，帮助你理解如何在不同场景下选择合适的存储和缓存策略。1、ApplicationCacheApplicati
  • package.json版本前缀 田本初 前端
    前言执行npmi下载依赖后，element-plus出现bug（单页面多个date-picker同时开启），这是v2.9.0+的问题，但是项目package.json中版本如下："element-plus":"^2.7.6",乍一看并不是版本问题，但是package-lock.json中版本却是2.9.7版本前缀版本号主要分为三个部分：如2.7.6，其中2为主版本（major）、7为次要版本（mi
  • Milvus 在多模态数据（图像、文本、音频）向量搜索中的应用 莫比乌斯之梦 技术#Milvusmilvus音视频数据库向量数据库多模态数据
    随着人工智能和深度学习的发展，多模态数据检索逐渐成为热门技术，广泛应用于图像搜索、语音识别、跨模态检索、推荐系统等领域。传统的基于关键词或规则的检索方式已经难以满足智能应用的需求，因此，基于向量搜索的近似最近邻（ANN）检索成为主流方案。Milvus作为一款开源的向量数据库，可以高效地存储和检索图像、文本、音频等多模态数据的向量表示。本文将介绍Milvus如何处理多模态数据的向量搜索，以及如何构建
  • 使用Python爬虫获取豆瓣电影排行（进阶） 师哥678 python爬虫
    对于上一个使用爬虫获取豆瓣电影信息的博客进行改进。将所有代码放在了文章最后，需要的自行提取。一、代码讲解1、导入必要的库importrequests#发送HTTP请求frombs4importBeautifulSoup#解析HTML页面importtime#用于延迟importrandom#用于随机数、随机选择importre#正则表达式，提取评价人数importos#文件和文件夹操作fromda
  • 如何在网页编辑器中使用KindEditor导入Excel文件？ 2501_90699640 编辑器excelumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：KindEditor前端：vue2,vue3,react,vue-cli,html5,后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows
  • 测试用例场景法3个例子 ZhouChengtop java开发语言测试用例
    一、软件服务跨职能场景（流程图1）1.场景一：客户请求帮助或报告错误-是销售问题-解决问题并回应客户-与客户确认-完成2.场景二：客户请求帮助或报告错误-非销售问题-非新问题-解决方案-与客户确认-完成3.场景三：客户请求帮助或报告错误-非销售问题-是新问题-测试问题-未重现问题-从客户获得更多的细节-得到更多反馈4.场景四：客户请求帮助或报告错误-非销售问题-是新问题-测试问题-是重现问题-生成
  • AppML 下载指南 wjs2024 开发语言
    AppML下载指南引言AppML是一款功能强大的移动应用开发工具，它旨在简化移动应用的开发流程，提高开发效率。本文将为您详细介绍AppML的下载方法、安装步骤以及注意事项，帮助您快速上手这款优秀的应用开发工具。AppML简介AppML是一款基于人工智能技术的移动应用开发平台，它允许开发者通过简单的拖拽操作，快速构建出具有丰富功能的移动应用。AppML支持多种平台，包括iOS、Android和Win
  • “网页编辑器新技能：UMEDITOR的WORD、PDF导入解决方案？“ weixin_52041354 编辑器wordpdfumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 给Web开发者的HarmonyOS指南01-文本样式
    给Web开发者的HarmonyOS指南01-文本样式本系列教程适合HarmonyOS初学者，为那些熟悉用HTML与CSS语法的Web前端开发者准备的。本系列教程会将HTML/CSS代码片段替换为等价的HarmonyOS/ArkUI代码。页面结构HTML与ArkUI在Web开发中，HTML文档结构由、和等标签组成，其中标签包含了页面中所有可见的内容。而在HarmonyOS的ArkUI框架中，使用@E
  • 鸿蒙特效教程10-卡片展开/收起效果
    鸿蒙特效教程10-卡片展开/收起效果在移动应用开发中，卡片是一种常见且实用的UI元素，能够将信息以紧凑且易于理解的方式呈现给用户。本教程将详细讲解如何在HarmonyOS中实现卡片的展开/收起效果，通过这个实例，你将掌握ArkUI中状态管理和动画实现的核心技巧。一、实现效果预览我们将实现一个包含多个卡片的页面，整个交互过程都有平滑的动画效果。每个卡片默认只显示标题，点击右侧箭头按钮后可以展开显示详
  • 鸿蒙特效教程03-水波纹动画效果
    鸿蒙特效教程03-水波纹动画效果本教程适合HarmonyOS初学者，通过简单到复杂的步骤，一步步实现漂亮的水波纹动画效果。最终效果预览我们将实现以下功能：点击屏幕任意位置，在点击处生成一个水波纹触摸并滑动屏幕，波纹会实时跟随手指位置生成波纹从小到大扩散，同时逐渐消失波纹颜色随机变化，增加视觉多样性一、创建基础布局首先，我们需要创建一个基础页面布局。这个布局包含一个占满屏幕的区域，用于展示水波纹动画
  • 鸿蒙特效教程06-可拖拽网格实现教程
    鸿蒙特效教程06-可拖拽网格实现教程本教程适合HarmonyOSNext初学者，通过简单到复杂的步骤，一步步实现类似桌面APP中的可拖拽编辑效果。效果预览我们要实现的效果是一个Grid网格布局，用户可以通过长按并拖动来调整应用图标的位置顺序。拖拽完成后，底部会显示当前的排序结果。实现步骤步骤一：创建基本结构和数据模型首先，我们需要创建一个基本的页面结构和数据模型。我们将定义一个应用名称数组和一个对
  • 高德地图实现各类路线规划/高德地图路线规划/高德地图导航 八万鸡米花 1024程序员节vue地图
    前言今天鸡米花给大家带来的是vue3基于高德地图实现导航的功能，与其说是导航，其实叫轨迹查询更为准确一点，因为毕竟是在PC端实现，目前只做到了查询的功能，离实时导航还是有一定的距离，UI呢是参照了苹果地图的mac版，所以这里只是用来学习交流，同时呢也是鸡米花自己写的一个小demo，并未用于商业用途，好了，废话不多说了，直接看效果图！线上体验地址效果图首页搜索驾车导航公交导航由于驾车导航的页面与步行
  • “百度UM编辑器能否支持粘贴WORD文档并自动上传图片？“ 2501_90646763 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • “百度富文本编辑器（UMEDITOR）如何高效导入WORD内容？“ 2501_90646449 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • “如何通过UMEDITOR将WORD文档中的图片无缝复制到网页？“ 2501_90646449 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 重磅！理想汽车开源星环OS，成全球首家汽车操作系统开源企业 CSDN资讯 汽车开源理想汽车星环OS
    在2025中关村论坛年会上，理想汽车董事长兼CEO李想宣布理想汽车成为全球首家开源汽车操作系统企业，并分享星环OS的自研历程和技术优势，其性能超越行业主流闭源AUTOSAR系统。理想汽车于2021年启动星环OS自研项目，投入200人团队及超10亿元研发资金，历经方案选型、架构设计和落地，于2024年实现首个版本量产。相较于传统AUTOSAR，星环OS采用创新跨系统架构设计，优化全链路性能，使多个控
  • 一个接口请求不通（或页面无法访问）该如何排查？ 海姐软件测试 接口测试测试工具面试
    一、确认问题现象基础验证检查请求的URL、HTTP方法（GET/POST等）是否完全正确（注意拼写和大小写）。确认请求参数（Headers、Body、Query参数）是否符合接口文档要求。尝试用工具（如Postman、curl、浏览器）直接访问，排除客户端代码逻辑问题。区分问题范围是否所有环境（开发/测试/生产）都不可用？还是仅特定环境？是否所有用户都无法访问？还是仅部分用户（可能涉及IP限制或账
  • 内网穿透是什么，有哪些软件工具推荐，对比汇总10款选择 搬码临时工 网络物联网信息与通信开源软件服务器
    在现代信息化网络环境中，内网穿透技术成为了很多开发者、系统管理员、远程办公员工以及网络人员解决内网与外网互通问题的重要手段。尤其对于无公网IP网络下，搭建本地服务器提供互联网上连接访问，及需要跨网远程访问的应用场景，如远程桌面连接、Web服务、FTP文件共享、打印机异地用、以及数据库连接等，内网穿透工具提供了一种简单通用且便捷的解决方案。本文整理汇总介绍10个常见的内网穿透软件，有体验版本，有开源
  • 鸿蒙生态全解析：应用适配分享 矛取矛求 harmonyos华为
    一、鸿蒙系统的技术底座与适配挑战HarmonyOSNEXT作为全场景分布式操作系统，通过统一的技术底座和声明式开发框架，实现了"一次开发，多端部署"的跨设备协同能力。其核心优势在于：弹性部署架构：一套系统适配手机、平板、折叠屏、车机等全场景设备，开发者无需为不同终端单独开发分布式软总线：支持设备间硬件能力互助共享，如调用其他设备的摄像头、麦克风等ArkTS语言：声明式UI范式使界面开发效率提升30
  • Flutter完整开发实战详解(一、Dart语言和Flutter基础) _ 掘金技术征文(1) 2401_84009773 程序员flutterreactnativereact.js
    returndata;}///打印结果renderSome(){doSomeThing().then((value){print(value);///输出okfromrequest});}Flutter中setState很有ReactNative的既视感，Flutter中也是通过State跨帧实现管理数据状态的，这个后面会详细讲到。Flutter中一切皆Widget呈现，通过build方法返回Wi
  • 单细胞分析（六）——使用seurat进行去批次整合 生信小鹏 生信技能学习数据挖掘数据分析r语言
    数据整合概述对两个或多个单细胞数据集的联合分析带来了独特的挑战。特别是，在标准工作流程下，识别存在于多个数据集中的细胞群可能会有问题。Seurat有包括一组跨数据集match（或“align”）共有细胞群的方法。这些方法首先识别处于匹配生物学状态（“anchors”）的跨数据集细胞对，既可用于校正数据集之间的技术差异（即批量效应校正），也可用于跨实验条件的比较scRNA-seq分析。整合目的以下教
  • Godot引擎开发：Godot基础入门_发布与分发 chenlz2007 游戏开发godot游戏引擎性能优化网络nginx
    发布与分发在完成游戏开发后，发布和分发游戏是将您的作品展示给玩家的最后一步。Godot引擎提供了多种发布平台，包括Windows、macOS、Linux、HTML5、Android和iOS。本节将详细介绍如何在Godot引擎中准备和发布游戏，涵盖以下内容：项目设置导出模板导出设置导出游戏签名与分发部署到不同平台1.项目设置在发布游戏之前，首先需要确保项目的设置正确无误。项目设置包括但不限于标题、图
  • 低代码配置式Web组态解析 html组态 低代码前端组态web组态物联网自动化运维
    低代码配置式Web组态技术通过可视化操作和预置组件库，大幅降低开发门槛，适用于工业控制、物联网监控、数据可视化等场景。以下是综合行业实践和产品特性的分析：‌一、核心功能与优势‌‌可视化编辑与拖拽布局‌提供图形化编辑器，支持拖拽组件（如按钮、图表、传感器图标）搭建界面，无需手动编写前端代码‌。支持自定义图库上传，灵活适配不同行业场景（如化工设备、能源监控）‌。‌实时数据绑定与动态交互‌通过Webso
  • 如何让WordPress不同的页面、栏目显示不同的小工具侧边栏 嵌入式视界 网站运维wordpress
    WooSidebars是一款用于WordPress的插件，主要功能是允许用户根据不同的上下文条件（如特定页面、博客文章、分类目录或搜索结果页面等）来更改侧边栏中显示的小工具。自定义小工具区域：用户可以轻松创建自定义的小工具区域，并将其设置为在多种条件下显示，只需点击几次即可完成。兼容性：该插件与任何支持动态小工具区域的主题兼容。条件设置：支持多种条件设置，例如特定页面、文章、分类目录、标签、搜索结
  • Javascript 全局脚本编程和模块化编程的区别 lzfshub javascript开发语言ecmascript
    全局脚本编程和模块化编程在JavaScript中代表了两种不同的代码组织和执行方式。以下是它们之间的一些主要区别：全局脚本编程：全局作用域：变量和函数默认在全局作用域中创建，容易造成命名冲突。全局变量可以在页面的任何其他脚本中访问和修改。命名空间污染：由于所有变量和函数都暴露在全局作用域，容易导致命名空间污染。需要开发者手动管理命名空间，例如通过使用对象字面量或立即执行函数表达式（IIFE）来封装
  • 在 Dojo 框架中define、declare 和 require的区别 lzfshub java前端linux
    0.dojo库引入在Dojo框架中，define、declare和require是三个重要的概念，它们在模块化和类声明中扮演不同的角色。以下将详细介绍它们的功能、区别及使用场景：1.define定义：define用于定义一个模块（module），它是Dojo模块化开发的核心方法。用途：创建独立的代码块，便于管理和复用。声明模块的依赖关系，通过回调函数实现模块间的交互。支持异步加载，优化页面加载性能
  • 网页性能优化 tianruine javascript
    SSR与CSR1.SSR(ServerSideRendering)：传统的渲染方式，由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。减少的是一次数据请求，因为你请求一次就会把渲染好的页面这只返回给客户端，而CSR是你首先访问服务器，拿到对应的html文件返回客户端，你还需要发送一次请求给服务器拿到对应的数据，在客户端进行数
  • 基于跨架构算法的高效物联网漏洞挖掘系统 物联网漏洞挖掘技术 XLYcmy 漏洞挖掘物联网网络安全漏洞挖掘静态分析系统报告神经网络
    2.1.2物联网漏洞挖掘技术虽然通用平台的漏洞挖掘技术和工具不能完全适用于物联网设备，但大部分程序分析技术、安全测试思路和方案仍可用于物联网设备。因此，物联网设备漏洞挖掘技术仍然以通用程序分析和安全测试技术作为基础，结合物联网设备特点，开展了相关漏洞挖掘技术的研究。同时，通用漏洞挖掘技术仍然在蓬勃发展，给物联网设备漏洞挖掘技术不断注入新当前的物联网设备的漏洞挖掘技术在静态分析、动态模糊测试、同源性
  • 如何用ruby来写hadoop的mapreduce并生成jar包 wudixiaotie mapreduce
    ruby来写hadoop的mapreduce，我用的方法是rubydoop。怎么配置环境呢： 1.安装rvm：     不说了 网上有 2.安装ruby：     由于我以前是做ruby的，所以习惯性的先安装了ruby，起码调试起来比jruby快多了。 3.安装jruby：     rvm install jruby然后等待安
  • java编程思想 -- 访问控制权限 百合不是茶 java访问控制权限单例模式
    访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问   一:包访问权限;   自定义包: package com.wj.control; //包 public class Demo { //定义一个无参的方法 public void DemoPackage(){ System.out.println("调用
  • [生物与医学]请审慎食用小龙虾 comsci 生物
         现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡.....      所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质     
  • org.apache.jasper.JasperException: Unable to compile class for JSP: 商人shang maven2.2jdk1.8
    环境： jdk1.8    maven  tomcat7-maven-plugin  2.0 原因： tomcat7-maven-plugin  2.0 不知吃 jdk 1.8，换成 tomcat7-maven-plugin  2.2就行，即     <plugin>
  • 你的垃圾你处理掉了吗?GC oloz GC
    前序:本人菜鸟，此文研究学习来自网络，各位牛牛多指教　 1.垃圾收集算法的核心思想 　　Java语言建立了垃圾收集机制，用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险：因内存垃圾过多而引发的内存耗尽，以及不恰当的内存释放所造成的内存非法引用。 　　垃圾收集算法的核心思想是：对虚拟机可用内存空间，即堆空间中的对象进行识别
  • shiro 和 SESSSION 杨白白 shiro
    shiro 在web项目里默认使用的是web容器提供的session，也就是说shiro使用的session是web容器产生的，并不是自己产生的，在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起，这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID，当关闭浏览器，此
  • 移动互联网终端 淘宝客如何实现盈利 小桔子 移動客戶端淘客淘寶App
           2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元，同比增长100%。而来自移动端的分成达1亿元，其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。 可以看出，虽然目前阶段PC端对于淘客而言仍旧是盈利的大头，但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机，平板)的加速普及而更加迅猛
  • wordpress小工具制作 aichenglong wordpress小工具
    wordpress 使用侧边栏的小工具，很方便调整页面结构 小工具的制作过程 1 在自己的主题文件中新建一个文件夹(如widget)，在文件夹中创建一个php(AWP_posts-category.php) 小工具是一个类,想侧边栏一样，还得使用代码注册，他才可以再后台使用，基本的代码一层不变 <?php class AWP_Post_Category extends WP_Wi
  • JS微信分享 AILIKES js
    // 所有功能必须包含在 WeixinApi.ready 中进行    WeixinApi.ready(function(Api) {        // 微信分享的数据            var wxData = {       &nb
  • 封装探讨 百合不是茶 JAVA面向对象 封装
    //封装   属性 方法 将某些东西包装在一起，通过创建对象或使用静态的方法来调用，称为封装；封装其实就是有选择性地公开或隐藏某些信息，它解决了数据的安全性问题，增加代码的可读性和可维护性   在 Aname类中申明三个属性，将其封装在一个类中：通过对象来调用   例如   1： //属性 将其设为私有 姓名 name 可以公开
  • jquery radio/checkbox change事件不能触发的问题 bijian1013 JavaScriptjquery
    我想让radio来控制当前我选择的是机动车还是特种车，如下所示：  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><
  • AngularJS中安全性措施 bijian1013 JavaScriptAngularJS安全性XSRFJSON漏洞
            在使用web应用中，安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制，用来防护来自两个常见攻击方向的网络攻击。 一.JSON漏洞         当使用一个GET请求获取JSON数组信息的时候（尤其是当这一信息非常敏感，
  • [Maven学习笔记九]Maven发布web项目 bit1129 maven
    基于Maven的web项目的标准项目结构 user-project     user-core     user-service     user-web        src      
  • 【Hive七】Hive用户自定义聚合函数(UDAF) bit1129 hive
    用户自定义聚合函数，用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。 问题：UDF也可以提供输入多个参数然后输出一个结果的运算，比如加法运算add(3，5)，add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么？   Double evaluate(Double a, Double b)  
  • 通过 nginx-lua 给 Nginx 增加 OAuth 支持 ronin47
    前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGeek 在过去几年中取得了发展，我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块，比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中，我们使用了几个不同的接口来认证： &n
  • 利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法 bsr1983 session
    在利用tomcat-redis-session-manager做session同步时，遇到了在session保存一个自定义对象时，修改该对象中的某个属性，session未进行序列化，属性没有被存储到redis中。 在 tomcat-redis-session-manager的github上有如下说明： Session Change Tracking As noted in the &qu
  • 《代码大全》表驱动法-Table Driven Approach-1 bylijinnan java算法
    关于Table Driven Approach的一篇非常好的文章： http://www.codeproject.com/Articles/42732/Table-driven-Approach package com.ljn.base; import java.util.Random; public class TableDriven { public
  • Sybase封锁原理 chicony Sybase
           昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定，不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据，因此立马着手解决该表的解锁问题。     无奈此前没有接触过Sybase IQ12.7这套数据库产品，加之当时已属于下班时间无法求助于支持人员支持，因此只有借助搜索引擎强大的
  • java异常处理机制 CrazyMizzz java
    java异常关键字有以下几个，分别为 try catch final throw throws 他们的定义分别为 try：    Opening exception-handling statement. catch：  Captures the exception. finally： Runs its code before terminating
  • hive 数据插入DML语法汇总 daizj hiveDML数据插入
    Hive的数据插入DML语法汇总1、Loading files into tables语法：1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释：1)、上面命令执行环境为hive客户端环境下： hive>l
  • 工厂设计模式 dcj3sjt126com 设计模式
      使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。 工厂模式 工厂模式（Factory）允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。 Example #1 调用工厂方法（带参数） <?phpclass Example{ 
  • mysql字符串查找函数 dcj3sjt126com mysql
      FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中，则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串，而第二个是type SET列，则   FIND_IN_SET() 函数被优化，使用比特计算。如果str不在strlist 或st
  • jvm内存管理 easterfly jvm
    一、JVM堆内存的划分 分为年轻代和年老代。年轻代又分为三部分：一个eden,两个survivor。 工作过程是这样的：e区空间满了后，执行minor gc，存活下来的对象放入s0, 对s0仍会进行minor gc，存活下来的的对象放入s1中，对s1同样执行minor gc，依旧存活的对象就放入年老代中； 年老代满了之后会执行major gc，这个是stop the word模式，执行
  • CentOS-6.3安装配置JDK-8 gengzg centos
    JAVA_HOME=/usr/java/jdk1.8.0_45 JRE_HOME=/usr/java/jdk1.8.0_45/jre PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib export JAVA_HOME
  • 【转】关于web路径的获取方法 huangyc1210 Web路径
    假定你的web application 名称为news,你在浏览器中输入请求路径：  http://localhost:8080/news/main/list.jsp  则执行下面向行代码后打印出如下结果：  1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项
  • php里获取第一个中文首字母并排序 远去的渡口 数据结构PHP
    很久没来更新博客了，还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。 最近在做储值结算，需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的： Array ( [0] => Array ( [sid] => 2885842 [recetcstoredpay] =&g
  • java内部类 hm4123660 java内部类匿名内部类成员内部类方法内部类
         　在Java中，可以将一个类定义在另一个类里面或者一个方法里面，这样的类称为内部类。内部类仍然是一个独立的类，在编译之后内部类会被编译成独立的.class文件，但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类，外部类继承一个类，实现多继承。      &nb
  • Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten zhb8015
    maven pom.xml关于hibernate的配置和异常信息如下，查了好多资料，问题还是没有解决。只知道是包冲突，就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。   maven pom:   <dependency> <groupId>org.hibernate</groupId> <ar
  • Spark 性能相关参数配置详解－任务调度篇 Stark_Summer sparkcachecpu任务调度yarn
    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。   由于篇幅较长，所以在这里分篇组织，如果要看最新完整的网页版内容，可以戳这里：http://spark-config.readthedocs.org/，主要是便
  • css3滤镜 wangkeheng htmlcss
    经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。 html代码： <a href='' class='icon'><img src='utv.jpg' /></a> css代码： .icon{-webkit-filter: graysc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他