Filter过滤器实现同一地址手机和电脑页面不同

最近做一个网站,客户要求在访问主域名的时候实现电脑访问时展示电脑页面,手机访问时展示h5的手机页面,这种需求的使用还是比较多的;尤其网站需要百度推广的时候,百度推广就要求同一域名下,手机访问时展示手机页面,电脑访问时展示电脑。

在这里将需求的思路和实现代码展示一下。

首先分析思路,手机和电脑访问的时候会有不同的标记,主要是请求时HTTP协议中的请求头的User-Agent字段,咱们先看一段真是的HTTP协议的请求内容。

使用浏览器的开发者工具就可以请求信息。不同类型的浏览器可以通过UA(User-Agent)去区分,所以我们在服务器端就可以去获取UA,然后我们判断UA来区分是手机浏览器还是电脑浏览器。我在这里整理了大部分常用的手机浏览器的UA:

 1 String[] mobileAgents = { “iphone”, “android”, “phone”, “mobile”,
 2 “wap”, “netfront”, “java”, “opera mobi”, “opera mini”, “ucweb”,
 3 “windows ce”, “symbian”, “series”, “webos”, “sony”,
 4 “blackberry”, “dopod”, “nokia”, “samsung”, “palmsource”, “xda”,
 5 “pieplus”, “meizu”, “midp”, “cldc”, “motorola”, “foma”,
 6 “docomo”, “up.browser”, “up.link”, “blazer”, “helio”, “hosin”,
 7 “huawei”, “novarra”, “coolpad”, “webos”, “techfaith”,
 8 “palmsource”, “alcatel”, “amoi”, “ktouch”, “nexian”,
 9 “ericsson”, “philips”, “sagem”, “wellcom”, “bunjalloo”, “maui”,
10 “smartphone”, “iemobile”, “spice”, “bird”, “zte-“, “longcos”,
11 “pantech”, “gionee”, “portalmmm”, “jig browser”, “hiptop”,
12 “benq”, “haier”, “^lct”, “320×320”, “240×320”, “176×220”,
13 “w3c “, “acs-“, “alav”, “alca”, “amoi”, “audi”, “avan”, “benq”,
14 “bird”, “blac”, “blaz”, “brew”, “cell”, “cldc”, “cmd-“, “dang”,
15 “doco”, “eric”, “hipt”, “inno”, “ipaq”, “java”, “jigs”, “kddi”,
16 “keji”, “leno”, “lg-c”, “lg-d”, “lg-g”, “lge-“, “maui”, “maxo”,
17 “midp”, “mits”, “mmef”, “mobi”, “mot-“, “moto”, “mwbp”, “nec-“,
18 “newt”, “noki”, “oper”, “palm”, “pana”, “pant”, “phil”, “play”,
19 “port”, “prox”, “qwap”, “sage”, “sams”, “sany”, “sch-“, “sec-“,
20 “send”, “seri”, “sgh-“, “shar”, “sie-“, “siem”, “smal”, “smar”,
21 “sony”, “sph-“, “symb”, “t-mo”, “teli”, “tim-“, “tosh”, “tsm-“,
22 “upg1”, “upsi”, “vk-v”, “voda”, “wap-“, “wapa”, “wapi”, “wapp”,
23 “wapr”, “webc”, “winw”, “winw”, “xda”, “xda-“,
24 “Googlebot-Mobile” };

将UA存放到字符串数组中。

