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

Posted 2020-08-05 享智同行

最近做一个网站，客户要求在访问主域名的时候实现电脑访问时展示电脑页面，手机访问时展示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 转载请注明出处！