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拖拽,页面设计器)

  • streamlit UI控件使用大全 水水不水啊 ui
    streamlitUI控件使用大全速查表控件名称控件简介信息显示set_option设置配置选项。set_page_config配置页面的默认设置。write向应用程序写入参数。info显示信息消息。success显示成功消息warning显示警告信息error出错信息显示exception显示异常。spinner在执行代码块时临时显示一条消息help显示给定对象的帮助和其他信息。title以标题
  • 算力网一体化构筑绿色数字基座 智能计算研究中心 其他
    内容概要作为数字经济发展的核心引擎，全国一体化算力网通过整合异构计算资源与边缘节点，构建起跨地域、多层级的技术架构。其核心目标在于实现算力的动态调度与集约化供给，满足从工业互联网到元宇宙等场景的差异化需求。通过“东数西算”工程优化资源配置，结合芯片架构创新与模型压缩技术，算力网络的响应效率提升35%以上（国家超算中心数据），同时单位算力能耗降低22%。关键维度技术特征典型应用场景算力调度动态负载均
  • 跨领域智能算法安全优化与治理研究 智能计算研究中心 其他
    内容概要当前智能算法正加速渗透至金融、医疗、自动驾驶等关键领域，但跨场景应用中的安全性与治理效能仍面临多重挑战。本研究以自动化机器学习为核心优化路径，结合量子算法的并行计算优势与边缘计算的低延迟特性，构建多模态算法协同框架。通过表1所示的技术映射关系，系统梳理不同场景下的核心需求与风险控制节点：应用领域关键技术组合安全优化指标金融风控联邦学习+特征选择算法公平性验证（F1值/召回率）自动驾驶数据增
  • elementplus实现左侧菜单栏收缩与展开 南七小僧 网站开发服务器开发AI技术产品经理vue.jsjavascript前端
    1.页面结构Home.vue下包含aside.vue和menu.vue2.TAside.vueel-menu左侧菜单栏显示注意：要使用收缩与展开，el-aside必须设置width=“collapse”，否则收缩展开会出现收缩后，el-aside宽度不变窄需要使用动态改变展开收缩值:collapse=“isCollapse”@open="handleOpen"展开后改变isCollapse的值（@
  • istio 介绍-01-一个用于连接、管理和保护微服务的开放平台 概览 老马啸西风 sofaistio微服务云原生
    istioistio一个用于连接、管理和保护微服务的开放平台。介绍Istio是一个开放平台，用于提供统一的方式来集成微服务、管理跨微服务的流量、执行策略和聚合遥测数据。Istio的控制平面在底层集群管理平台（例如Kubernetes）上提供了一个抽象层。Istio由以下组件组成：Envoy-每个微服务的Sidecar代理，用于处理集群中服务之间以及从服务到外部服务的入口/出口流量。这些代理形成了一
  • 2小时完成1天工作量？有了这款Axure移动端元件库，设计如此简单 招风的黑耳 设计素材Axureaxure移动端元件库
    高保真原型设计已成为验证创意、优化体验的关键环节。Axure作为专业原型设计工具，凭借其强大的交互能力广受青睐。下面推荐的这款Axure移动端高保真动态交互元件库，凭借500+精心设计的组件与模板，可以满足你产品原型设计的需要，各类模版页面为你提供设计参考。该元件库分为界面模板和基础组件两大模块：界面模板涵盖电商、社交、金融、教育等主流场景，提供首页、详情页、支付流程等完整页面原型，减少重复设计。
  • html页面引入ts文件,html中引入ts，使用webpack如何正确配置？ 马运良 html页面引入ts文件
    目的：html多文件中script引入ts文件，然后通过webpack服务运行起来。部分代码：index.htmlindex.tsconsole.log(document.getElementById('app'))webpack.config.jsconstHtmlWebpackPlugin=require("html-webpack-plugin");module.exports={entry
  • 深入理解 HTML5 Web Workers：提升网页性能的关键技术解析 A-Kamen 前端html5html
    深入理解HTML5WebWorkers：提升网页性能的关键技术解析引言1.什么是WebWorkers？WebWorkers的特点：2.WebWorkers的使用方式2.1创建一个WebWorker步骤1：创建Worker文件步骤2：在主线程中调用Worker3.WebWorkers的高级应用3.1使用`Blob`方式创建Worker3.2终止Worker4.WebWorkers的应用场景示例：计算
  • 使用CSS3实现炫酷的3D视差滚动效果 木木黄木木 css33d前端
    使用CSS3实现炫酷的3D视差滚动效果这里写目录标题使用CSS3实现炫酷的3D视差滚动效果项目概述核心技术实现1.3D空间的创建2.视差层级设置3.动画效果实现流星动画月亮发光效果技术难点与解决方案1.层级重叠问题2.性能优化3.响应式适配开发心得总结项目概述在这个项目中，我们使用纯CSS3技术实现了一个令人印象深刻的3D视差滚动效果。整个页面包含星空背景、流星、月亮、山脉和树木等多个图层，通过不
  • html5炫酷3D数字时钟项目开发实践 木木黄木木 html5前端html53d前端
    炫酷3D数字时钟项目开发实践这里写目录标题炫酷3D数字时钟项目开发实践项目概述技术栈核心技术实现1.3D翻转效果实现2.数字显示与翻转动画3.霓虹灯发光效果4.时间更新逻辑技术难点与解决方案1.3D翻转动画的流畅性2.数字更新的同步性3.发光效果的性能优化项目总结项目改进方向项目概述这是一个基于HTML5、CSS3和JavaScript实现的3D数字时钟项目。项目的主要特点是通过3D翻转动画来展示
  • 深入理解前端防抖（Debounce）与节流（Throttle）：原理、区别与实战示例 A-Kamen 前端状态模式
    深入理解前端防抖（Debounce）与节流（Throttle）：原理、区别与实战示例引言在前端开发中，我们经常需要处理高频事件（如输入框输入、滚动、窗口调整大小等）。如果不加限制，浏览器会频繁触发回调函数，导致性能问题，甚至页面卡顿。防抖（Debounce）和节流（Throttle）是两种优化方案，可以有效控制事件触发的频率，提高应用的性能和用户体验。本篇文章将详细解析防抖和节流的原理、适用场景及
  • 前端图片懒加载技术实现详解 A-Kamen 前端
    前端图片懒加载技术实现详解1.什么是图片懒加载？2.为什么需要图片懒加载？3.实现方案3.1HTML原生支持3.2使用IntersectionObserverAPI示例代码3.3第三方库方案使用lazysizes示例4.最佳实践与注意事项5.结论在当今网页中，图片通常占据了大量的资源，如果一次性加载所有图片，会严重影响页面加载速度和用户体验。为了解决这一问题，图片懒加载（LazyLoading）技
  • 计算机组网实例 rufeike 运维
    文章目录计算机组网实例两台电脑直接连接传输三台电脑+交换机连接传输多台电脑+交换机+路由器跨网段连接传输多台电脑+交换机+多个路由器组成多网段跨网连接传输计算机组网实例两台电脑直接连接传输场景:两台电脑通过网线直接连接（交叉线或直连线，现代网卡通常支持自动翻转）。配置（两台电脑需要配置成同一网段）电脑A：IP地址：192.168.1.1子网掩码：255.255.255.0网关：无需配置（因为是直连
  • 【QT入门】 Qt内存管理机制详解 不吃~香菜 QT入门qt开发语言内存管理对象树智能指针
    往期回顾：【QT入门】Qt槽函数五种常用写法介绍-CSDN博客【QT入门】Qt实现自定义信号-CSDN博客【QT入门】Qt自定义信号后跨线程发送信号-CSDN博客【QT入门】Qt内存管理机制详解Qt中的内存管理主要是通过对象树和智能指针来实现的，下面一一列举各类方法：一、对象树（ObjectTree）：1、什么是对象数：Qt中的对象可以形成一个层次结构，其中一个对象可以拥有子对象。当父对象被销毁时
  • X86平台使用Docker模拟ARM64环境 吃辣我第一 docker容器运维
    引言随着云计算和物联网技术的迅猛发展，跨平台开发变得越来越重要。ARM架构因其低功耗和高性能，广泛应用于移动设备和嵌入式系统。而X86架构在桌面和服务器领域依然占据主导地位。为了在不同的硬件架构上进行开发和测试，许多开发者希望能够在X86平台上模拟ARM64环境。本博客将详细介绍如何通过Docker在X86平台上实现ARM64环境的模拟，以便开发者能够顺利进行跨架构应用的开发与测试。背景ARM与X
  • minio数据迁移 Daydreamer . 服务器miniominio
    使用MinIOClient(mc)工具实现跨服务器的存储桶数据复制一、安装MinIOClient在源服务器或本地机器上安装mc：wgethttps://dl.min.io/client/mc/release/linux-amd64/mcchmod+xmcsudomvmc/usr/local/bin/二、配置MinIO服务器别名添加源服务器配置（假设源服务器地址为http://source-mini
  • Qt 5.15.1 Android开发环境搭建 Qt开发老杰 qtandroid开发语言c++
    开发环境：Qt版本：Qt5.15.1环境：Windows101.Android构建工具环境安装JDK：首先自行安装jdk1.8并配置JAVA_HOME环境变量AndroidSDK：在"工具->选项->设备->Android"页面"SDKManager"中安装AndroidSDKNDK：同上，安装NDK注意：在5.15.1中默认SDK和NDK版本为{"common":{"sdk_tools_url"
  • 微信小程序学习 潘越越 微信小程序学习小程序
    记录本人在学习过程中觉得需要重复复习的点目录一、页面之间的信息传递1）父传子2）子传父3）任意两个页面之间1.全局数据共享（GlobalData）2.页面间数据传递3.使用Storage（持久化存储）各种任意两个页面信息传递方式的对比：二、data属性值之间如何互相使用错误写法：正确解法：一、在onLoad或onShow中动态赋值二、使用observers监听sharedValue变化（动态更新）
  • flutter 拖拽布局_Flutter 布局控件完结篇 weixin_39638708 flutter拖拽布局
    本文对Flutter的29种布局控件进行了总结分类，讲解一些布局上的优化策略，以及面对具体的布局时，如何去选择控件。1.系列文章1.1乱侃前前后后也算是拖拖拉拉的写了一些Flutter的文章，写的也都比较粗略。最近工作调动，内部换了部门，一顿瞎忙活，也打乱了原本的分享计划。从我最开始接触Flutter到现在，差不多四个多月了。在这段时间里面，Flutter也发布了ReleasePreview版本。
  • 有哪些使用 DHTMLX 小部件创建 JavaScript 数据透视网格的关键点？ CodeCraft Studio UI控件javascript数据分析ui
    Capterra最新的技术趋势调查将数据管理列为金融企业在采用新软件解决方案时面临的主要挑战之一。现成的工具可能不够灵活，无法满足特定要求。因此，组织考虑投资定制解决方案（如数据透视表）来满足其数据管理和分析需求是合理的。DHTMLX专注于JavaScript和HTML5UI小部件和库，以帮助开发人员更快地构建功能丰富的、交互式的Web界面。遵循现代网络开发的标准和做法，DHTMLX提供针对桌面和
  • Illustrator（AI）CS6 - 2025 软件安装包+安装教程 初心领域 win软件illustrator软件需求平面设计
    软件名称：Illustrator界面语言：简体中文运行系统：Win7及以上版本运行环境：64位硬件要求：CPU@2.0GHz内存@4G(或更高）软件简介：AdobeIllustrator，简称Ai，是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件。该软件主要应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等，也可以为线稿提供较高的精度和控制，适合生产任何小型设计到
  • 低代码平台中的原子组件 冬冬小圆帽 低代码
    一、原子组件的本质定义原子组件是低代码平台中最基础的、不可再分的UI元素单元，具有以下核心特性：不可分割性：无法进一步拆解为更小的功能组件独立性：具备完整的自包含功能逻辑可复用性：可在不同场景中重复使用而不产生副作用标准化接口：遵循统一的属性/事件规范二、原子组件的层级架构[原子组件]→[分子组件]→[有机体组件]→[模板]→[页面]典型原子组件分类：基础输入类：文本框、单选按钮、复选框动作触发类
  • Python网络爬虫技术 君君学姐 python爬虫开发语言
    Python网络爬虫技术详解引言网络爬虫（WebCrawler），又称网络蜘蛛（WebSpider）或网络机器人（WebRobot），是一种按照一定规则自动抓取互联网信息的程序或脚本。它们通过遍历网页链接，从指定的起始页面开始，逐步抓取页面内容，并存储或分析这些数据。Python，作为一种强大且易于学习的编程语言，凭借其丰富的库和工具，成为了网络爬虫开发的首选语言之一。本文将深入探讨Python网
  • 如何在华为云服务器查看IP地址，及修改服务器登录密码！！！ 懒羊羊大王& Linux（系统+网络）c++(初阶)C语言华为云服务器运维
    1.在华为云服务器查看IP地址(1).第一步：先找到控制台(2).第二步：点击华为云Flexus云服务(3)第三步：找到公网IP，就找到华为云服务器IP地址啦。注意：在操作以上步骤的前提是要已注册华为云账号及购买云服务器。2.修改服务器登录密码接着上述页面，点击右下方三个点找到重置密码即可。还有重装系统，切换镜像等其他功能。小结：使用xshell和华为云服务器比使用wmware方便的多，而且wmw
  • 【C++】继承 XYN5114 C++c++开发语言学习笔记
    目录一、继承的基本语法二、继承方式三、对象模型四、构造和析构的顺序五、同名成员处理六、同名静态成员处理七、多继承语法八、菱形继承问题以及解决方法补充知识：继承是面向对象的三大特性之一一、继承的基本语法class子类（派生类）:继承方式父类（基类）派生类包括：①从基类继承过来（共性）②自己增加的成员（特性）//公共页面类classBasePage{public:voidheader(){cout<<
  • Web大学生网页作业成品——联想商品商城网页设计与实现(HTML+CSS)（1个页面） 2501_90365653 htmlcss学生网页前端htmlcss
    常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目,可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计,web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。文章目录一、
  • 《Web部署应知应会》NO 1:内网穿透一文讲透 十大主流工具深度解析与部署指南 带娃的IT创业者 Web部署应知应会前端
    《Web部署应知应会》NO1:内网穿透一文讲透十大主流工具深度解析与部署指南本文深入解析内网穿透技术的原理与应用，涵盖中间服务器中转（如FRP、ngrok）与P2P直连（如ZeroTier）两大核心模式，结合动态DNS（花生壳）、SSH隧道等10种主流工具的部署方法与场景适配。通过技术对比与安全合规建议，为开发者、企业及个人用户提供从临时调试到企业级服务穿透的全场景解决方案，助力实现跨网络资源的安
  • wangEditor组件在医疗、OA系统中word粘贴图片上传的解决方案 2501_90699800 wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdf
    要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国
  • Spring MVC配置详解：从历史到实战 wertuiop_ springmvcjava
    文章目录一、JavaWeb的发展历程1.ModelI与ModelII开发模式（1）ModelI开发模式（2）ModelII开发模式2.MVC设计模式SpringMVC本质MVC工作流程二、SpringMVC快速入门实战1.环境搭建步骤（1）创建MavenWeb工程（2）配置web.xml（3）SpringMVC配置文件（springmvc.xml）（4）编写Controller（5）创建视图页面三
  • canvas绘制红绿灯路口（二） 风舞红枫 canvascanvas
    系列文章canvas绘制红绿灯路口（一）无图不欢，先上图优化项：一：加入人行道红绿信号二：加入专用车道标识（无方向标识时采用专用车道标识）三：东南西北四项路口优化绘制逻辑，美化图像四：加入拖拽、缩放图例使用方法（以vue3为例）import{ref,onMounted,onUnmounted}from'vue';importLanefrom'services/roadCanvas/lane';co
  • HttpClient 4.3与4.3版本以下版本比较 spjich javahttpclient
    网上利用java发送http请求的代码很多，一搜一大把，有的利用的是java.net.*下的HttpURLConnection，有的用httpclient，而且发送的代码也分门别类。今天我们主要来说的是利用httpclient发送请求。 httpclient又可分为 httpclient3.x httpclient4.x到httpclient4.3以下 httpclient4.3
  • Essential Studio Enterprise Edition 2015 v1新功能体验 Axiba .net
    概述：Essential Studio已全线升级至2015 v1版本了！新版本为JavaScript和ASP.NET MVC添加了新的文件资源管理器控件，还有其他一些控件功能升级，精彩不容错过，让我们一起来看看吧！ syncfusion公司是世界领先的Windows开发组件提供商，该公司正式对外发布Essential Studio Enterprise Edition 2015 v1版本。新版本
  • [宇宙与天文]微波背景辐射值与地球温度 comsci 背景
            宇宙这个庞大,无边无际的空间是否存在某种确定的,变化的温度呢?      如果宇宙微波背景辐射值是表示宇宙空间温度的参数之一,那么测量这些数值,并观测周围的恒星能量输出值,我们是否获得地球的长期气候变化的情况呢?   &nbs
  • lvs-server 男人50 server
    #!/bin/bash # # LVS script for VS/DR # #./etc/rc.d/init.d/functions # VIP=10.10.6.252 RIP1=10.10.6.101 RIP2=10.10.6.13 PORT=80 case $1 in start)   /sbin/ifconfig eth2:0 $VIP broadca
  • java的WebCollector爬虫框架 oloz 爬虫
    WebCollector主页： https://github.com/CrawlScript/WebCollector 下载：webcollector-版本号-bin.zip将解压后文件夹中的所有jar包添加到工程既可。 接下来看demo package org.spider.myspider; import cn.edu.hfut.dmic.webcollector.cra
  • jQuery append 与 after 的区别 小猪猪08
    1、after函数 定义和用法： after() 方法在被选元素后插入指定的内容。 语法： $(selector).after(content) 实例： <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></scr
  • mysql知识充电 香水浓 mysql
    索引 索引是在存储引擎中实现的，因此每种存储引擎的索引都不一定完全相同，并且每种存储引擎也不一定支持所有索引类型。 根据存储引擎定义每个表的最大索引数和最大索引长度。所有存储引擎支持每个表至少16个索引，总索引长度至少为256字节。 大多数存储引擎有更高的限制。MYSQL中索引的存储类型有两种：BTREE和HASH，具体和表的存储引擎相关； MYISAM和InnoDB存储引擎
  • 我的架构经验系列文章索引 agevs 架构
    下面是一些个人架构上的总结，本来想只在公司内部进行共享的，因此内容写的口语化一点，也没什么图示，所有内容没有查任何资料是脑子里面的东西吐出来的因此可能会不准确不全，希望抛砖引玉，大家互相讨论。 要注意，我这些文章是一个总体的架构经验不针对具体的语言和平台，因此也不一定是适用所有的语言和平台的。 （内容是前几天写的，现附上索引）   前端架构 http://www.
  • Android so lib库远程http下载和动态注册 aijuans andorid
    一、背景      在开发Android应用程序的实现，有时候需要引入第三方so lib库，但第三方so库比较大，例如开源第三方播放组件ffmpeg库, 如果直接打包的apk包里面, 整个应用程序会大很多.经过查阅资料和实验，发现通过远程下载so文件，然后再动态注册so文件时可行的。主要需要解决下载so文件存放位置以及文件读写权限问题。   二、主要
  • linux中svn配置出错 conf/svnserve.conf:12: Option expected 解决方法 baalwolf option
    在客户端访问subversion版本库时出现这个错误： svnserve.conf:12: Option expected 为什么会出现这个错误呢，就是因为subversion读取配置文件svnserve.conf时，无法识别有前置空格的配置文件，如### This file controls the configuration of the svnserve daemon, if you##
  • MongoDB的连接池和连接管理 BigCat2013 mongodb
    在关系型数据库中，我们总是需要关闭使用的数据库连接，不然大量的创建连接会导致资源的浪费甚至于数据库宕机。这篇文章主要想解释一下mongoDB的连接池以及连接管理机制，如果正对此有疑惑的朋友可以看一下。 通常我们习惯于new 一个connection并且通常在finally语句中调用connection的close()方法将其关闭。正巧，mongoDB中当我们new一个Mongo的时候，会发现它也
  • AngularJS使用Socket.IO bijian1013 JavaScriptAngularJSSocket.IO
            目前，web应用普遍被要求是实时web应用，即服务端的数据更新之后，应用能立即更新。以前使用的技术（例如polling）存在一些局限性，而且有时我们需要在客户端打开一个socket，然后进行通信。         Socket.IO(http://socket.io/)是一个非常优秀的库，它可以帮你实
  • [Maven学习笔记四]Maven依赖特性 bit1129 maven
    三个模块 为了说明问题，以用户登陆小web应用为例。通常一个web应用分为三个模块，模型和数据持久化层user-core, 业务逻辑层user-service以及web展现层user-web， user-service依赖于user-core user-web依赖于user-core和user-service   依赖作用范围  Maven的dependency定义
  • 【Akka一】Akka入门 bit1129 akka
    什么是Akka Message-Driven Runtime is the Foundation to Reactive Applications In Akka, your business logic is driven through message-based communication patterns that are independent of physical locatio
  • zabbix_api之perl语言写法 ronin47 zabbix_api之perl
    zabbix_api网上比较多的写法是python或curl。上次我用java－－http://bossr.iteye.com/blog/2195679，这次用perl。for example: #!/usr/bin/perl use 5.010 ; use strict ; use warnings ; use JSON :: RPC :: Client ; use
  • 比优衣库跟牛掰的视频流出了，兄弟连Linux运维工程师课堂实录，更加刺激，更加实在！ brotherlamp linux运维工程师linux运维工程师教程linux运维工程师视频linux运维工程师资料linux运维工程师自学
    比优衣库跟牛掰的视频流出了，兄弟连Linux运维工程师课堂实录，更加刺激，更加实在！   ----------------------------------------------------- 兄弟连Linux运维工程师课堂实录-计算机基础-1-课程体系介绍1 链接：http://pan.baidu.com/s/1i3GQtGL 密码：bl65   兄弟连Lin
  • bitmap求哈密顿距离-给定N（1<=N<=100000）个五维的点A(x1,x2,x3,x4,x5)，求两个点X(x1,x2,x3,x4,x5)和Y( bylijinnan java
    import java.util.Random; /** * 题目： * 给定N（1<=N<=100000）个五维的点A(x1,x2,x3,x4,x5)，求两个点X(x1,x2,x3,x4,x5)和Y(y1,y2,y3,y4,y5)， * 使得他们的哈密顿距离（d=|x1-y1| + |x2-y2| + |x3-y3| + |x4-y4| + |x5-y5|）最大
  • map的三种遍历方法 chicony map
    package com.test; import java.util.Collection; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Set; public class TestMap { public static v
  • Linux安装mysql的一些坑 chenchao051 linux
    1、mysql不建议在root用户下运行   2、出现服务启动不了，111错误，注意要用chown来赋予权限， 我在root用户下装的mysql，我就把usr/share/mysql/mysql.server复制到/etc/init.d/mysqld, (同时把my-huge.cnf复制/etc/my.cnf)  chown -R cc /etc/init.d/mysql
  • Sublime Text 3 配置 daizj 配置Sublime Text
    Sublime Text 3 配置解释(默认){// 设置主题文件“color_scheme”: “Packages/Color Scheme – Default/Monokai.tmTheme”,// 设置字体和大小“font_face”: “Consolas”,“font_size”: 12,// 字体选项：no_bold不显示粗体字，no_italic不显示斜体字，no_antialias和
  • MySQL server has gone away 问题的解决方法 dcj3sjt126com SQL Server
    MySQL server has gone away 问题解决方法，需要的朋友可以参考下。 应用程序（比如PHP）长时间的执行批量的MYSQL语句。执行一个SQL，但SQL语句过大或者语句中含有BLOB或者longblob字段。比如，图片数据的处理。都容易引起MySQL server has gone away。 今天遇到类似的情景，MySQL只是冷冷的说：MySQL server h
  • javascript/dom:固定居中效果 dcj3sjt126com 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&
  • 使用 Spring 2.5 注释驱动的 IoC 功能 e200702084 springbean配置管理IOCOffice
    使用 Spring 2.5 注释驱动的 IoC 功能 developerWorks 文档选项 将打印机的版面设置成横向打印模式 打印本页 将此页作为电子邮件发送 将此页作为电子邮件发送 级别： 初级 陈 雄华 (quickselect@163.com), 技术总监, 宝宝淘网络科技有限公司 2008 年 2 月 28 日  &nb
  • MongoDB常用操作命令 geeksun mongodb
    1.   基本操作 db.AddUser(username,password)               添加用户 db.auth(usrename,password)      设置数据库连接验证 db.cloneDataBase(fromhost)    
  • php写守护进程（Daemon） hongtoushizi PHP
    转载自： http://blog.csdn.net/tengzhaorong/article/details/9764655   守护进程（Daemon）是运行在后台的一种特殊进程。它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件。守护进程是一种很有用的进程。php也可以实现守护进程的功能。   1、基本概念   &nbs
  • spring整合mybatis,关于注入Dao对象出错问题 jonsvien DAOspringbeanmybatisprototype
    今天在公司测试功能时发现一问题： 先进行代码说明： 1，controller配置了Scope="prototype"（表明每一次请求都是原子型）    @resource/@autowired service对象都可以（两种注解都可以）。 2，service 配置了Scope="prototype"（表明每一次请求都是原子型）
  • 对象关系行为模式之标识映射 home198979 PHP架构企业应用对象关系标识映射
    HELLO!架构   一、概念 identity Map:通过在映射中保存每个已经加载的对象，确保每个对象只加载一次，当要访问对象的时候，通过映射来查找它们。其实在数据源架构模式之数据映射器代码中有提及到标识映射，Mapper类的getFromMap方法就是实现标识映射的实现。     二、为什么要使用标识映射？ 在数据源架构模式之数据映射器中 //c
  • Linux下hosts文件详解 pda158 linux
    　1、主机名： 　　无论在局域网还是INTERNET上，每台主机都有一个IP地址，是为了区分此台主机和彼台主机，也就是说IP地址就是主机的门牌号。 　　公网：IP地址不方便记忆，所以又有了域名。域名只是在公网（INtERNET)中存在，每个域名都对应一个IP地址，但一个IP地址可有对应多个域名。 　　局域网：每台机器都有一个主机名，用于主机与主机之间的便于区分，就可以为每台机器设置主机
  • nginx配置文件粗解 spjich javanginx
    #运行用户#user  nobody;#启动进程,通常设置成和cpu的数量相等worker_processes  2;#全局错误日志及PID文件#error_log  logs/error.log;#error_log  logs/error.log  notice;#error_log  logs/error.log  inf
  • 数学函数 w54653520 java
    public  class  S {        // 传入两个整数，进行比较，返回两个数中的最大值的方法。      public  int  get( int  num1, int  nu
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他