[10/22 周主题] – 强悍的JQuery Validate 插件

对于JQuery Validate,只有相见恨晚的感触,恐怕在表单验证领域这是目前我见过最好的插件了,可以很方便的使用,极大的提高表单验证的效率。

下面就介绍下简单的使用方法:

1、下载地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/,本文章发布时最新版是1.7。

2、在页面里面加载JQuery和JQuery Validate

<script type="text/javascript" src="theme/default/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="theme/default/js/jquery.validate.min.js"></script>

3、写一个表单提交页面,form id 为 login,两个提交域email和password。域提供相应的id。为了完善demo,我在里面也提供了一个注册的form,同时提供了自定义验证方法和ajax提交。

继续阅读[10/22 周主题] – 强悍的JQuery Validate 插件

[10/21 周主题] – 安装和配置Nginx

马上Nginx将会应用到公司的第一个实战项目上,为了方便开发和运维人员安装和配置Nginx,整理了下面的内容。

我们的服务器全部采用CentOS,因此下面的配置也是基于CentOS来配置的。

安装流程:

cd /opt/

yum install gcc openssl-devel pcre-devel zlib-devel

wget http://nginx.org/download/nginx-0.8.38.tar.gz

wget http://github.com/gnosek/nginx-upstream-fair/tarball/master

tar –zxvf nginx-0.8.38.tar.gz

tar –zxvf gnosek-nginx-upstream-fair-2131c73.tar.gz

cd nginx-0.8.38

./configure
--with-http_stub_status_module
--add-module=/opt/gnosek-nginx-upstream-fair-2131c73

make & make install

正常一步步走下面是不会出问题的,前提确保你的服务器网络可用。

Nginx启动脚本:

继续阅读[10/21 周主题] – 安装和配置Nginx

[10/20 周主题] – GlassFish单机和多机集群的配置

GlassFish可以配置单机集群和多机集群(即普通意义上的真集群)。

单机集群和多机集群配置上大同小异,只是代理服务器不同而已,单机集群代理服务器和代理节点在一个机子上,而多机集群就是将代理服务器和代理节点分布在不同的机器上。

下面就一步步来配置GlassFish集群,我是在Linux上部署的,因此下面的部署方式是Linux下的部署方式,Windows下的差不多:

1、下载 GlassFish, 我选择的是 GlassFish Server Open Source Edition 2.1.1中的 glassfish-installer-v2.1.1-linux-ml.jar 多语言版;

Linux Platform

继续阅读[10/20 周主题] – GlassFish单机和多机集群的配置

[10/17 周主题] – Axure入项目

很早就关注和试用Axure了,但是没在之前的项目中使用过,因为一些原因,借这次的这个web项目开始在公司推广Axure的使用,不过说到推广,现在也就我一人的用,其他项目要用还未知呢!

先看看Axure的Demo吧:http://www.axure.org/demo/

做过前端的人应该会更有感觉,操作上不会感觉太难,很快就可以上手,这要得益于Axure强大的组件库,基本上常用的组件都有,另外还有其他一些特殊的第三方组件提供下载。

这次项目中用Axure主要原因是界面框架的原因,如果UI和前端(我做)做完页面,把网页给客户看,那估计要费时不少,加上随时的改动,到后面会越做越忙,越做改动越大,所以就早动手,先用Axure把网站的各个页面框架和页码流程搭起来,跟客户一一确认,尽快完成这块的内容,再由UI去跟客户确认配色的问题,前端这个时候就可以开工了,跟之前的项目流程比,至少框架不会大动了!

第一次拿做好的页面框架给客户看,客户以为这么快页面就出来啦,很有兴趣,当然我就得必须解释解释了,这个只是框架图,和最终的效果图是有些距离的,这些页面只是将页面框架和流程展示下。

学习Axure,最主要就是多用,多看别人的Axure例子,如果一个效果自己一下子无法实现,可以在网上找别人的rp文件,仔细研究下,很快就可以自己做出来了!

再者Axure现在有好些模板,不一定就得自己去实现,Axure只是个工具,不管从哪个方面入手,达到你要的效果即可。

推荐区国内Axure推广比较有名的网站:http://www.axure.org/ 上面有很多教程和例子,可以进一步帮助学习Axure的使用。

[10/16 周主题] – Apache,Nginx,Tomcat集群 续

