This blog introduces a classic application scenario of filters in the project
table of Contents
2. Write Filter: DeviceAdapter and configure it in web.xml;
Filter case: automatic adaptation of multi-terminal equipment:
One: Problem introduction:
There are more and more types of smart devices. When developing and designing application interfaces, different terminals need to be considered. At least two sets of interfaces must be developed: PC and mobile;
That is, the effect of the same website on different devices is different;
It is conceivable that in actual development, there are many interfaces in a system. If the judgment of different devices is to be done in each interface, then the workload is too large and troublesome;
In order to solve this problem, a device-adapted filter can be developed to determine whether to display the PC-side interface or the mobile-side interface by analyzing the difference in the information requested by the client.
Two: specific case
1. Preparation:
Create a web project, device-adapter: Note that the context path of the project is set to "/" ;
In the webContent directory, create a new folder
Among them, the index.html in the desktop directory needs to be displayed on the PC side; the index.html in the mobile directory needs to be displayed on the mobile side; ;;; The two index.html loads and displays different resources;
……………………………………………………
2. Write Filter: DeviceAdapter and configure it in web.xml;
The basic idea is: (1) First judge whether there is a /desktop or /mobile in the URL, which clearly indicates whether it is a PC or a mobile terminal; if there is a direct backward pass; if there is no subsequent processing
(2) According to the urser-agent in the request, it is judged whether it is the PC side or the mobile side;
(3) If it is on the PC side, after modifying the url, res.sendRedirect(targetUrl), interrupt this request, and let the browser re-send a request with url as targetUrl;
(4) If it is a mobile terminal, after modifying the url, res.sendRedirect(targetUrl), interrupt this request, and let the browser resend a request with url as targetUrl;
Points to note:
(1) req.getRequestURI(); Get the requested url;
(2) req.getHeader("user-agent"); Get the information of a field in the request header;
(3) res.sendRedirect(targetUrl); Let the browser resend a request;
(4) Pay attention to the comments in the code ;
package com.imooc.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class DeviceAdapter implements Filter{
@Override
public void destroy() {
// TODO Auto-generated method stub
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletRequest req = (HttpServletRequest)request;
HttpServletResponse res = (HttpServletResponse)response;
/**
* 当前程序默认首页是：/index.html；自然，在webContent根目录下没有index.html，index.html都在俩文件夹中；
* （1）如果是PC端的话，需要让路径变成/desktop/index.html,即将url重新跳转到跳转到desktop目录下的html页面；
* （2）如果是手机端，则需要变成/mobile/index.html;
* （3）同理，如果访问的是其他html，诸如访问的是/kkk.html的话，PC端：/desktop/kkk.html,手机端：/mobile/kkk.html;
*/
String url = req.getRequestURI(); //获取url
System.out.println("访问的url为："+url);
//如果浏览器发来的请求的url中，本身就自带了/desktop或者/mobile，就代表这是一个正确的PC端或者手机端的url；
// 此时，不需要处理，直接把请求向后送就可以了；
if(url.startsWith("/desktop") || url.startsWith("/mobile")) {
chain.doFilter(request, response);
}else {
String userAgent = req.getHeader("user-agent").toLowerCase();
// 在实际中,对于移动端的判断会更复杂些;
String targetUrl = ""; // 保存真正要跳转的url
if((userAgent.indexOf("android") != -1) || userAgent.indexOf("iphone") != -1) {
targetUrl = "/mobile"+url;
System.out.println("移动端设备正在访问，重新跳转的url为："+targetUrl);
// 上面判断完毕，修改玩targetUrl之后，并没有执行chain.doFilter()
// 而是使用了res.sendRedirect();通知客户端的浏览器重新发起一个请求;
// 由于没有使用chain.dofilter(),这个过滤器没有把请求向后传递，所以本次请求就会中断；
// 这个新请求的url就是我们修改后的targetUrl；
res.sendRedirect(targetUrl);
}else {
targetUrl = "/desktop"+url;
System.out.println("PC端设备正在访问，重新跳转的url为："+targetUrl);
res.sendRedirect(targetUrl);
}
}
}
@Override
public void init(FilterConfig arg0) throws ServletException {
// TODO Auto-generated method stub
}
}
user-agent: The information inside contains the information of the client; in practice, in order to determine what the client device is, it is often necessary to make a more complex analysis of the urser-agent; and there are usually ready-made wheels available;
Configure filter: the filter range is set to all HTML;
……………………………………………………
3. Effect:
……………………………………………………
4. Summary of the case
(1) The filter range (or scope of action) of the above case filter is set to HTML, so the above filter can not only act on index.html, but also on all html files;
(2) When developing an application, make two sets of html as soon as you do it. One set of html is for PC and one set is for mobile; the two sets of html can be placed in different directories, as long as they are in these two directories. If the name of the file is the same, the filter written above can automatically help us select the file of the corresponding version to display;