标签存档: W3C标准 - 第2页

struts2的核心和工作原理

作者: 日期: 2017年6月14日 没有评论

　　在学习struts2之前，首先我们要明白使用struts2的目的是什么？它能给我们带来什么样的好处？

　　设计目标

　　Struts设计的第一目标就是使MVC模式应用于web程序设计。在这儿MVC模式的好处就不在提了。

　　技术优势

　　Struts2有两方面的技术优势，一是所有的Struts2应用程序都是基于client/server HTTP交换协议，The Java Servlet API揭示了Java Servlet只是Java API的一个很小子集，这样我们可以在业务逻辑部分使用功能强大的Java语言进行程序设计。

　　二是提供了对MVC的一个清晰的实现，这一实现包含了很多参与对所以请求进行处理的关键组件，如：拦截器、OGNL表达式语言、堆栈。


　　因为struts2有这样目标，并且有这样的优势，所以，这是我们学习struts2的理由，下面，我们在深入剖析一下struts的工作原理。

　　工作原理

　　Suruts2的工作原理可以用下面这张图来描述，下面我们分步骤介绍一下每一步的核心内容

　　一个请求在Struts2框架中的处理大概分为以下几个步骤 

　　1、客户端初始化一个指向Servlet容器（例如Tomcat）的请求

　　2、这个请求经过一系列的过滤器（Filter）（这些过滤器中有一个叫做ActionContextCleanUp的可选过滤器，这个过滤器对于Struts2和其他框架的集成很有帮助，例如：SiteMesh Plugin） 

　　3、接着FilterDispatcher被调用，FilterDispatcher询问ActionMapper来决定这个请是否需要调用某个Action 

　　FilterDispatcher是控制器的核心，就是mvc中c控制层的核心。下面粗略的分析下我理解的FilterDispatcher工作流程和原理：FilterDispatcher进行初始化并启用核心doFilter

　　4、如果ActionMapper决定需要调用某个Action，FilterDispatcher把请求的处理交给ActionProxy 

　　5、ActionProxy通过ConfigurationManager询问框架的配置文件，找到需要调用的Action类 ,这里，我们一般是从struts.xml配置中读取。

　　6、ActionProxy创建一个ActionInvocation的实例。

　　7、ActionInvocation实例使用命名模式来调用，在调用Action的过程前后，涉及到相关拦截器（Intercepter）的调用。

　　8、一旦Action执行完毕，ActionInvocation负责根据struts.xml中的配置找到对应的返回结果。返回结果通常是（但不总是，也可能是另外的一个Action链）一个需要被表示的JSP或者　　FreeMarker的模版。在表示的过程中可以使用Struts2 框架中继承的标签。在这个过程中需要涉及到ActionMapper


　　在上述过程中所有的对象（Action，Results，Interceptors，等）都是通过ObjectFactory来创建的。

 

　　Struts2和struts1的比较

　　struts2相对于struts1来说简单了很多，并且功能强大了很多，我们可以从几个方面来看：

　　从体系结构来看：struts2大量使用拦截器来出来请求，从而允许与业务逻辑控制器 与 servlet-api分离，避免了侵入性；而struts1.x在action中明显的侵入了servlet-api.

　　从线程安全分析：struts2.x是线程安全的，每一个对象产生一个实例，避免了线程安全问题；而struts1.x在action中属于单线程。

　　性能方面：struts2.x测试可以脱离web容器，而struts1.x依赖servlet-api，测试需要依赖web容器。

　　请求参数封装对比：struts2.x使用ModelDriven模式，这样我们 直接 封装model对象，无需要继承任何struts2的基类，避免了侵入性。

　　标签的优势：标签库几乎可以完全替代JSTL的标签库，并且 struts2.x支持强大的ognl表达式。

　　当然，struts2和struts1相比，在 文件上传，数据校验 等方面也 方便了好多。在这就不详谈了。

用input-radio选择性切换不同品牌的地图