这篇文章是继续上次的 Apache,Nginx,Tomcat集群的一个补充,主要是Apache和Tomcat的一些补充。

1、Apache 反向代理只做 HTTP 透明转发,因此,Tomcat 那边,如果使用 Servlet API 获取 request url, server info等等,都是 Tomcat 的。在Tomcat 上的 JSP 或者 HTML 文件里面,都应该是相对路径,不应该使用绝对路径,更不能使用带 Tomcat 地址的 URL。

2、Apache KeepAlive和KeepAliveTimeout的使用,首先KeepAlive的on还是off,需要根据应用来决定,一般的使用是静态资源较多时启用,动态资源较多时关闭,对于高负荷服务器来说,KeepAliveTimeout值较大会导致一些性能方面的问题:超时值越大,与空闲客户端保持连接的进程就越多。

3、Tomcat中的maxThread的建议赋值范围在500-750,如果超过750,那么建议使用2个tomcat组成集群,每个设置为500,这样的使用效果比单个设置为1000要好的多!

[10/14周主题] – IE6 hacks

做前端的同学都会遇到浏览器兼容问题,今天顺手整理一下遇到的和没遇到的从网上搜来的部分IE6下常见兼容问题,以备后用。

IE6虽然要被淘汰了,但是从统计来看,国内使用IE6的用户还是居多,下图是一个小型网站的IE浏览器访问统计:

无法否认的事实将继续折腾前端工程师在网页设计时,不得不继续考虑IE6的用户体验。

IE6下常见问题汇总:

1、IE6下层不能在下拉框之上的问题

2、IE6的双倍边距BUG

3、IE6下两个层中间有间隙

4、IE6使用滤镜使PNG图片透明后,容器内链接失效的问题

5、IE6下为什么图片下方有空隙产生
继续阅读[10/14周主题] – IE6 hacks

[10/13周主题] – Apache,Nginx,Tomcat集群

本周主题:Apache Nginx Tomcat集群

最近这段时间一个项目处于最后的调试,上线阶段,服务器和程序的优化方面成为最近的重点,以确保项目上线后可以达到预定的目标。

最终上线的配置是Apache+Tomcat集群,Nginx仅仅参与了一下测试,算是体验下,以后估计会在前端上多多使用。

Apache前端使用的是反向代理配置方式,Session Sticky,Tomcat配置sessionDB。

Apache基本上采用默认配置,由于使用prefork模式,因此调整了prefork下的一些参数配置。

Tomcat调整了连接数,Apache和Tomcat在同台机子上,调整了Linux系统的ulimit。

Nginx做前端时,没有配置session同步,压力测试的表现方面,没发现Apache和Nginx有太大差异,不过有一次Apache前端被压挂了,无法关闭httpd。

另外这次将GlashFish和Tomcat做了一个简单的对比,发现GlashFish+自身连接池测试效果要好于Tomcat+DBCP连接池,表现方面一个是内存使用上,另一个是数据库连接数和响应上。

[10/12周主题] – MySQL性能分析命令:Explain 详解

对explain的各个属性一知半解,今天详细的了解一下。 Explain命令在解决数据库性能上是第一推荐使用命令,大部分的性能问题可以通过此命令来简单的解决,Explain可以用来查看SQL语句的执行效果,可以帮助选择更好的索引和优化查询语句,写出更好的优化语句。

本周主题 — MySQL Explain 详解

Explain语法:explain select … from … [where …]

例如:explain select * from news;

输出:

+----+-------------+-------+-------+-------------------+---------+---------+-------+------+-------+
| id | select_type | table | type | possible_keys | key | key_len | ref | rows | Extra |
+----+-------------+-------+-------+-------------------+---------+---------+-------+------+-------+

下面对各个属性进行了解:

1、id:这是SELECT的查询序列号

2、select_type:select_type就是select的类型,可以有以下几种:

SIMPLE:简单SELECT(不使用UNION或子查询等)

PRIMARY:最外面的SELECT

UNION:UNION中的第二个或后面的SELECT语句

DEPENDENT UNION:UNION中的第二个或后面的SELECT语句,取决于外面的查询

UNION RESULT:UNION的结果。

SUBQUERY:子查询中的第一个SELECT

DEPENDENT SUBQUERY:子查询中的第一个SELECT,取决于外面的查询

DERIVED:导出表的SELECT(FROM子句的子查询)

继续阅读[10/12周主题] – MySQL性能分析命令:Explain 详解

