SpringMVC整合jsp与velocity 配置多个视图解析器

目录 网络

本来的项目是纯SpringMVC的,没办法,只会java。后来觉得是不是可以用其它东西来替换jsp,然后发现velocity的东西。

velocity是一种模板语言,与它类似的还有freemark。veocity的优点的快,缺点的功能不算特别强大;freemark的功能超级强大,但速度慢一些。我偏向使用简洁快速的velocity,另外velocity的layout功能也是我决定用它来替换jsp的一个原因。

整合多视图

原来还用着的jsp不可能马上就干掉,所以需要在SpringMVC里配置多个视图解析器(ViewResolver)

好在SpringMVC本身就支持多个视图的配置,原来的配置如下:

<!--jsp视图解析器--> <bean id="jspViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver"> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/> <property name="prefix" value="/WEB-INF/jsp/"/> <property name="suffix" value=".jsp"/> </bean>

现在要增加一个velocity视图解析器,增加一个VelocityLayoutViewResolver的,同时要注意order参数的配置。SpringMVC不知道每个解析器的调用顺序,需要我们自己在配置时就配置好:

<!--jsp视图解析器--> <bean id="jspViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver"> <property name="order" value="1"/> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/> <property name="prefix" value="/WEB-INF/jsp/"/> <property name="suffix" value=".jsp"/> </bean> <!-- velocity视图解析器 --> <bean id="velocityViewResolver" class="org.springframework.web.servlet.view.velocity.VelocityLayoutViewResolver"> <property name="order" value="0"/> <property name="contentType" value="text/html;charset=UTF-8"/> <property name="cache" value="true"/> <property name="prefix" value="/"/> <property name="layoutUrl" value="layout/default.vm"/> <property name="exposeSpringMacroHelpers" value="true" /> <property name="dateToolAttribute" value="dateTool"/> <property name="numberToolAttribute" value="numberTool"/> </bean>

因为要兼容原来的jsp视图,所以我将jsp配置成了优先级最高。对于velocity还要增加一些配置,以下是velocity必须要有的配置

<!-- velocity环境配置 --> <bean id="velocityConfig" class="org.springframework.web.servlet.view.velocity.VelocityConfigurer"> <!-- velocity配置文件路径 --> <property name="configLocation" value="/WEB-INF/velocity.properties"/> <!-- velocity模板路径 --> <property name="resourceLoaderPath" value="/WEB-INF/vm/"/> </bean>

以及velocity.properties的配置

#设置字符集 input.encoding=UTF-8 output.encoding=UTF-8

velocity的layout用法

如果只是简单的把jsp文件改成用vm文件来写就没有什么意思了,layout是一个比较有意思的用法,它可以将大量公共的页面框架写成一个独立的文件,让最终的视图文件去引用。即可以大量简化代码,又可以让程序员专注与当前的页面逻辑。

模板文件如下:

## file=template.vm <html> <head> <title>$!page_title</title> </head> <body> $screen_content </body> </html>

业务文件代码如下:

#set( $layout = "template.vm" ) #set( $page_title = "this is the test page") #define($screen_content) this is buisin content #end

看多简单!

深入理解JavaScript的变量作用域

目录 网络
  • 1、JavaScript的作用域链
  • 2、函数体内部,局部变量的优先级比同名的全局变量高。
  • 3、JavaScript没有块级作用域。
  • 4、函数中声明的变量在整个函数中都有定义。
  • 5、未使用var关键字定义的变量都是全局变量。
  • 6、全局变量都是window对象的属性

在学习JavaScript的变量作用域之前,我们应当明确几点:

  • JavaScript的变量作用域是基于其特有的作用域链的。
  • JavaScript没有块级作用域。
  • 函数中声明的变量在整个函数中都有定义。

1、JavaScript的作用域链

首先看下下面这段代码:

<script type="text/javascript">
    var rain = 1;
    function rainman(){
        var man = 2;
        function inner(){
            var innerVar = 4;
            alert(rain);
        }
        inner();    //调用inner函数
    }
    rainman();    //调用rainman函数
</script>

观察alert(rain);这句代码。JavaScript首先在inner函数中查找是否定义了变量rain,如果定义了则使用inner函数 中的rain变量;如果inner函数中没有定义rain变量,JavaScript则会继续在rainman函数中查找是否定义了rain变量,在这段 代码中rainman函数体内没有定义rain变量,则JavaScript引擎会继续向上(全局对象)查找是否定义了rain;在全局对象中我们定义了 rain = 1,因此最终结果会弹出’1’。

作用域链:JavaScript需要查询一个变量x时,首先会查找作用域链的第一个对象,如果以第一个对象没有定义x变量,JavaScript会继续查找有没有定义x变量,如果第二个对象没有定义则会继续查找,以此类推。

上面的代码涉及到了三个作用域链对象,依次是:inner、rainman、window。

2、函数体内部,局部变量的优先级比同名的全局变量高。