作者: 日期: 2017年6月7日 没有评论

        先看index.html文件的代码：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <script src="js/jquery1.8.3.min.js" type="text/javascript"></script>
    <!-- <script src="js/ol.js" type="text/javascript"></script> -->
    <script src="js/ol-debug.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>Map Test</h2>
    <div id="map">
        <nav id="layers">
            <ul>
                <li><input type="radio" name="layer" value="mapquest"/>MapQuest OSM</li>
                <li><input type="radio" name="layer" value="bingmaps"/>Bing Maps</li>
                <li><input type="radio" name="layer" value="esri"/>ESRI Maps</li>
                <li><input type="radio" name="layer" value="stamen"/>Stamen</li>
            </ul>
        </nav>
</div>
  </body>
</html>

        在ul标签中加入mapquest bingmaps esri stamen.与index.html相应的CSS代码：

.map {
    position:absolute;
    height: 600px;
    width: 100%;
    border: 1px red solid; 
  }
#layers {
	position:absolute;
	z-index:2;
	background-color:rgba(0,60,136,0.7);
	color:#fff;
	padding:8x 12px;
	font-size:12px;
	right:25px;
	top:5px;
        border-radius:8px;	 
  }
#layers > ul{
	list-style:none;
}
#layers > ul > li{
	padding: 2px 15px 1px 2px;
	margin-left:-25px;
}

        给#layers中的li标签加载'change'事件：

	$("#layers input[type=radio]").live('change',function(){
		var layer = $(this).val();
		map.getLayers().getArray().forEach(function(e){
			var name = e.get('name');
			e.setVisible(name == layer);
		});		
	})

        如果从OSM切换到bingmaps，则需要申请一个调用bingmaps的key，bingmaps key的申请地址：://www.bingmapsportal.com，同样切换到baidumaps或googlemaps等等都需要相应的key。 

	var mapquest = new ol.layer.Tile({
		source: new ol.source.OSM(),
		visible:true,
		name:'mapquest'	
	});	
	var bingmaps = new ol.layer.Tile({
		source: new ol.source.BingMaps({
			key:'AmqG5Tq1jbzjo1jTHyUyYqtAwfVf1OotyTiZaCU-AmDskeVi56TTKJ010u9g4j7O',
			imagerySet:'AerialWithLabels'
		}),
		visible:false,
		name:'bingmaps'	
	});

        看效果地址(由于另外两幅地图没有申请key，所以暂时不可见)：地图切换

用OpenLayers实例化一幅地图

作者: 日期: 2017年6月7日 没有评论

        openlayers是一个非常大而复杂，强大和灵活的JS框架。
        在OpenLayers一个主要的概念就是Map，Map可以包含一些图层，这些图层可以是矢量的也可以使栅格的。
        每个图层的数据源可以是图片，也可以是kml文件等。当然Map也包含一些控件，主要是交互所用的，比如 平移 缩放，要素的选择等等。
        现在我们开始学习OpenLayers的使用。
        1.创建一个简单的电子地图应用。
        你要创建一个电子地图应用，首先要创建一个地图。本教程将引导你创建一个简单的电子地图应用。
        当然一些必要的基础知识是需要的，比如 HTML，CSS ，Javascript 等是要学习的，OpenLayers是主要是通过HTML和Javascript编写的，所以我们得有一个编辑器。
        这里我们使用EditPlus ，当然你可以选择更好的一些编辑器，他们会高亮显示语法和自动提示功能。
        2.我们首先下载openlayers的源码，下载地址：://github.com/openlayers/openlayers/releases/download/v4.1.1/v4.1.1-dist.zip，解压里面的内容。
        3.下面创建一个 空的index.html文件。

        写入如下代码：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/ol.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
<script src="js/jquery1.8.3.min.js" type="text/javascript"></script>
    <!-- <script src="js/ol.js" type="text/javascript"></script> -->
<script src="js/ol-debug.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>Map Test</h2>
    <div id="map"></div>
  </body>
</html>

        4.在index.html目录下创建一个css和js文件夹，分别放入ol.css、ol.js和ol-debug.js和jquery.js,在css目录中另外创建main.css以及在js文件下创建main.js。用文本编辑器分别打开main.css和main.js，在main.css写入：

.map {
	position:absolute;
    height: 600px;
    width: 100%;
	border: 1px red solid; 
  }

        以及在main.js中写入:

$(function(){	 
	var view = new ol.View({
		center: ol.proj.fromLonLat([114.42, 30.52]),
		zoom: 9,
		maxZoom:18,
		minzoom:2
	});	
	
	var mapquest = new ol.layer.Tile({
		source: new ol.source.OSM(),
		visible:true,
		name:'mapquest'	
	});		
	var map = new ol.Map({
			target: 'map',
			controls:ol.control.defaults().extend([
				new ol.control.ScaleLine(),
				new ol.control.ZoomSlider()
			]),
			layers: [mapquest],
			view: view
		  });		  	  		  
})

        5.用浏览器打开index.html，就可以看到刚才创建的地图了。

将随机选取的utf8转成汉字雨

作者: 日期: 2017年6月2日 没有评论

不废话，上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>将随机选取的utf8转成汉字雨</title>
	</head>
	<body>
		<canvas id="c"></canvas>
		<script>
			var c=document.getElementById("c");
			var	ctx=c.getContext("2d");
				c.width=window.innerWidth;
				c.height=window.innerHeight;
			//ctx.fillRect(0,0,100,100);
			//a,b,c,d分别代表x方向偏移,y方向偏移,宽，高				
			//4e00~9fa5 or 19968~40869 随机长度 
			var char_code = '',start = 19968,end = 40869;
			var L = Math.random()*(end - start);
			for(var j = start;j <= (start+L);j++){				
				char_code += parseInt(j).toString(16)+" ";
			}
			//将随机选取的unicode字符串转化为汉字
			var string1 = toChinese(char_code);							
				string1.split("");
			var fontsize=16;
				columns=c.width/fontsize;
			var drop = [];
			for(var x=0;x<columns;x++)
			{
				drop[x]=0;
			}
		function drap(){
			ctx.fillStyle="rgba(0,0,0,0.07)";
			ctx.fillRect(0,0,c.width,c.height);
			ctx.fillStyle="#0F0";
			ctx.font=fontsize+"px arial";
			for(var i=0;i<drop.length;i++){
				var text1=string1[Math.floor(Math.random()*string1.length)];
				ctx.fillText(text1,i*fontsize,drop[i]*fontsize);
				drop[i]++;
				//0.5%的几率掉落
				if(drop[i]*fontsize>c.height&&Math.random()>0.95){
					drop[i]=0;
				}
			}
		}						
		function toChinese(data)
		{
			if(data == '') return '请输入十六进制unicode';
			data = data.split(' ');
			var str ='';
			for(var i=0;i<data.length;i++)
			{
				str+=String.fromCharCode(parseInt(data[i],16).toString(10));
			}
			return str;
		}
				
		setInterval(drap,20);				
		</script>
	</body>
</html>

点击看效果 : 随机的汉字雨

JS放大缩略图并随鼠标移动

作者: 日期: 2017年5月22日 没有评论

CSS:

<style type="text/css">
/* tooltip */
#tooltip{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:2px;
	display:none;
	color:#fff;
}
.img_s{border:none;}
audio{width:250px;margin-top:7px;}
</style>

HTML:

<table class="result-tab" width="100%">
    <tr>
        <th>ID</th>                            
        <th>缩略图</th>                            
        <th>路径</th>                            
    </tr>
    <tr>
        <td>24</td>
        <td>
            <img class="img_s" src="upload/2017/05/22/76411495433869.jpg" height='40' width='250' title="盛开的菊科植物"/>										
        </td>
        <td>
            upload/2017/05/22/76411495433869.jpg
        </td>																							
    </tr>
</table>    

JS:

$(function(){
	var x = 10;
	var y = 20;
	$("img.img_s").mouseover(function(e){
		this.myTitle = this.title;
		this.title = "";
		var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
		var tooltip = "<div id='tooltip'><img src='"
						+ this.src 
						+"' alt='预览图' height='500' width='800'/>"
						+imgTitle+"<\/div>"; //创建 div 元素
		$("body").append(tooltip);	//把它追加到文档中
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			}).show(500);	  //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
		this.title = this.myTitle;
		$("#tooltip").remove();	 //移除
    }).mousemove(function(e){
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			});
	});
})

效果图:://wp.cpxiang.tech/wp-content/uploads/2017/05/@XYCJINXCVH39QJD7_Hjpg-1.jpg