[10/11周主题] – 微博

最近比较懒,写东西的欲望很低,但是没办法,周主题是自己给自己下的套,不能不钻!这几天把没补上的周主题给补上,以后周主题尽量按时完成。

本周主题–微博

最近应该说是微博产品大爆发了,自从Twitter推出来之后,微博产品在国内就开始火起来,最初最火的饭否因为某某事件到现在没了音信,做啥,嘀咕等目前看似也活得不太好,新浪围脖倒是成为目前微博在国内的代名词了,人气很旺,加上这几天网易微博发布了,搜狐微博也公测完毕了,腾讯微博还在内测,凤凰网微博也还在内测,人民网微博自从上次敏感词事件后关注的少了,其他还有很多…,总之以后微博将会遍地开花,使用的方式也各种各样,手机,Email,即时通讯工具等都可以方便的发布。

OK,说了这么多微博了,我们开始进入主题 – 微博,从几个微博的特点来入手,认识一下微博和它们的不同。

Twitter

作为微博的鼻祖,也是世界上目前使用人数最多的微博之一,Twitter更注重信息的传播,我喊了一嗓子,其他关注我的人可以看到,对于我喊的内容能够得到多少反馈,Twitter并不关注,ReTweet,俗称转发,Twitter原始转发只是把你想转发的内容转发一份出去,所有follow你的人都会看到,原作者并不知道。网友发明的RT,其实就是利用@。

新浪微博

在国内新浪微博做的应该说还算很不错,拓展了对微博的认识,比较典型的是转发和评论,也是实用最多的两个功能,有人说这两个功能有些重叠,个人看并不是这样的,转发一条微博,微博原作者会知道,follow你的粉丝也会看到,但是评论就只有微博原作者会知道,这是微博交互的两个不同途径,让用户有更多的选择。

搜狐微博

微博一般都是限制字数的,140貌似是默认的,网易整出来一个163个字数限制那是因为网易163,可搜狐微博不限制内容长度了,这是个进步还是走偏了方向,定位不准,这里不好说,短小而精悍有好处,但是有时候短小并不能表达想要表达的,估计这是搜狐微博不限制内容长度的一个初衷。

搜狐微博另一个特点是让微博和新闻连接起来,这有点像新闻评论,但是这比新闻评论更具传播性和互动性,你对一个新闻的评论可能会在你的粉丝里面引起更多的评论。

搜狐微博还有一个小功能就是加入了最近访客,进一步增强了互动。

继续阅读[10/11周主题] – 微博

[10/10周主题] – 正则表达式

和程序打交道的朋友,工作中很难避免不使用正则表达式,因为它可以很大程度上简化复杂和繁琐的字符串处理工作,关于正则表达式,wikimedia上是这样解释的:一个正则表达式通常被称为一个模式 (pattern),为用来描述或者匹配一系列符合某个句法规则的字符串。详细介绍参见这里:正则表达式

本周主题:正则表达式

首先介绍一个不错的正则表达式入门教程:《正则表达式30分钟入门教程》,即使你之前没接触过,也可以很容易入门应用。当然实际看下来肯定不止30分钟了,这篇文章作者几经修正浓缩了一些精华,让想接触的朋友更好的入门和使用,特别推荐。

另外推荐使用的是正则表达式验证工具:REGex TESTER  http://www.regextester.com/ , 随时可以将写好的正则表达式进行在线实时验证。

正则表达式说起来有不少使用方法,但是平常使用的正则表达式还是稍微比较简单,大部分都属于验证框架 或者 服务器上面的一些rewrite规则使用。

下面就整理和收集了一些常用的正则表达式,以备不时之需。

Validate 框架相关

1、匹配Email地址的正则表达式:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

2、匹配网址URL的正则表达式:[a-zA-z]+://[^\s]*

3、匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$

4、匹配国内电话号码(这个表达式可以匹配几种格式的电话号码,像(010)88886666,或022-22334455,或02912345678等): \(?0\d{2}[) -]?\d{8}

5、匹配IP地址:((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)

6、匹配身份证:\d{15}|\d{18}

7、用户名可使用中文、英文字母(区分大小写)、数字或部分特殊字符(. _ – @),长度为4~20个字符:/^[\u4e00-\u9fa5A-Za-z0-9\_\-\.@]$/ig

继续阅读[10/10周主题] – 正则表达式