<script type="text/javascript">
    var rain = 1;    //定义全局变量 rain
    function check(){
        var rain = 100;    //定义局部变量rain
        alert( rain );       //这里会弹出 100
    }
    check();
    alert( rain );    //这里会弹出1
</script>

3、JavaScript没有块级作用域。

这一点也是JavaScript相比其它语言较灵活的部分。

仔细观察下面的代码,你会发现变量i、j、k作用域是相同的,他们在整个rain函数体内都是全局的。

<script type="text/javascript">
    function rainman(){
        // rainman函数体内存在三个局部变量 i j k
        var i = 0;
        if ( 1 ) {
            var j = 0;
            for(var k = 0; k < 3; k++) {
                alert( k );    //分别弹出 0 1 2
            }
            alert( k );        //弹出3
        }
        alert( j );            //弹出0
    }
</script>

4、函数中声明的变量在整个函数中都有定义。

首先观察这段代码:

<script type="text/javascript">
    function rain(){
        var x = 1;
        function man(){
            x = 100;
        }
        man();        //调用man
        alert( x );    //这里会弹出 100
    }
    rain();    //调用rain
</script>

上面得代码说明了,变量x在整个rain函数体内都可以使用,并可以重新赋值。由于这条规则,会产生“匪夷所思”的结果,观察下面的代码。

<script type="text/javascript">
    var x = 1;
    function rain(){
        alert( x );        //弹出 'undefined',而不是1
        var x = 'rain-man';
        alert( x );        //弹出 'rain-man'
    }
    rain();
</script>

是由于在函数rain内局部变量x在整个函数体内都有定义( var x= ‘rain-man’,进行了声明),所以在整个rain函数体内隐藏了同名的全局变量x。这里之所以会弹出’undefined’是因为,第一个执行 alert(x)时,局部变量x仍未被初始化。

所以上面的rain函数等同于下面的函数:

function rain(){
    var x;
    alert( x );
    x = 'rain-man';
    alert( x );
}

5、未使用var关键字定义的变量都是全局变量。

<script type="text/javascript">
    function rain(){
        x = 100;    //声明了全局变量x并进行赋值
    }
    rain();
    alert( x );    //会弹出100
</script>

这也是JavaScript新手常见的错误,无意之中留下的许多全局变量。

6、全局变量都是window对象的属性

<script type="text/javascript">
    var x = 100 ;
    alert( window.x );//弹出100
    alert(x);
</script>

等同于下面的代码

<script type="text/javascript">
    window.x = 100;
    alert( window.x );
    alert(x)
</script>

Mybatis获取插入记录的自增长ID

目录 网络
<insert id="insertUserInfo" parameterType="com.entity.User" 
useGeneratedKeys="true" keyProperty="userId">
</insert>

在Mybatis Mapper.xml文件中添加属性”useGeneratedKeys”和”keyProperty”
useGeneratedKeys是告诉MyBatis 使用JDBC 的getGeneratedKeys 方法来获取数据库自己生成的主键keyProperty是bean中的主键字段

这时就可以用 user.getId() 来获取值了。

js 将json字符串转换为json对象的方法解析

目录 网络

将json字符串转换为json对象的方法。在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键

例如:

JSON字符串:
var str1 = ‘{ “name”: “cxh”, “sex”: “man” }’;
JSON对象:
var str2 = { “name”: “cxh”, “sex”: “man” };

一、JSON字符串转换为JSON对象

要使用上面的str1,必须使用下面的方法先转化为JSON对象:

//由JSON字符串转换为JSON对象

var obj = eval(‘(‘ + str + ‘)’);

或者

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

或者

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

然后,就可以这样读取:

Alert(obj.name);

Alert(obj.sex);

特别注意:如果obj本来就是一个JSON对象,那么使用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是使用parseJSON()函数处理后会有问题(抛出语法异常)。

二、可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串。

例如:

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

或者

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

alert(last);

注意:

上面的几个方法中,除了eval()函数是js自带的之外,其他的几个方法都来自json.js包。新版本的 JSON 修改了 API,将 JSON.stringify() 和 JSON.parse() 两个方法都注入到了 Javascript 的内建对象里面,前者变成了 Object.toJSONString(),而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()方法,则说明您的json包版本太低。

Sketch 39 Mac 破解版

目录 软件收藏

Sketch 39 Mac破解版

之前,已经分享过一款功能强大的矢量绘图软件——Sketch,它可以帮助你轻松的制作各种需要的图形。这次带来的是最新39版本。

Sketch是一款拥有美观界面和强大功能的专业矢量图形绘制工具。它旨在为美术设计师创造出一款更优秀的作品,不是复制品,而是提升品。

 

Sketch 3 界面

Sketch简约的设计是基于无限的规模和层次的绘图空间,免费调色板,面板,菜单,窗口和控件。虽然使用简单,它提供了功能强大的矢量绘图和文字工具。如完美的布尔运算,符号,和强大的标尺,参考线和网格。