然后封装成了一个判断是否是手机UA的方法:

 1 /**
 2  * 判断是否是手机访问
 3  *
 4  * @param request
 5  * @return
 6  */
 7 public boolean isMoblie(HttpServletRequest request) {
 8     boolean isMoblie = false;
 9     String[] mobileAgents = { "iphone", "android", "phone", "mobile",
10             "wap", "netfront", "java", "opera mobi", "opera mini", "ucweb",
11             "windows ce", "symbian", "series", "webos", "sony",
12             "blackberry", "dopod", "nokia", "samsung", "palmsource", "xda",
13             "pieplus", "meizu", "midp", "cldc", "motorola", "foma",
14             "docomo", "up.browser", "up.link", "blazer", "helio", "hosin",
15             "huawei", "novarra", "coolpad", "webos", "techfaith",
16             "palmsource", "alcatel", "amoi", "ktouch", "nexian",
17             "ericsson", "philips", "sagem", "wellcom", "bunjalloo", "maui",
18             "smartphone", "iemobile", "spice", "bird", "zte-", "longcos",
19             "pantech", "gionee", "portalmmm", "jig browser", "hiptop",
20             "benq", "haier", "^lct", "320x320", "240x320", "176x220",
21             "w3c ", "acs-", "alav", "alca", "amoi", "audi", "avan", "benq",
22             "bird", "blac", "blaz", "brew", "cell", "cldc", "cmd-", "dang",
23             "doco", "eric", "hipt", "inno", "ipaq", "java", "jigs", "kddi",
24             "keji", "leno", "lg-c", "lg-d", "lg-g", "lge-", "maui", "maxo",
25             "midp", "mits", "mmef", "mobi", "mot-", "moto", "mwbp", "nec-",
26             "newt", "noki", "oper", "palm", "pana", "pant", "phil", "play",
27             "port", "prox", "qwap", "sage", "sams", "sany", "sch-", "sec-",
28             "send", "seri", "sgh-", "shar", "sie-", "siem", "smal", "smar",
29             "sony", "sph-", "symb", "t-mo", "teli", "tim-", "tosh", "tsm-",
30             "upg1", "upsi", "vk-v", "voda", "wap-", "wapa", "wapi", "wapp",
31             "wapr", "webc", "winw", "winw", "xda", "xda-",
32             "Googlebot-Mobile" };
33     if (request.getHeader("User-Agent") != null) {
34         for (String mobileAgent : mobileAgents) {
35             if (request.getHeader("User-Agent").toLowerCase()
36                     .indexOf(mobileAgent) >= 0) {
37                 isMoblie = true;
38                 break;
39             }
40         }
41     }
42     return isMoblie;
43 }

这个时候我们要考虑的就是如何拦截客户端的请求了,之前想过用Servlet的url匹配去拦截,但是会造成拦截所有请求包括转发,后来想到用Filter拦截器可以产生拦截和放行的效果,果断采用Filter(咱们先不谈框架里的拦截器)。

Filter代码如下:

 1 public class WapFilter implements Filter {
 2     @Override
 3     public void doFilter(ServletRequest request, ServletResponse response,
 4             FilterChain chain) throws IOException, ServletException {
 5         response.setContentType("text/html;charset=utf-8");
 6         HttpServletRequest httpRequest = (HttpServletRequest) request;
 7         String uri = httpRequest.getRequestURI();
 8         if (isMoblie(httpRequest)) {
 9             httpRequest.getRequestDispatcher("/wap" + uri).forward(request,
10                     response);
11         } else {
12             chain.doFilter(request, response);// 电脑放行
13         }
14     }
15         //省略其他代码……
16 }

web.xml配置文件代码:

1 <filter>
2 <filter-name>wapfilter</filter-name>
3 <filter-class>cn.dtblog.filter.WapFilter</filter-class>
4 </filter><filter-mapping>
5 <filter-name>wapfilter</filter-name>
6 <url-pattern>/*</url-pattern>
7 </filter-mapping>

我们拦截所有的请求(懒汉做法(●ˇ∀ˇ●)),在Filter的代码中我们可以看到,判断为手机的UA后实现转发,并且是转发到wap文件夹下拼接请求的jsp的名字;下面给出一个拼接路径的对照表:

电脑地址 拼接wap后的手机网址
/index.jsp /wap/index.jsp
/about.jsp /wap/about.jsp

所以我们还需要在wap目录下创建文件名一样(h5页面)的jsp文件(也可以考虑放到WEB-INF下隐藏访问),这样我们手机在访问时,就会被转发到指定的jsp文件,从而实现地址不变,内容改变的效果。

这是我在做网站的一个小小的思路,希望也能帮助到有需要的朋友,如果你有更好的思路或建议,也欢迎评论中提出。

原文由博主 乐智 编辑撰写,版权归博主所有。

原文地址 http://www.dtblog.cn/1105.html 转载请注明出处!

时间: 2024-10-21 22:27:17

Filter过滤器实现同一地址手机和电脑页面不同的相关文章

用sublime server 启动本地服务器(手机访问电脑页面)

安装sublime server 插件包 1.Ctrl + shift + p install package sublimeServer 2.git cd to your Sublime packages folder, don't know where is it? Open Sublime and choose Preferences -> Browser Packages, yeah, here is it! $ git clone git://github.com/learning/S

如何用手机访问电脑上的html文件

如何用手机访问电脑上的html文件 梦唪 | 浏览 3876 次 推荐于2016-03-26 08:08:58 最佳答案 1,你得搭建服务器,用Apache或者IIS.2,把HTML文件放到服务器里面,打开浏览器能访问到服务器(localhost)里的HTML.3,用CMD输入命令ipconfig查看本机的IP地址4,用IP地址代替localhost/.访问服务器.例如:192.168.1.123/xxx.html5,以上例子在本地局域网有效.如果要在互联网访问请把HTML文件放到网上的服务器再

javaweb之Filter过滤器详解

快速入门 1.新建一个类,实现Filter接口 2.实现doFilter()方法,打印一句话,来证明能够进行拦截 3.在web.xml中进行配置(参照Servlet配置) 4.访问一个页面,看看能不能拦截 例子: import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.serv

手机访问电脑wampServer本地环境页面

1.  电脑需要安装好wamp,我这里用的2.0版本,下载地址   http://pan.baidu.com/s/1jG31hbS 2. 电脑需要有个wifi,我用的360wifi 3. 启动wamp后,在电脑本地可以通过127.0.0.1访问到本地的项目 4. 用手机连接360wifi后,访问内网ip,也就是电脑的ip地址.这时可能会出现403,解决办法如下: 我用的wamp2.0此方法可行 找到Apache下的 httpd.conf 然后查找Directory这个词开头的 1.将Allow

HBase - Filter - 过滤器的介绍以及使用 | 那伊抹微笑

博文作者:那伊抹微笑 csdn 博客地址:http://blog.csdn.net/u012185296 itdog8 地址链接 : http://www.itdog8.com/thread-214-1-1.html 博文标题:HBase - Filter - 过滤器的介绍以及使用 | 那伊抹微笑 个性签名:世界上最遥远的距离不是天涯.也不是海角.而是我站在妳的面前.妳却感觉不到我的存在 技术方向:Flume+Kafka+Storm+Redis/Hbase+Hadoop+Hive+Mahout+

如何让手机与电脑无线传输文件

相信许多人都有这样的烦恼,用电脑访问手机文件时,又是找USB 线,又是安装驱动的麻烦死啦!要是找不到USB线,就无可奈何了....但是真的是这样吗? 其实,还是有办法滴.下面我来说说,当然仅供参考. 首先,下载一个ES文件浏览器.(这个手机APP真的是做到了“浏览器”的程度,功能齐全,大家可以慢慢探索) 之后,让手机和电脑连接在同一个路由器上(处于同一个局域网). 接下来,打开ES,点击左上角图标,找到网络-->远程管理器-->打开.你会看到提示:“在计算机中输入:ftp://192.***.

WIFI环境下Android手机和电脑通信

前面已经写过一篇java实现最基础的socket网络通信,这篇和之前那篇大同小异,只是将客户端代码移植到手机中,然后获取本机IP的方法略有不同. 先讲一下本篇中用到Android studio的使用吧 使用Android studio开发Android最基本的3个步骤: (1)新建工程 (2)在XML布局文件中定义应用程序的用户界面. 点击画圈中的Design和Text可以切换界面 (3)在java代码中编写业务实现. 这里面用来写java代码 另外这篇文章还需要添加用户权限 好了,可以上代码了

手机控制电脑定时关机,重启WiFi

需求 晚上上床,电脑开着WiFi让手机上网.要么上床之前就给电脑设置定时关机:要么就电脑开通宵:要么就待会下来关电脑.这3种情况都非常不好,要么麻烦,要么浪费. 最无奈的是电脑刚开好WiFi,上床后才发现,手机虽然连上了WiFi,但是不能上网.于是蛋疼的从床上爬下来重启WiFi. 昨晚突发奇想如果能够在床上用手机控制电脑定时关机该多好.刚好今天凌晨咳嗽到睡不着,干脆起来实现它. 想法 因为电脑和手机在以上2种情况都是连通的,所以手机可以轻松访问电脑,那么就要把电脑部署成服务器. 然后让手机以网页

触控鼠标 (使用手机控制电脑,支持IOS,android.OSx 和windows)进入初步推广阶段

这款应用主要是用于使用手机控制电脑,几乎涉猎全平台(android 和 ios,windows 和os x),其实在1个月之前已经上线了,一直也比较忙,也就没有对这个应用进行一个系统的介绍和推广,今天就先写篇博文对这款应用进行一下系统的介绍和推广.从开始有一个开发自己的app 到有了这个开发思路,再到最后的app store 上线大概用了2个半月吧.因为是个人开发所以大部分都是用晚上和周末的时间做的,所以开发周期也就比较长点了. 从网站,到电脑服务端再到android 和iphone 手机端,完