相比其他的矢量绘图软件,比如AI,Sketch的优点在于使用简单,学习曲线低,让我们能够用Sketch快速的绘制图形,可以说是轻量级的 AI,Sketch 3 提供了基本的形状,支持自动切图,PDF、EPS、SVG等格式文件的导入和导出,并且增加了移动设计模板,非常适合进行网站设计、移动应用设计、图标设计等。

简要说明下破解过程:

1.打开dmg镜像,得到主程序和破解补丁;

2.将“Sketch.app”拖入应用程序中(打开一次应用程序中的“Sketch.app”再退出);

3.双击“sketch_v3”进行破解,打开应用程序中的“Sketch.app”右上角无试用提示及破解成功;

4.Have done!

系统版本要求:OS X 10.9 或更高。

Sketch 39 Mac破解版下载   密码:xhgs

如何拯救你的H5?移动端常见问题集锦,小白免入

目录 网络
HTML5

本文又是一个长篇干货,内附较多代码,希望对各位的工作有帮助,感谢支持与理解

 

H5页面在移动端无法满屏自适应窗口,怎么办?

<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
H5页面在移动端字体应该怎么设置?1.iOS 系统默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

无微软雅黑字体

2.Android 系统

默认中文字体是Droidsansfallback

默认英文和数字字体是Droid Sans

无微软雅黑字体

3.Winphone 系统

默认中文字体是Dengxian(方正等线体)

默认英文和数字字体是Segoe

无微软雅黑字体

各个手机系统有自己的默认字体,且都不支持微软雅黑,如无特殊需求,手机端无需定义中文字体,使用系统默认英文字体和数字字体可使用 Helvetica ,三种系统都支持。

font-family:Helvetica;
点击链接就可以拨打电话,怎么办?

<a href="tel:13666655546">客服电话</a>
点击链接就可以发送短信,怎么办?

<a href="sms:13666655546">客服短信</a>
H5页面的数字不想识别为电话号码,怎么办?

<meta name="format-detection"content="telephone=no" />
H5页面想忽略Android平台中对邮箱地址的识别,怎么办?

<meta name="format-detection" content="email=no"/>
不想显示webkit的滚动条,怎么办?

element::-webkit-scrollbar{ display: none;}
H5页面的内容想不被人选中,怎么办?

-webkit-user-select: none;user-select: none;
H5页面想禁止长按链接或长按图片后弹出菜单,怎么办?

-webkit-touch-callout: none;
想取消IOSButtonInput上的默认样式,怎么办?

-webkit-appearance: none;
想在AndroidH5页面touch时没有蓝色的边框与遮罩,怎么办?

-webkit-tap-highlight-color:rgba(0,0,0,0);
多张图片放置在一起,不想有4PX的空隙,怎么办?


img{display:block};

img{float:left};

img{vertical-align:top}

想改变Input placeholder属性的样式,怎么办?

::-webkit-input-placeholder{color:#ccc}
H5页面input type=”num”时想去掉右边的上下箭头,怎么办?

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none !important; margin: 0;}
H5页面加载的图片太大了,怎么办?JPG图片用JPEGmini压缩,PNG可在线用http://tinypng.org/压缩
在iOS系统中键盘输入时不想首字母为大写,怎么办?

<input type="text" autocapitalize="off" />
在IOS系统中键盘输入关闭自动修正,怎么办?

<input type="text" autocorrect="off" />
屏幕旋转横屏竖屏切换时,想禁止文本缩放,怎么办?

-webkit-text-size-adjust: 100%;
H5页面想有快速回弹滚动的效果,怎么办?

overflow: auto; /* auto | scroll */

-webkit-overflow-scrolling: touch;

屏幕旋转横屏竖屏切换时想支持有不同的事件,怎么办?事件


window.orientation,取值:正负90表示横屏模式、0和180表现为竖屏模式;

window.onorientationchange = function(){

switch(window.orientation){

case -90:

case 90:

alert("横屏:" + window.orientation);

case 0:

case 180:

alert("竖屏:" + window.orientation);

break;

}

}

样式

//竖屏时使用的样式

@media all and (orientation:portrait) {

.css{}

}

//横屏时使用的样式


@media all and (orientation:landscape) {

.css{}

}

Android 上想不显示语音输入按钮,怎么办?

input::-webkit-input-speech-button {display: none}
想开发H5摇一摇功能,怎么办?HTML5 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。

JQuery 遍历新增加的元素的两种方法,解决刚创建的元素遍历不到的问题

目录 网络

刚创建的元素,使用jQuery的each方法来遍历,有时候会不起作用。
原因不用多说,经常使用javascript的人应该都会知道,解决方案大致有2种:

1、刚创建完元素的时候,就立刻使用each方法

$('#btn').on("click", function(){
 
    $('#div').append("<input type='text' />");
 
    $("input").each(function(){
 
        //TODO:
 
    });
 
});

2、使用setTimeout方法在页面加载完成一段时间后再使用each方法

setTimeout(function(){
 
    $("input").each(function(){
 
        //TODO:
 
    });
 
},1000);